一、关于节点
1、节点树状图
document>documentElement>body>tagName
2、节点类型
元素节点（标签）、文本节点（文本）、属性节点（标签属性）
3、document的属性nodeType的返回值是数字：
1：元素节点；2、属性节点；3、文本节点
4、获取节点的方法：
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()
5、属性节点的获取：
元素.attributes获取的是元素身上的所有属性构成的集合（数组），得到的数组里的值的某元素是 元素.attributes[1].value
元素.removeAttribute（“属性”）删除属性
元素.getAttributes（“属性名”） 获取属性名的方法
元素.setAttribute（“属性名”，“属性值”） 给元素设置属性和属性值
6、获取元素的子节点
元素.childNode 这个属性有兼容性
标准浏览器会获取到文本节点，低版本的浏览器不会获取到文本节点，所以使用children获取子节点
（1）获取第一个子节点
标准：元素.firstElementChild
非标准：元素.firstChild
兼容性写法:var list=documentById("list")
var first=list.firstElementChild||list.firstChild
console.log(first)
（2）获取最后一个子节点
标准：元素.lastElementChild
非标准：元素.lastChild
兼容性写法:var list=documentById("list")
var last=list.lasttElementChild||last.firstChild
console.log(last)
（3）获取上一个兄弟节点
标准：元素.previousElementSibling
非标准：元素.previousSibling
（4）获取下一个兄弟节点
标准：元素.nextElementSibling
非标准：元素.nextSibling
7、获取父节点
元素.parentNode 没有兼容性
8、区分offsetparent和parentNode的区别
offsetparent的父级，谁有position：relative；谁就是他的父级
二、DOM2动态创建节点
1、生成节点的方法
document.creatElement("div")
2、插入节点的方法
父元素.appendChild（新节点）
在父节点的后面插入新节点
3、在指定的位置插入新的节点
父元素.insertBefore（新节点，谁前面插入）
新节点插入到指定节点前面
插入新节点的兼容性（浏览器的标准与非标准）
if（list.children[0]）{
list.insertBefore(li,list.children[0])
}else{
list.appendChild(li)
}这种写法，是因为低版本浏览器不会吧文本节点当做子节点，所以insertBefor不起作用，要用appendChild追加一个元素
4、删除元素节点
父元素.removeChild（）
补充知识点
1、关于超链接 a
<a href="javascript:;">取消刷新页面的功能
<a href="#s"> 锚点跳转，跳转到某一个id叫做S的位置上
<a href="">点击会刷新页面，会向服务器发送一次请求
2、字符串拼接和DOM创建都是渲染得方式
字符串拼接：
优点：简单，层次感强，可以处理大量数据
缺点：字符串拼接会影响到原有子元素的事件
DOM创建：
优点：是一个独立的个体，不会影响到原有元素
缺点：处理数据过量会比较麻烦，会造成dom回流
3、DOM回流
页面渲染的时候，我们队html结构的增删查改时，浏览器会对所有的dom进行重新排列，这就是DOM回流，严重影响了浏览器的性能