DOM、BOM 操作超级集合

本章内容：

定义
节点类型
节点关系
选择器
样式操作方法style
表格操作方法
表单操作方法
元素节点ELEMENT
属性节点attributes
文本节点TEXT
文档节点 Document
位置操作方法
定时器
弹出框
location
其它
事件操作
实例

定义

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。

节点类型

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 中声明的符号。

节点关系

DOM、BOM 操作超级集合

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 >
        <span></span>
        <span >
            <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>

View Code