W3schoolDom笔记

insertBefore

insertBefore(需要插入的节点，在该节点之前插入)使用需要和
createElement
createTextNode
getElementById一起使用

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

appendChild

只有一个参数，参数就是插入之后的节点，前面用元素element来做对象。

var para = document.createElement("p");
var node = document.createTextNode("这是新的文本。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

像标签中插入文本

var para = document.createElement("p");
var node = document.createTextNode("这是新的文本。");
para.appendChild(node);

removeChild删除节点和appendChild添加节点类似

但是删除节点一般都需在引用父的情况下删除某个元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

还可以找到你需要删除的节点，利用其parentNode属性找到父，然后在删除

var child = document.getElementById('p1')
child.parent

替换HTML元素

replaceChild(替换的元素，查找的元素)方法
与python中的字符串的replace方法正好相反

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML DOM集合

之前的getElementById是获取单个元素，而getElementsById是获取HTMLCollection对象
该对象是类数组的HTML元素列表(集合)
例如：
选取所有文档中的<p>元素

var x=document.getElementsByTagName('p');

该集合中的元素可以通过索引号访问
访问第二个p元素

y = x[1]

HTML HTMLCollection长度

length属性定义了HTMLCollection中元素的数量
以前面获取的集合p为例

var a = o.length

HTMLCollection并非数组，我们可以遍历列表并通过数字引用元素，但无法使用数组方法，如
valueOf()、pop()或join().

DOM节点列表

Nodelist对象

与HTMLCollection几乎相同
childNodes 属性返回节点的子节点集合，以 NodeList 对象。大多数浏览器会为querySelectorAll()方法返回NodeList对象
提示：您可以使用 length 属性来确定子节点的数量
NodeList中的元素可通过索引号进行访问
访问第二个p节点

y = myNodeList[1]

HTMLCollection与NodeList的区别

HTMLCollection(前一章)是HTML元素的集合
NodeList是文档节点的集合
访问HTMLCollection项目，可以通过他们的名称、id或索引号。
访问NodeList项目，只能通过他们的索引号。
只有NodeList对象能包含属性节点和文本节点

属性节点

attributes
attributes 属性返回指定节点的属性集合，即 NamedNodeMap。

document.getElementsByTagName("BUTTON")[0].attributes;

一般使用length来获取指定节点的属性有多少个，除了标签，写在<>括号中的都是属性

BOM 浏览器对象模型

Window对象
所有全局JavaScript对象，函数和变量会自动称为window对象的成员。
全局变量是window对象的属性
全局函数是window对象的方法
甚至(HTML DOM的)document对象也是window对象属性
(就是window是最上层的对象的意思吧)
如

window.document.getElementById("header");

等同于

document.getElementById("header");

窗口尺寸

窗口不包含工具栏和滚动条
返回像素计的尺寸
innerHeight,innerWidth

window.innerHeight
window.innerWidth

对于IE8，7，6，5
可以采用

document.documentElement.clientHeight
document.documentElement.clientWidth
或
document.body.clientHeight
document.body.clientWidth

获取不同浏览器窗口的所有

javaScript代码

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

一些很有趣的窗口方法

.open() - 打开新窗口
.close() -关闭当前窗口
.moveTo() -移动当前窗口
.resizeTo() -重新调整当前窗口

window screen

上面是浏览器的窗口，现在展示的是用户屏幕窗口信息Window.screen对象，就是电脑屏幕大小
该对象也可不带window前缀

screen.width
.height
.avaiwidth # 有效宽度
.avaiheight # 有效高度
.colorDepth # 颜色深度
pixelDepth # 像素深度

screen.width

返回的也是以像素级的访问者屏幕宽度

document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;

screen.availWidth

属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;

Window Location

可用于获取当前页面地址(URL)并把浏览器重定向到新页面
也可不带window前缀书写

location.href 返回当前页面的href(URL)
.hostname 返回web主机的域名
.pathname 返回当前页面的路径或文件名
。protocol 但会使用的web协议
。assign 加载新文档

实例

返回当前页面的href

document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;

其他实例类似

location.port方法

可以返回主机的端口号，但大多数浏览器不会显示出来

唯一一个带有参数的

assign('重新加载文档的地址')

<script>
function newDoc() {
    window.location.assign("https://www.w3school.com.cn")
 }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

Window History

该对象包含浏览器历史
常用方法

history.back() -等同于在浏览器点击后退按钮
.forward() -前进按钮

Window Navigator

包含有关访问者的信息,也可不带window前缀来写
一些属性

navgiator.appName 返回浏览器的应用程序名称：
.appCodeName  返回浏览器的应用程序代码名称：
.platform 返回浏览器引擎的产品名称：

还有其他的查看是否启用cookie
.cookieEnabled
浏览器版本
.appVersion
浏览器代理
userAgent

用可能以上navigatar属性都是假的

那navigator对象应该是最没用的了

不同浏览器能够使用相同名称
导航数据可被浏览器拥有者更改
某些浏览器会错误标识自身以绕过站点测试
浏览器无法报告发布晚于浏览器的新操作系统

其他的，觉得还是有点用

platform 属性返回浏览器平台
language 属性返回浏览器语言：
onLine 属性返回 true，假如浏览器在线：
javaEnabled() 方法返回 true，如果 Java 已启用：

JavaScript弹出框

三种类型弹出框：警告框、确认框和提示框分别是
alert()

alert("我是一个警告框！");

confirm();写入一个函数中就会自动运行，提示框

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

prompt()
语法

window.prompt("sometext","defaultText");

实例

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

JS TIming

这就是所谓的定时事件（ Timing Events）。
setTimeout(function,milliseconds)
在指定等待的毫秒数后执行函数
setInterval(function,millseconds)
等同于上一个函数，但持续重复执行该函数
，上一个函数是执行1次，而这重复执行,第二个参数可认为是每个执行之间的时间间隔

停止执行

clearTimeout()==》setTimeout
括号里一般是setTimeout返回的变量

myVar = setTimeout(function,millseconds);
clearTimeout(myVar);

clearInterval()==》setInterval()
括号里一般是setInterval返回的变量

JS Cookies

cookie保存在名称键值对中
当浏览器从服务器请求一个网页时，将属于该页的cookie添加到该请求中。这样服务器就获得了必要的数据来"记住"用户的信息。

创建cookie

多个参数用分号分开，参数的值可以有多个，使用逗号分开

document.cookie='a=1;b=2;c=3,4'# 多个参数用分号分开，参数的值可以有多个，使用逗号分开

官方实例
expires cookie有效期，path存储cookie的路径，默认当前页面

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

读取Cookie

var x=document.cookie;

改变Cookie

重新赋值，是根据键值对来判断是否改变么

删除Cookie

直接把expires参数设置为过去的日期

设置cookie的函数

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 

获取Cookie的函数

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
} 

检查cookie的函数

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}