1.节点操作
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
节点类型
通过noteType属性可以获取节点的类型
document 的节点类型---9
标签 的节点类型 ----1
属性的节点类型 -----2 getAttributeNode("属性"):获取元素的属性节点
文本的节点类型 ----3 元素的第一个子节点就是文本节点
节点名称
通过nodeName可以获取元素的节点名称
document 的节点名称----#document
标签的节点名称 -----大写的标签名
属性的节点名称---属性名
文本的节点名称-------#text
节点值
通过nodeValue可以获取元素的节点的值
document 的节点值-----null
标签的节点值----------null
属性的节点值--------属性值
文本的节点值---文本的内容
节点之间的关系
节点之间的关系
节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）
父节点：parentNode
父元素节点：parentElement
子节点：childNodes 标签节点、文本节点、注释节点 得到的是伪数组
子元素节点：children 标签节点
第一个子节点 ：firstChid 文本
第一个子元素节点：firstElementChild: 第一个标签
最后一个子节点 ------lastChild 文本
最后一个子元素节点----lastElementChild 最后一个标签
上一个子节点： previousSibling 文本
上一个子元素节点---previousElementSibling 上一个标签
下一个子节点 nextSibling 文本
下一个子元素节点 nextElementSibling 下一个标签
总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。
插入节点
insertBefore()方法可在已有的子节点插入一个新的子节点
node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。
创建元素的三种方式
（1）document.write()
弊端：只能往body中添加元素
document.write('<div class = "box1"></div>')
（2）innerHTML
弊端：在同级下只能添加一种元素，多个会覆盖
document.getElementById("divObj").innerHTML = "<p>哈哈</p>"
（3）document.createElement() （推荐使用这种方法）
父元素.appendChild(子元素) 给父元素末尾添加子元素
var pObj = document.createElement("p")
divObj1.appendChild(pObj);
动态的创建列表
思路：1、创建内容数组
2、获取元素，给按钮绑定单击事件
3、创建ul标签
4、将ul添加到box中
5、遍历数组
6、创建li标签
7、添加内容
8、按钮禁用
代码：
var list = ["功法1","功法2","功法3","功法4","功法5"] var box = document.querySelector("div") document.querySelector("button").onclick = function(){ box.appendChild(document.createElement("ul")) for(var i =0;i<list.length;i++){ var li = document.createElement("li") li.innerHTML = list[i] if(i==0){ li.style.color = "blue" } li.className = "hover" document.querySelector("ul").appendChild(li) } this.disabled = true } BOM 概念：BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
BOM的*对象
window 是浏览器的*对象 ，当调用window 下的属性的方法时，可以省略
注意：window下一个特殊的属性 window.name = "" 空字符串
对话框：
alert()
prompt()
confirm()
加载事件
onload 事件
onload 事件会在页面或图像加载完成后立即发生
onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
Location 对象
常用属性：
地址上#及后面的内容
console.log(window.location.hash)
主机名及端口号
console.log(window.location.host);
主机名
console.log(window.location.hostname);
文件的路径---相对路径
console.log(window.location.pathname)
端口号
console.log(window.location.port)
协议
console.log(window.location.protocol)
搜索的内容
console.log(window.location.search)
History 对象
跳转
btn.onclick = function(){
window.history.href = "网址";
}
前进
btn2.onclick = function(){
window.history.forward();
}
后退
btn.onclick = function(){
window.history.back();
}
Natigator 对象
通过userAgent 可以判断用户浏览器的类型
console.log(window.navigator.userAgent());
通过platfrom 可以判断浏览器所在的系统平台类型
console.log(window.navigator.platfrom)