JavaScript之DOM

什么是DOM？

DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document对象；M（模型）可以理解为网页文档的树型结构。

DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为W3C 标准。

DOM节点

节点：加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成

节点种类：元素节点、文本节点、属性节点

DOM节点获取

getElementById()    获取特定 ID 元素的节点

注意问题：window.onload

元素节点 属性：tagName       innerHTML

HTML属性的属性：id      title    style     className

getElementsByTagName()    获取相同元素的节点列表

document.getElementsByTagName('*'); //获取所有元素

document.getElementsByTagName(‘*’).length

getElementsByName()      获取相同名称的节点列表

document.getElementsByName('add') //获取 input 元素

document.getElementsByName('add')[0].value //获取 input 元素的 value 值

document.getElementsByName('add')[0].checked//获取 input 元素的 checked 值

getAttribute(名称)    获取特定元素节点属性的值

setAttribute(名称，值)    设置特定元素节点属性的值

removeAttribute(名称) 移除特定元素节点属性

子节点：只取第一层

childNodes      例：oUl.childNodes                

兼容性问题:  FF空的文本节点也算作一个节点   IE：空的不算

解决方法：

 nodeType：节点类型    例：body.childNodes[0].nodeType

 返回值：1为元素节点      3为文本节点

Children    例：oUl.children

 IE\FF\谷歌都兼容

父节点：只有一个

parentNode 结构上的父级元素        例：oLi.parentNode

offsetParent 定位上的父级元素        例：oLi.offsetParent

首尾节点（有兼容性问题）

firstChild\firstElementChild 第一个子节点       

例：oFirst=oUl.firstElementChild || oUl.firstChild

lastChild\lastElementChild  最后一个子节点       

例：oLast=oUl.lastElementChild || oUl.lastChild

兄弟节点（有兼容性问题）

nextSibling\nextElementSibling  下一个节点       

例：oNext=oUl. nextElementSibling || oUl.nextSibling

previousSibling\previousElementSibling  上一个节点     

例：oPrevious=oUl. previousElementSibling || oUl. previousSibling

createElement() 创建一个元素节点

document.createElement('p'); //创建一个元素节点

createTextNode() 创建一个文本节点

var text = document.createTextNode('段落'); //创建一个文本节点

p.appendChild(text); //将文本节点添加到子节点末尾

appendChild() 将新节点追加到子节点列表的末尾

appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。

var box = document.getElementById('box'); //获取某一个元素节点

var p = document.createElement('p'); //创建一个新元素节点<p>

box.appendChild(p); //把新元素节点<p>添加子节点末尾

insertBefore() 将新节点插入在前面

box.parentNode.insertBefore(p, box); //在box(div)之前创建一个节点

replaceChild() 将新节点替换旧节点

var p=document.createElement('p');

box.parentNode.replaceChild(p,box); //把<div>换成了<p>

cloneNode() 复制节点

var box = document.getElementById('box');

var clone = box.firstChild.cloneNode(true); //获取第一个子节点，       true 表示复制内容

box.appendChild(clone); //添加到子节点列表末尾

removeChild() 移除节点

box.parentNode.removeChild(box); //删除指定节点

文档碎片可以提高DOM操作性能(理论上)

文档碎片原理

    document.createDocumentFragment()