DOM: Document Object Model -> 文档对象模型。
DOM就是描述整个HTML页面中描述节点关系到图谱，在DOM中，提供了很多的获取元素的方法和之间关系的属性，以及操作这些元素的方法。
- 获取页面中获取元素的方法
document.getElementById('元素的ID值');在整个文档中，通过元素的ID获取到这个元素对象，获取的是一个元素。
注意：如果页面中id重复了，那么这个方法默认只获取第一个元素。在IE6、7下，会把表单元素(input)的name属性值当做id来使用。在IE7、7下，不区分id的大小写。
项目实战注意：不要让表单元素的name和其他元素的id冲突。不要用id的大小写来区分不同的元素。
如果没有获取到元素，返回的结果是null。
var oDiv = document.getElementById('tab');
// 可以直接的用元素的id来代表当前这个元素对象（不推荐使用）
console.log(tab); // tab是id值
- 通过元素的标签名，来获取一组元素（是多个元素，有几个满足条件的元素，就获取几个）。在整个文档中，通过元素的标签名获取一组元素。这一组元素是对象数据类型的结果，并且是一个类数组（以数字作为索引，索引从0开始，逐级递增，索引代表的是当前对应的某一个元素，有一个叫做length的属性，代表获取的个数）。
document.getElementsByTagName('元素标签名');
document称之为上下文（context），就是我们可以自己限定当前获取元素的范围，获取整个文档中的li。
var oLis = document.getElementsByTagName('li');
console.dir(oLis);
console.log(oLis.length); // 代表获取元素的个数
document称之为上下文（context），就是我们可以自己限定当前获取元素的范围。getElementById的上下文只能是document。
// 获得id为tab下的所有li
var oTab = document.getElementById('tab');
var oLis = oTab.getElementsByTagName('li');
console.dir(oLis);
-
context.getElementsByName()通过元素name属性的值获取一组元素。在IE浏览器下，只对表单元素其作用，这个方法应用于获取具有同样name的表单元素。
var oDivs = document.getElementsByName('element');
console.log(oDivs);
-
context.getElementsByClassName()通过元素的类名(class值)获取一组元素。这个方法在项目中最常用的获取元素的方法，但是这个方法不兼容，在IE6-8中，会报错。获取多个元素的这几个方法，即使获取的只有一个，它也是类数组，也是一个集合，如果想用其中的第一个元素，也需要通过索引拿出来使用。
var oList = document.getElementsByClassName('tag');
document.documentElement // 获取HTML元素
document.body // 获取body元素
// 兼容所有浏览器的获取当前屏幕的宽度,高度
var curWidth = document.documentElement.clientWidth || document.body.clientWidth;
var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
6.在移动端获取元素常用的方法，（IE6-8下不兼容）。
document.querySelector(); 获取一个
document.querySelectorAll(); 获取多个，得到类数组集合
var ele = document.querySelector('#id');
var ele = document.querySelector('.class');
var eles = document.querySelectorAll('#tab li');
DOM的节点关系
节点：Node 一个页面中标签，文字，注释...都是节点。
对于一个HTML文档：
<div id="div1">
<h1>前端</h1>
<!--这里是注释-->
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="li3">JavaScript</li>
<li>HTML5移动端</li>
<li>NodeJS</li>
</ul>
</div>
则获取关系的属性如下：
// childNodes: 获取元素的所有子节点
// children: 获取所有的元素子节点
// parentNode: 获取父亲节点
// previousSibling: 获取上一个哥哥节点
// nextSibling: 获取下一个弟弟节点
// firstChild: 获得所有子节点中的第一个
// lastChild: 获得所有子节点的最后一个
console.log(oDiv.childNodes); // 获取所有的子节点
console.log(oDiv.children)
console.log(oDiv.parentNode);
console.log(oDiv.previousSibling);
console.log(oDiv.nextSibling);
console.log(oDiv.firstChild);
console.log(oDiv.lastChild);
// 在JavaScript中，需要我们掌握的节点类型：
// nodeType, nodeName, nodeValue
// 元素节点（元素标签）1, 大写的标签名, null
// 文本节点（文字） 3, #text, 文字内容
// 注释节点（注释） 8, #comment, 注释内容
// document 9, #document, null
var oDiv = document.getElementById('div1');
console.log(oDiv.nodeType); // 1
console.log(oDiv.nodeName); // "DIV"
console.log(oDiv.nodeValue); // null
实例
在标准浏览器下，把空格（space）和Enter（回车）都当做文本节点处理。 写一个方法，模拟children方法，实现获取指定元素下的元素。
// 写一个方法，模拟children方法，实现获取指定元素下的元素子节点
/*
* getMyChildren: 获取指定元素下所有的元素节点
* @parameter:
* ele: 我们要获取哪个元素下的元素节点，就传递什么元素
* @parameter:
* tagName: 获取那种类型的元素，例如：传入div，只获取div
* @return:
* 最终获取的元素子节点
* */
function getMyChildren(ele, tagName) {
var ary = [];
var nodes = ele.childNodes;
for (var i = 0; i < nodes.length; i++) {
var cur = nodes[i];
if (cur.nodeType === 1) {
if (tagName) {
if (cur.nodeName.toLowerCase() === tagName.toLowerCase()) {
ary.push(cur);
}
} else {
// 如果没有传递tagName，则默认把所有元素放到数组中
ary.push(cur);
}
}
}
return ary;
}
元素的增删改
动态创建一个元素标签。
// 动态创建一个元素标签
// document.createElement(): 创建一个元素标签对象
// appendChild: 把这个元素添加到指定的元素的末尾位置， -> 容器.appendChild(元素)。
// insertBefore(): 把新的元素newEle添加到老的元素oldElem之前
// oldEle.parentNode.insertBefore(newEle, oldEle)
// removeChild: 删除指定元素
// 动态创建一个div元素对象
var oDiv = document.createElement('div');
oDiv.id = 'div1';
oDiv.style.width = '100px';
oDiv.style.height = '100px';
oDiv.style.border = '1px solid red';
// 把创建好的元素添加到页面中
document.body.appendChild(oDiv);
var oP = document.createElement('p');
oP.id = 'p1';
oP.style.width = '100px';
oP.style.height = '100px';
oP.style.border = '1px solid black';
document.body.insertBefore(oP, oDiv);
oDiv.parentNode.removeChild(oP);
var cloNode = oDiv.cloneNode(true);
// 克隆一个元素 true -> 把元素里面子子孙孙都克隆，默认是false，只克隆当前的
var dd = document.createElement('div');
dd.style.background = 'blue';
oP.parentNode.replaceChild(dd, oDiv); // 替换
// setAttribute: 设置元素的属性，包含自定义的，是修改HTML元素的结构的，使用这个方法，可以再HTML上体现出来
dd.setAttribute('data-new', '自定义属性');
console.log(dd.getAttribute('data-new'));
dd.removeAttribute('data-new');
// 在IE6-8下，这个方法不能修改class属性
