本章内容:定义节点类型节点关系 选择器样式操作方法style表格操作方法表单操作方法元素节点ELEMENT属性节点attributes文本节点TEXT文档节点 Document位置操作方法定时器弹出框location其它事件操作实例 定义文档对象模型(Document O ...
本章内容:
- 定义
- 节点类型
- 节点关系
- 选择器
- 样式操作方法style
- 表格操作方法
- 表单操作方法
- 元素节点ELEMENT
- 属性节点attributes
- 文本节点TEXT
- 文档节点 Document
- 位置操作方法
- 定时器
- 弹出框
- location
- 其它
- 事件操作
- 实例
定义
文档对象模型(Document Object Model,DOM)是一种用于HTML和
节点类型
12中节点类型都有NodeType属性来表明节点类型
节点类型 | 描述 |
---|
1 | Element | 代表元素 |
2 | Attr | 代表属性 |
3 | Text | 代表元素或属性中的文本内容。 |
4 | CDATASection | 代表文档中的 CDATA 部分(不会由解析器解析的文本)。 |
5 | EntityReference | 代表实体引用。 |
6 | Entity | 代表实体。 |
7 | ProcessingInstruction | 代表处理指令。 |
8 | Comment | 代表注释。 |
9 | Document | 代表整个文档(DOM 树的根节点)。 |
10 | DocumentType | 向为文档定义的实体提供接口 |
11 | DocumentFragment | 代表轻量级的 Document 对象,能够容纳文档的某个部分 |
12 | Notation | 代表 DTD 中声明的符号。 |
节点关系
nodeType | 返回节点类型的数字值(1~12) |
nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
nodeValue | 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
parentNode | 父节点 |
parentElement | 父节点标签元素 |
childNodes | 所有子节点 |
children | 第一层子节点 |
firstChild | 第一个子节点,Node 对象形式 |
firstElementChild | 第一个子标签元素 |
lastChild | 最后一个子节点 |
lastElementChild | 最后一个子标签元素 |
previousSibling | 上一个兄弟节点 |
previousElementSibling | 上一个兄弟标签元素 |
nextSibling | 下一个兄弟节点 |
nextElementSibling | 下一个兄弟标签元素 |
childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
ownerDocument | 指向整个文档的文档节点 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="t"> <span></span> <span id="s"> <a></a> <h1>Nick</h1> </span> <p></p> </div> <script> var tT = document.getElementById("t"); console.log(tT.nodeType,tT.nodeName,tT.nodeValue); //1 "DIV" null console.log(tT.parentNode); //<body>...</body> console.log(tT.childNodes); //[text, span, text, span#s, text, p, text] console.log(tT.children); //[span, span#s, p, s: span#s] var sT = document.getElementById("s"); console.log(sT.previousSibling); //#text, Node 对象形式 console.log(sT.previousElementSibling); //<span></span> console.log(sT.nextSibling); //#text console.log(sT.nextElementSibling); //<p></p> console.log(sT.firstChild); //#text console.log(sT.firstElementChild); //<a></a> console.log(sT.lastChild); //#text console.log(sT.lastElementChild); //<h1>Nick</h1> console.log(tT.childElementCount); //3 console.log(tT.ownerDocument); //#document </script></body></html>
原标题:干货满满,绝不错过,DOM、BOM 操作超级集合
关键词:dom
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。