[记录] JavaScript 中的DOM操作

DOM：Document Object Model 文档对象模型
DOM对象操作
document代表整个文档

一、获取DOM元素节点
1. 通过ID获取元素： 选取一个元素，所有浏览器都兼容

document.getElementById('ID名称'); 
示例： 
var oDiv = document.getElementById('demo');
console.log(oDiv);
打印结果为：<div id="deom">...</div>

2. 通过标签名获取元素节点： 选取一组元素，结果是一个类数组

elem.getElementsByTagName('标签名');
示例：
var oLi = oDiv.getElementsByTagName('li');
console.log(oLi);
打印结果为：[li,li,...,li]

3. 通过class名获取元素节点： 选取一组元素。IE9以下版本不支持

elem.getElementsByClassName('class名');

4. 通过标签属性name获取元素节点: 获取一组元素，IE10以下只有部分标签name可生效(表单、img、iframe)

elem.getElementsByName('标签name的值');

5. 通过css选择器获取第一个元素： IE8以下浏览器不支持

elem.querySelector('css选择器匹配规则')；
匹配指定选择器的第一个元素。

6. 通过css选择器获取所有匹配元素： IE8以下浏览器不支持

elem.querySelectorAll('css选择器匹配规则');
匹配指定选择器的集合
注意：
querySelector()和querySelectorAll() 方法获取的是元素节点的复本

二、遍历节点树
节点类型：

元素节点  => nodeType == 1
属性节点  => nodeType == 2
文本节点  => nodeType == 3
注释节点  => nodeType == 8
document => nodeType == 9

节点的四个属性：

nodeName ： 元素的标签名， 以大写形式表示， 只读
nodeValue : Text文本节点或Comment注释节点的文本内容，可读写
nodeType : 该节点的类型，只读
attributes ： 元素节点的属性集合

判断一个元素下是否包含子节点： elem.hasChildNodes();

父节点 (最顶层的parentNode为#document);
elem.parentNode // 获取elem的父节点

子节点们
elem.childNodes // 获取elem的第一层所有子节点

第一个子节点
elem.firstChild

最后一个子节点
elem.lastChild

兄弟节点
elem.nextSibling  // 后一个兄弟节点
elem.previousSibling // 前一个兄弟节点

offsetParent : 获取元素有定位的父级元素

三、基于元素节点树的遍历 (除children外IE都不兼容)

返回elem元素下的第一层元素子节点
elem.children  // [p, a, strong, ...]

其他IE不兼容：
elem.parentElement : 返回elem元素的父元素节点

elem.childElementCount : elem元素节点下的元素节点长度

elem.firstElementChild : 第一个元素节点

elem.lastElementChild : 最后一个元素节点

nextElementSibling/previousElementSibling : 后一个/前一个兄弟元素节点

四、DOM树

getElementById方式定义在Document.prototype上，因此获取ID只能通过document.getElementById()来获取

getElementsByTagName方法定义在Document.prototype和Element.prototype上, 因此获取标签有两种方式
document.getElementsByTagName('标签');
elem.getElementsByTagName('标签'); 

document.body   		  =>标签
document.head   		  =>  标签
document.documentElement          =>  标签

五、DOM节点的创建、插入、删除、替换
1. 创建不同类型的节点

创建元素节点： document.createElement('标签名');
创建文本节点： document.createTextNode('文本内容');
创建注释节点： document.createComment('注释内容');
创建文档碎片： document.createDocumentFragment();

2. 插入节点

appendChild() : 元素内最后插入
语法:
ParentNode.appendChild(A);
理解： 在ParentNode内的最后插入A元素

insertBefore()： 元素之前插入
语法：
ParentNode.insertBefore(A, B);
理解： 在ParentNode内, insert A, before B , 把A插入到B的前面

注意：如果插入一个已经存在的元素，则会先删除，在插入。

3. 删除节点

ParentNode.removeChild(删除内容);
从父节点下删除指定节点，返回值是删除的内容。

child.remove(); // 自己删除自己

4. 替换节点

parentNode.replaceChild(new, old); 
// 返回值是剪切出来的old内容
理解：在parentNode内, 用new替换old

六、属性操作(Element节点的属性和方法)

innerHTML 标签之间的内容，包括标签和文本。
获取: elem.innerHTML
写入: elem.innerHTML = 'ABC'; // 覆盖已有的内容

innerText(火狐不兼容)/textContent(老版本IE不兼容) 

在元素上设置属性
elem.setAttribute('属性名'， '属性值')

获取元素上的属性值
elem.getAttribute('属性名');

删除元素上的属性
elem.removeAttribute('属性名');