DOM 编程艺术

DOM——Document Object Model

document 对象

document对象是文档的根节点。

常用方法

方法	描述
document.open()	清除当前文档所有内容，使得文档处于可写状态
document.write()	向当前文档写入内容。
document.querySelector()	接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
document.querySelectorAll()	返回所有匹配给定选择器的节点。
document.getElementById()	返回带有指定 ID 的元素。
document.getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。注意：里面的标签名称要大写
document.getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
document.createElement()	创建元素节点，并返回该节点。

Node 接口

常用属性
浏览器提供一个原生的节点对象Node，所有 DOM 节点都继承了 Node 接口，拥有一些共同的属性和方法。

• Node.nodeType
  返回一个整数值，表示节点的类型。

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

• Node.nodeValue

  nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。
  只有文本节点（text）和注释节点（comment）有文本值，其他类型的节点一律返回null。

常用方法

• Node.appendChild()
  接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

• Node.insertBefore()
  在某个元素之前插入元素。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

• Node.removeChild()
  接受一个子节点作为参数，用于从当前节点移除该子节点。

var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

• Node.replaceChild()
  replaceChild()接受两个参数：要插入的元素和要替换的元素

parentNode.replaceChild(newChild, oldChild);

• Node.cloneNode()
  接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。

var cloneUL = document.querySelector('ul').cloneNode(true);

Element对象

常用属性

• Element.innerHTML
• Element.scrollHeight，Element.scrollWidth，Element.scrollLeft，Element.scrollTop
• Element.style

常用方法
- Element.getAttribute()
或许当前节点的属性的属性值

node.getAttribute('id');

• Element.setAttribute()
  设置元素属性

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

• Element.removeAttribute()
  删除元素属性

node.removeAttribute('id');

• Element.querySelector()
  接受 CSS 选择器作为参数，返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素，就返回null。

var content = document.getElementById('content');
var el = content.querySelector('p');
// 返回content节点的第一个p元素。

• Element.querySelectorAll()
• Element.getElementsByClassName()
• Element.getElementsByTagName()