关于document的节点；用Dom2创建节点；

一、关于节点

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回流，严重影响了浏览器的性能