{Dom}

Dom

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

document 对象

• 定义
  表示整个文档（window.document）

• 作用
  通过JavaScript对HTML页面中的所有元素进行访问、修改。

• 属性 = 能够获取或设置的值

  • innerText
    返回 元素内包含的文本内容

• innerHTML
  返回元素的HTML结构（文本+标签）

• elem.children （HTMLCollection）
  返回指定元素的子元素集合。只返回HTML节点，不返回文本节点。

• elem.childNodes （NodeList）
  返回指定元素的子元素集合，包括HTML节点，所有属性，文本。

Element对象

• 定义
  表示HTML元素（比如 等）

• 作用
  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：设置元素属性

例

 
    
hello world  123
 
    
 饥人谷


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);// 
......
 

查询： 
console.log(document.getElementById('p1'));//
hello ...
   
console.log(document.getElementsByClassName('p2')); //HTMLCollection[1]
console.log(document.getElementsByTagName('p')); //HTMLCollection[2]
console.log(document.querySelector('span')); // 123
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); // 
...
   
创建：
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);------------------->删除
 ...
  

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