document对象

  • Document节点表示的整个载入的网页，它的实例是全局的document对象：
    • 对DOM的所有操作都是从 document 对象开始的；
    • 它是DOM的 入口点，可以从document开始去访问任何节点元素；
  • 对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：
    • html元素： = document.documentElement
    • body元素： = document.body
    • head元素： = document.head
    • 文档声明： = document.doctype
  • image.png

节点之间的导航

  • **如果我们获取到一个节点后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航。 **
  • 节点之间存在如下的关系：
    • 父节点：parentNode
    • 前兄弟节点：previousSibling
    • 后兄弟节点：nextSibling
    • 子节点：childNodes
    • 第一个子节点：firstChild
    • 第二个子节点：lastChild
  • image.png
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <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)

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

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

      // 获取li元素
      var liEls = ulEl.children
      console.log(liEls)

    </script>

  </body>
</html>

image.pngimage.png
image.png

表格元素的导航

  • **元素支持 (除了上面给出的，之外) 以下这些属性： **
    • table.rows —
    元素的集合；
  • table.caption/tHead/tFoot — 引用元素
    • ，；
  • table.tBodies —
    • 元素的集合；
    • ,, 元素提供了 rows 属性：
    • tbody.rows — 表格内部
    元素的集合；
    • ：
    • tr.cells — 在给定
    中的在封闭的 // 中的位置（索引）；
  • tr.rowIndex — 在整个表格中
    • 的编号（包括表格的所有行）
    • 中单元格的编号。
    ，
    和 单元格的集合；
  • tr.sectionRowIndex — 给定的
    • 和:
    • td.cellIndex — 在封闭的 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="en">

      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>

      <body>

        <!-- 高级元素: table/form -->
        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>身高</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>why</td>
              <td>18</td>
              <td>1.88</td>
            </tr>
            <tr>
              <td>kobe</td>
              <td>30</td>
              <td>1.98</td>
            </tr>
          </tbody>
        </table>

        <script>

          var tableEl = document.body.firstElementChild

          // 通过table元素获取内部的后代元素
          console.log(tableEl.tHead, tableEl.tBodies, tableEl.tFoot)
          console.log(tableEl.rows)

          // 拿到一行元素 
          var rowEl = tableEl.rows[2]
          console.log(rowEl.cells[0])
          console.log(rowEl.sectionRowIndex)
          console.log(rowEl.rowIndex)

        </script>

      </body>

    </html>

    image.png

    获取元素的方法

    • 当元素彼此靠近或者相邻时，DOM 导航属性非常有用。
      • 但是，在实际开发中，我们希望可以任意的获取到某一个元素应该如何操作呢？
    • DOM为我们提供了获取元素的方法：
    • 开发中如何选择呢？image.png
    • 目前最常用的是querySelector和querySelectAll；
    • getElementById偶尔也会使用或者在适配一些低版本浏览器时；
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
      </style>
    </head>
    <body>
      <div class="box">
        <h2>我是标题</h2>
        <div class="container">
          <p>
            我是段落, <span class="keyword">coderwhy</span> 哈哈哈哈
          </p>
          <p>
            我也是段落, <span class="keyword">kobe</span> 呵呵呵呵额
          </p>

          <div class="article">
            <h3 id="title">我是小标题</h3>
            <p>
              我是文章的内容, 嘿嘿嘿嘿嘿
            </p>
          </div>
        </div>
      </div>
      
      <script>
        var keywordEl = document.querySelector(".keyword")
        // keywordEls是对象, 可迭代的
        // 可迭代对象: String/数组/节点的列表
        var keywordEls = document.querySelectorAll(".keyword")
        for (var el of keywordEls) {
          el.style.color = "red"
        }
        console.log(keywordEls)

        var titleEl = document.querySelector("#title")
        titleEl.style.color = "orange"

      </script>

    </body>
    </html>

    image.png

    节点的属性 - nodeType

    • nodeType属性：
      • nodeType 属性提供了一种获取节点类型的方法；
      • 它有一个数值型值；
    • 常见的节点类型有如下：
    • image.png
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE html>
    <html lang="en">

      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>

      <body>
        <!-- 我是注释 -->
        我是文本
        <div class="box">
          <h2>我是标题</h2>
          <p>我是内容, 哈哈哈哈</p>
        </div>

        <script>
          // 1.获取三个节点
          var bodyChildNodes = document.body.childNodes
          var commentNode = bodyChildNodes[1]
          var textNode = bodyChildNodes[2]
          var divNode = bodyChildNodes[3]

          // 2.节点属性
          // 2.1.nodeType 节点的类型
          for (var node of bodyChildNodes) {
            if (node.nodeType === 8) {
            } else if (node.nodeType === 3) {
            } else if (node.nodeType === 1) {
            }
          }
          console.log(commentNode, commentNode.nodeType, "-------", textNode, textNode.nodeType, "-------", divNode.nodeType) // 8 3 1
          console.log(Node.COMMENT_NODE)

        </script>

      </body>

    </html>

    image.png

    节点的属性 – nodeName、tagName

    • nodeName：获取node节点的名字；
    • tagName：获取元素的标签名词；image.png
    • tagName 和 nodeName 之间有什么不同呢？
      • tagName 属性仅适用于 Element 节点；
      • nodeName 是为任意 Node 定义的：
        • 对于元素，它的意义与 tagName 相同，所以使用哪一个都是可以的；
        • 对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>

    <body>
      <!-- 我是注释 -->
      我是文本
      <div class="box">
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>

      <script>
        // 1.获取三个节点
        var bodyChildNodes = document.body.childNodes
        var commentNode = bodyChildNodes[1]
        var textNode = bodyChildNodes[2]
        var divNode = bodyChildNodes[3]    

        // 2.2.nodeName 节点的名称
        // tagName: 针对元素(element)
        console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName)
        console.log(commentNode.tagName, divNode.tagName)   

      </script>

    </body>

    </html>

    image.png

    节点的属性 - innerHTML、textContent

    • innerHTML 属性
      • 将元素中的 HTML 获取为字符串形式；
      • 设置元素中的内容；
    • outerHTML 属性
      • 包含了元素的完整 HTML
      • innerHTML 加上元素本身一样；
    • textContent 属性
      • 仅仅获取元素中的文本内容；
    • innerHTML和textContent的区别：
      • 使用 innerHTML，我们将其“作为 HTML”插入，带有所有 HTML 标签。
      • 使用 textContent，我们将其“作为文本”插入，所有符号均按字面意义处理。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>

    <body>
      <!-- 我是注释 -->
      我是文本
      <div class="box">
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>

      <script>
        // 1.获取三个节点
        var bodyChildNodes = document.body.childNodes
        var commentNode = bodyChildNodes[1]
        var textNode = bodyChildNodes[2]
        var divNode = bodyChildNodes[3]

        // 2.3. data(nodeValue)/innerHTML/textContent
        // data针对非元素的节点获取数据
        // innerHTML: 对应的html元素也会获取
        // textContent: 只会获取文本内容
        console.log(commentNode.data, textNode.data, divNode.data)
        console.log(divNode.innerHTML)
        console.log(divNode.textContent)

        // 设置文本, 作用是一样
        // 设置文本中包含元素内容, 那么innerHTML浏览器会解析, textContent会当成文本的一部分
        divNode.innerHTML = "<h2>呵呵呵呵</h2>"
        // divNode.textContent = "<h2>嘿嘿嘿嘿</h2>"

        
        // 2.4.outerHTML
        console.log(divNode.outerHTML)
      </script>

    </body>

    </html>

    image.pngimage.png

    节点的属性 - nodeValue

    • nodeValue/dat
      • 用于获取非元素节点的文本内容
      • image.png

    节点的其他属性

    • hidden属性：也是一个全局属性，可以用于设置元素隐藏。image.png
    • DOM 元素还有其他属性：
      • value
        • ，