8. DOM

DOM（文档对象模型）：将页面所有的内容表示为可以修改的对象。

BOM（浏览器对象模型）：由浏览器提供的用于处理文档（document）之外的所有内容的其它对象。例如：navigator、location、history等对象。

8.1 深入理解DOM

浏览器将我们编写在HTML中的每一个元素（Element）都抽象成一个个对象，所有这些对象都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面。我们将这个过程称为文档对象模型（Document Object Model）。

8.2 document对象

Document节点表示整个网页的载入，它的实例是document对象。

对于最顶层的html、head、body元素，我们可以直接在document对象中获取到。

// 获取html元素
var htmlEl = document.documentElement
// 获取body元素
var bodyEl = document.body
// 获取head元素
var headEl = document.head
// 获取文档声明
var doctype = document.doctype

8.3 导航（navigator）

8.3.1 节点（Node）之间的导航

获取节点	表示
父节点	parentNode
子节点	childNodes
前兄弟节点	previousSibling
后兄弟节点	nextSibling
第一个子节点	firstChild
最后一个子节点	lastChild

<body>

    <!-- 我是注释 -->
    我是文本
    <div class="box">哈哈哈哈哈</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 获取节点的导航
        var bodyEl = document.body
        // 获取body所有的子节点
        console.log(bodyEl.childNodes)	// NodeList(8) [text, comment, text, div.box, text, ul, text, script]
        // 获取body的第一个子节点
        var bodyElFirstChild = bodyEl.firstChild
        console.log(bodyElFirstChild)	// #text
        // 获取body的最后一个子节点
        var bodyElLastChild = bodyEl.lastChild
        console.log(bodyElLastChild)	// script
        // 获取body中的第一个注释
        var bodyElCommentChild = bodyElFirstChild.nextSibling
        console.log(bodyElCommentChild)	// #comment
        // 获取body的父节点
        var bodyParent = bodyEl.parentNode
        console.log(bodyParent)		// html
    </script>
</body>

8.3.2 元素（Element）之间的导航

获取元素	表示
父元素	parentElement
子元素	children
前兄弟元素	previousElementSibling
后兄弟元素	nextElementSibling
第一个子元素	firstElementChild
最后一个子元素	lastElementChild

<body>

    <!-- 我是注释 -->
    我是文本
    <div class="box">哈哈哈哈哈</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var bodyEl = document.body
        // 根据body元素节点获取子元素（element）
        var childElements = bodyEl.children
        console.log(childElements)  // HTMLCollection(3) [div.box, ul, script]

        // 获取box元素
        var boxEl1 = bodyEl.firstElementChild
        var boxEl2 = bodyEl.children[0]
        console.log(boxEl1)     // div.box
        console.log(boxEl2)     // div.box
        console.log(boxEl1 === boxEl2)  // true

        // 获取ul元素
        var ulEl = boxEl1.nextElementSibling
        console.log(ulEl)       // ul

        // 获取li元素
        var liEls = ulEl.children
        console.log(liEls)      // HTMLCollection(5) [li, li, li, li, li]
    </script>
</body>

8.3.3 表格（table）元素之间的导航

8.3.4 表单（form）元素之间的导航

8.4 DOM获取任意的元素对象

方法名	作用	搜索方式
`querySelector`	返回文档中与指定选择器或选择器组合匹配的第一个`Element`匹配项，未找到返回null【深度优先顺序遍历】	CSS-selector
`querySelectorAll`	返回与指定的选择器组匹配的文档中的元素列表。返回的对象是 `NodeList`	CSS-selector
`getElementById`	返回一个匹配特定 ID 的元素	id
`getElementsByClassName`	返回一个包含了所有指定类名的子元素的类数组对象	class
`getElementsByName`	根据给定的`name` 返回一个在 (X)HTML document 的节点列表集合。	name
`getElementsByTagName`	返回一个包括所有给定标签名称的元素的 HTML 集合`HTMLCollection`。	tag 或 '*'

8.5 节点Node常见的属性

**nodeType**属性
- 语法：node.nodeType
- 描述：返回一个与该节点类型对应的无符号短整型的值，可能的值如下：

常量	值	描述
`Node.ELEMENT_NODE`	1	一个元素节点，例如`<p>`和`<div>`
`Node.ATTRIBUTE_NODE`	2	元素的耦合属性
`Node.TEXT_NODE`	3	`Element` 或者 `Attr` 中实际的文字
`Node.CDATA_SECTION_NODE`	4	一个 `CDATASection`
`Node.COMMENT_NODE`	8	一个`Comment`节点
`Node.DOCUMENT_NODE`	9	一个`Document`节点
`Node.DOCUMENT_TYPE_NODE`	10	描述文档类型的`DocumentType`节点。例如`<!DOCTYPE html>`就是用于HTML5的
`Node.DOCUMENT_FRAGMENT_NODE`	11	一个`DocumentFragment`节点

**nodeName**属性
- 语法：node.nodeName
- 描述：返回一个包含该节点名字的**DOMString**

**tagName**属性

语法：element.TagName

描述：返回当前元素的标签名

tagName和nodeName之间的不同：

tagName属性仅适用于Element节点；

nodeName是为任意Node定义的：

对于元素，它的意义与tagName相同，所以使用哪一个都是可以的；

对于其它节点类型（text、comment...）,它拥有一个对应节点类型的字符串；

**data**属性
- 描述：针对非元素的节点获取数据
**nodeValue**属性
- 语法：node.nodeValue
- 描述：返回或设置当前节点的值。
**outerHTML**属性
- 语法：element.outerHTML
- 描述：获取描述元素（包括其后代）的序列化 HTML 片段。
**innerHTML**属性
- 语法：element.innerHTML
- 描述：设置或获取 HTML 语法表示的元素的后代。
**textContent**属性
- 语法：node.textContent
- 描述：表示一个节点及其后代的文本内容。

innerHTML 和 textContent 的区别：

如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 (&), (<), 或 (>), innerHTML 将这些字符分别返回为 &, < 和 >。使用Node.textContent 可获取一个这些文本节点内容的正确副本。
divNode.innerHTML = "<h2>哈哈哈</h2>"	// 显示的是：哈哈哈
divNode.textContent = "<h2>哈哈哈</h2>"	// 显示的是：<h2>哈哈哈</h2>

## 8.6 hidden属性（全局属性）

描述：被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。

改变具有 hidden 属性的元素的 CSS 的 display 属性将覆盖该行为。例如，元素被设置为 display: flex 将会导致元素显示出来，尽管设置了 hidden 属性

<body>
    <button class="btn">切换</button>

    <div id="box">哈哈哈</div>

    <script>
        // 通过hidden属性来设置切换隐藏
        // 1.获取元素
        var btnEl = document.querySelector(".btn")
        var boxEl = document.querySelector("#box")

        // 2.监听btn的点击
        btnEl.onclick = function() {
            boxEl.hidden = !boxEl.hidden
        }
    </script>
</body>

DOM | 青训营笔记