DOM整理
节点类型
1.元素节点类型
| 节点类型 | 数值 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 文档节点 | 9 |
2.nodeName和nodeValue属性
元素节点的nodeValue始终为null，nodeName始终保存元素的标签名。
3.childNodes
element.childNodes返回类数组对象。
4.Document类型
| 属性 | 值 |
|---|---|
| nodeType | 9 |
| nodeName | "#document" |
| nodeValue | null |
| parentNode | null |
5.document.referrer // 取得来源页面的URL
6.Element类型
| 属性 | 值 |
|---|---|
| nodeType | 1 |
| nodeName | 元素标签名 |
| nodeValue | null |
| parentNode | Document和Element |
| 子节点 | Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference |
| attributes | 标签属性集合 |
访问元素标签名，也可以通过tagName访问
7.Text类型
| 属性 | 值 |
|---|---|
| nodeType | 3 |
| nodeName | "#text" |
| nodeValue | 节点所包含的文本 |
| parentNode | 一个Element |
| 子节点 | 无 |
DOM扩展
1.可以调用querySelector()和querySelectorAll()方法的类型可以为Document、DocumentFragment和Element。
2.由于IE9及之前版本不会返回文本节点，而其他浏览器都会返回文本节点，导致了在使用childNodes和firstChild等属性时的行为不一致。可以通过以下API来解决。
| 方法 | 说明 |
|---|---|
| childElementCount | 返回子元素个数（不包含文本节点和注释） |
| firstElementChild | 返回第一个元素节点 |
| lastElementChild | 返回最后一个元素节点 |
| perviousElementSibling | 返回上一个兄弟元素节点 |
| nextElementSibling | 返回下一个兄弟元素节点 |
3.有关类名
- getElementsByClassName()获取带有指定类的所有元素的NodeList
- classList属性
- add(value) 将给定字符串添加到列表，如存在，则不添加
- remove() 删除
- contains() 是否包含
- toggle() 列表如存在，则删除；如不存在，则添加
// 例子
// 删除disabled类
div.classList.remove('disabled');
1
2
3
4
2
3
4
附：汇总
| 方法 | 说明 |
|---|---|
| element.childNodes | 获取元素所有子节点 |
| element.nodeType | 获取元素节点类型 |
| element.nodeName | 获取元素节点名称 |
| element.parentNode | 获取元素父节点 |
| element.previousSibling | 获取元素上一个兄弟节点 |
| element.nextSibling | 获取元素下一个兄弟节点 |
| element.firstChild | 获取元素第一个子节点 |
| element.lastChild | 获取元素最后一个子节点 |
| element.hasChildNodes() | 获取元素是否存在子节点，存在返回true |
| element.ownerDocument | 获取整个文档的文档节点document |
| element.appendChild(newNode) | 向元素最后位置添加子元素，如果newNode已经是文档中一部分，那么只是该节点变成最后一个子节点 |
| element.insertBefore(newNode, null) | 向元素指定位置(参照元素前)添加子元素，第一个参数为新元素，第二个参数为参照元素，如果第二个参数为null，那么该方法相当于appendChild |
| element.replaceChild(newNode, oldNode) | 替换子节点 |
| element.removeChild(someNode) | 移除子节点，该方法返回被移除的节点 |
| element.cloneNode(true) | 克隆节点，如果方法内参数为true，则复制节点及其所有子节点，如果为false，则复制节点 |
| element.setAttribute() | 设置特性 |
| element.removeAttribute() | 移除特性 |
| element.getAttribute() | 获取特性 |
| document.createTextNode("hello world!") | 创建文本节点 |
| document.createElement("div") | 创建元素节点 |
| document.createDocumentFragment() | 创建文档片段，该片段继承了Node所有方法，通常用来执DOM操作 |