Javascript操作DOM总结

2017-09-09更新

DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM重要数据类型

Document对象

继承自Node和EventTarget
继承自HTMLDocument接口
参见Document

对象	说明
`document`	当一个成员返回`document`对象（例如，元素的`ownerDocument`属性返回,它所属于`document`) ，这个对象就是`document`对象本身。
`element`	`element`是指由 DOM API 中成员返回的类型为`element`的一个元素或节点。例如，`document.createElement()`方法会返回一个`node`的对象引用，也就是说这个方法返回了在DOM中创建的 `element`。`element`对象实现了DOM Element接口以及更基本的Node接口。
`nodeList`	`nodeList`是一个元素的数组，如从`document.getElementsByTagName()`方法返回的就是这种类型。 nodeList中的条目由通过下标有两种方式进行访问：`list.item(1)`,`list[1]`,两种方式是等价的，第一种方式中`item()`是`nodeList`对象中的单独方法。后面的方式则使用了经典的数组语法来获取列表中的第二个条目。
`attribute`	当`attribute`通过成员函数 (例如，通过`createAttribute()`方法) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM中的属性也是节点，就像元素一样，只不过您可能会很少使用它。
`namedNodeMap`	`namedNodeMap`和数组类似，但是条目是由name或index访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。出于这个目的，`namedNodeMap`有一个`item()`方法，你也可以从`namedNodeMap`添加或移除条目。

window对象表示浏览器中的内容

DOM创建

DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，它是一个整数:

Element，元素
Attribute，属性
Text，文本
DOM节点创建最常用的便是document.createElement和document.createTextNode方法：

1
2
3

var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');

DOM查询

元素查询的API返回的的结果是DOM节点或者DOM节点的列表。
document提供了两种Query方法。

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");
// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');

Element也提供了很多相对于元素的DOM导航方法：

// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;

// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;    

// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

DOM更改

// 添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替换子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

属性操作

// 获取一个{name, value}的数组
var attrs = el.attributes;

// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有属性设置
el.hasAttributes();

Node.innerText

Node.innerText 是一个表示一个节点及其后代的“渲染”文本内容的属性。

作为一个获取器，如果用光标突出显示元素的内容，然后将其复制到剪贴板，则它将近似于用户将获得的文本。此功能最初由Internet Explorer引入，并在所有主要浏览器供应商采用后于2016年在HTML标准中正式规定。

Node.textContent是一个有点类似的替代方案，虽然两者之间有重要的区别。

element.innerHTML

Element.innerHTML属性设置或获取描述元素后代的HTML语句。

Note: 如果一个<div>,<span>, 或 <noembed>节点具有一个文本子节点,包含字符(&),(<), 或(>), innerHTML将这些字符分别返回为＆amp;, ＆lt;和＆gt;。使用Node.textContent获取一个这些文本节点内容的正确副本。

DOM