《JavaScript DOM编程艺术》笔记

# 《JavaScript DOM 编程艺术》笔记

# 第 1 章 DOM

# 查找页面元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <button>按钮b</button>
    <button id="btn" class="btn">按钮</button>
    <script>
      var btn = document.getElementById('btn'),
        btns = document.getElementsByClassName('btn'),
        btnTags = document.getElementsByTagName('button')
      console.log(btn)
      console.log(btns)
      console.log(btnTags)
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 模拟 getElementsByClassName

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      /**
       * 根据类名查找元素
       * @param node DOM树搜索的起点
       * @param classname 类名
       * @returns {any[]|*}
       */
      function getElementsByClassName(node, classname) {
        if (node.getElementsByClassName) {
          //    使用现有的方法
          return node.getElementsByClassName(classname)
        } else {
          var results = new Array()
          var elems = node.getElementsByTagName('*')
          for (var i = 0; i < elems.length; i++) {
            if (elems[i].className.indexOf(classname) != -1) {
              results[results.length] = elems[i]
            }
          }
          return results
        }
      }
    </script>
  </body>
</html>

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

# 属性的获取和设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script>
      let byId = document.getElementById('btn')
      if (!byId.getAttribute('title')) {
        byId.setAttribute('title', '按钮')
      }
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 获取元素所有的子节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      function onBodyChildCount() {
        let elementsByTagNameElement = document.getElementsByTagName('body')[0]
        alert(elementsByTagNameElement.childNodes.length) // 获取元素所有子节点
      }
      window.onload = onBodyChildCount
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

编辑

#笔记 #编程艺术

上次更新: 2021/08/03 20:55:47

← 《JavaScript高级程序设计》笔记《ES6 教程》笔记→