[记录] 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('属性名');
