Dom

定义
文档对象模型（Document Object Model）
是文档的编程接口。
作用
把web 页面 和 脚本/编程语言连接起来，
即访问或操作HTML文档、XHTML文档、XML文档中的节点元素。
原理
HTML文档是树状结构，根为<HTML>；
DOM也是树状结构，根为window或document对象。
所以DOM就可以把HTML以树状的形式呈现出来。

document 对象

定义
表示整个文档（window.document）
作用
通过JavaScript对HTML页面中的所有元素进行访问、修改。
属性 = 能够获取或设置的值
- innerText</a>
  返回元素内包含的文本内容
innerHTML
返回元素的HTML结构（文本+标签）
elem.children （HTMLCollection）
返回指定元素的子元素集合。只返回HTML节点，不返回文本节点。
elem.childNodes （NodeList）
返回指定元素的子元素集合，包括HTML节点，所有属性，文本。

Element对象

定义
表示HTML元素（比如<body> <span> 等）
作用
DOM提供了一系列的方法可以进行元素的操作。
方法 = 能够执行的动作
- 查询
  document节点：
  document.getElementById// 匹配指定ID的元素节点
  document.getElementsByClassName// 一个类数组的对象
  document.getElementsByTagName// 一个类数组的对象
  document.getElementsByName// 一个类数组的对象
  document.querySelector// 第一个匹配指定的CSS选择器的元素节点。
  document.querySelectorAll// 匹配指定的CSS选择器的所有节点集合
  父节点：
  parentObj.childNodes：子元素列表（NodeList）
  parentObj.firstChild：第一个子元素
  parentObj.lastChild：最后一个子元素
  兄弟节点：
  neighbourNode.nextSibling：下一个兄弟元素
  子节点：
  childNode.parentNode
- 增加
  appendChild：在元素末尾添加元素。
  insertBefore：在元素之前插入元素。
- 删除
  removeChild：从某个父节点中删除指定子节点。
修改
replaceChild：用新元素替换旧元素。
创建
document.createElement（"HTML标签"）：生成HTML元素节点。
document.createTextNode（"文本内容"）：生成文本节点。
属性 = 能够获取或设置的值
object.getAttribute：获取元素的值
object.setAttribute：设置元素属性

例

<div id="demo"> 
    <p id="p1">hello world  <span>123</span></p> 
    <p class="p2"> 饥人谷</p>
</div>

var parent = document.getElementById('d1'); 
var p1 =  document.getElementById('p1'); 
var p2 =  document.getElementsByClassName('p2') 

属性：
console.log(p1.innerText);// hello world 123
console.log(p1.innerHTML);// <p id="p1">......</p> 

查询： 
console.log(document.getElementById('p1'));//<p id="p1">hello ...</p>   
console.log(document.getElementsByClassName('p2')); //HTMLCollection[1]
console.log(document.getElementsByTagName('p')); //HTMLCollection[2]
console.log(document.querySelector('span')); // <span>123</span>
console.log(document.querySelectorAll('demo')); // NodeList[0]

console.log(demo.childNodes); //  NodeList[5]
console.log(demo.firstChild); // #text
console.log(demo.lastChild); // #text

console.log(p1.nextSibling); // #text
console.log(p1.parentNode); // <div id="demo">...</div>
   
创建：
document.creatElement('p');--------->创建元素p   
var  txt = document.createTextNode('apple');--------->创建文本apple，并赋给txt 
var  txt2 = document.createTextNode('pen'); --------->创建文本pen，并赋给txt2
增加：
demo.appendChild(txt); ------------------->把apple添加到div末尾
修改：
demo.insertBefore(txt,p1); ------------------->把apple插入.p1之前
demo.replaceChild(txt2,txt); ------------------->用pen替换apple
删除：
demo.removeChild(p1);------------------->删除<p id="p1"> ...</p>

tip：

HTMLCollection VS. NodeList

定义：
NodeList 对象代表一个有顺序的节点列表。
HTMLCollection 是一个接口，表示 HTML 元素的集合。
相同：
1 都是类数组对象，都有length属性，可以通过for循环迭代
2 都是只读的
3 都是实时的，即文档的更改会立即反映到相关对象上面
(有一个例外，document.querySelectorAll返回的NodeList不是实时的)
4 都有item()方法，可以通过item(index)或item("id")获取元素
不同：
1 HTMLCollection对象具有namedItem()方法，可以传递id或name获得元素
2 HTMLCollection的item()方法和通过属性获取元素(document.forms.f1)可以支持id和name，而NodeList对象只支持id