DOM基本概念#

• DOM是JS操控HTML和CSS的桥梁
• DOM使JS操作HTML变得优雅

DOM简介

• DOM（Document Object Model，文档对象模型）是 JavaScript操作HTML文档的接口，使文档操作变得非常优 雅、简便
• DOM最大的特点就是将文档表示为节点树

DOM节点树

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="UTF-8">
5
        <title>Document</title>
6
    </head>
7
    <body>
8
        <h1>慕课网</h1>
9
        <div>
10
            <h2>程序员的梦工厂</h2>
11
            <img src="logo.png">
12
            <div class="box">
13
                慕课专栏
14
            </div>
15
        </div>
16
    </body>
17
</html>

NodeType#

节点的nodeType属性可以显示这个节点具体的类型

访问元素节点

• 所谓“访问”元素节点，就是指“得到”、“获取”页面上 的元素节点
• 对节点进行操作，第一步就是要得到它
• 访问元素节点主要依靠document对象

Document#

• document对象是DOM中最重要的东西，几乎所有DOM的 功能都封装在了document对象中

• document对象也表示整个HTML文档，它是DOM节点树 的根

• document对象的nodeType属性值是9

• 访问元素节点的常用方法

  方法	功能	兼容性
  document.getElementById()	通过 ID 获取元素	IE6+
  document.getElementsByTagName()	通过标签名获取元素集合	IE6+
  document.getElementsByClassName()	通过类名获取元素集合	IE9+
  document.querySelector()	通过 CSS 选择器获取第一个匹配的元素	IE8 部分兼容，IE9+ 完全兼容
  document.querySelectorAll()	通过 CSS 选择器获取所有匹配的元素集合	IE8 部分兼容，IE9+ 完全兼容

获取节点#

1
<div id="box">我是一个盒子</div>
2
<p id="para">我是一个段落</p>
3
<script>
4
var box = document.getElementById('box');
5
var para = document.getElementById('para');
6
</script>

1
<p>我是段落</p>
2
<p>我是段落</p>
3
<p>我是段落</p>
4
<p>我是段落</p>
5
<script>
6
var ps = document.getElementsByTagName('p');//数组
7
</script>

1
<div class="spec">我是盒子</div>
2
<div>我是盒子</div>
3
<div class="spec">我是盒子</div>
4
<div class="spec">我是盒子</div>
5
<script>
6
var spec_divs = document.getElementsByClassName('spec');
7
</script>

1
<div id="box1">
2
<p>我是段落</p>
3
<p class="spec">我是段落</p>
4
<p>我是段落</p>
5
</div>
6
<script>
7
var the_p = document.querySelector('#box1 .spec');
8
</script>

节点的关系#

注意：文本节点也属于节点

• DOM中，文本节点也属于节点，在使用节点的关系时一定 要注意
• 在标准的W3C规范中，空白文本节点也应该算作节点，但 是在IE8及以前的浏览器中会有一定的兼容问题，它们不把 空文本节点当做节点

排除文本节点的干扰

• 从IE9开始支持一些“只考虑元素节点”的属性

  关系	考虑所有节点	只考虑元素节点
  子节点	childNodes	children
  父节点	parentNode	parentElement
  第一个子节点	firstChild	firstElementChild
  最后一个子节点	lastChild	lastElementChild
  前一个兄弟节点	previousSibling	previousElementSibling
  后一个兄弟节点	nextSibling	nextElementSibling

封装节点关系函数#

书写常见的节点关系函数

• 书写IE6也能兼容的“寻找所有元素子节点”函数

• 书写IE6也能兼容的“寻找前一个元素兄弟节点”函数

• 如何编写函数，获得某元素的所有的兄弟节点？

  1
  <body>
  2
      <div id="box">
  3
          <p>我是段落A</p>
  4
          <p id="para">我是段落B</p>
  5
           <p>我是段落C</p>
  6
      </div>
  7
      <script>
  8
          var box = document.getElementById("box");
  9
          var para = document.getElementById("para");
  10
  
  11
          function getChildren(node) {
  12
              var children = [];//结果数组
  13
              //遍历node的所有子元素
  14
              for (var i = 0; i < node.childNodes.length; i++) {
  15
                  //判断是否是元素节点
  16
                  if (node.childNodes[i].nodeType === 1) {
  17
                      children.push(node.childNodes[i]);
  18
                  }
  19
              }
  20
              return children;
  21
          }
  22
          console.log(getChildren(box));
  23
          console.log(getChildren(para));
  24
  
  25
          function getElementPrevSibling(node) {
  26
          var o = node;
  27
             while(o.previousSibling != null){
  28
              if(o.previousSibling.nodeType === 1){
  29
                 return o.previousSibling;
  30
              }
  31
              o = o.previousSibling;
  32
             }
  33
          }
  34
          console.log(getElementPrevSibling(para));
  35
  
  36
          function getAllElementSibling(node) {
  37
              var prevs = [];
  38
              var nexts = [];
  39
              var o = node;
  40
              while (o.previousSibling != null) {
  41
                  if (o.previousSibling.nodeType === 1) {
  42
                      prevs.unshift(o.previousSibling);
  43
                  }
  44
                  o = o.previousSibling;
  45
              }
  46
               o = node;
  47
              while (o.nextElementSibling != null) {
  48
                  if (o.nextElementSibling.nodeType === 1) {
  49
                      nexts.push(o.nextElementSibling);
  50
                  }
  51
                  o = o.nextElementSibling;
  52
              }
  53
              return prevs.concat(nexts);
  54
          }
  55
          console.log(getAllElementSibling(para));
  56
      </script>
  57
  </body>

  展开收起

哪些情况需要封装？

节点操作#

如何改变元素节点的CSS样式

• 改变元素节点的CSS样式需要使用这样的语句

  1
  oBox.style.backgroundColor ='red';//CSS属性要写成“驼峰”形式
  2
  oBox.style.backgroundImage ='url(images/1.jpg)';//CSS属性值要设置成完整形式
  3
  oBox.style.fontSize ='32px';//注意写单位

如何改变元素节点的HTML属性

• 标准W3C属性，如src、href等等，只需要直接打点进行更改即可

  1
  oImg.src = 'images/2.jpg';

• 不符合W3C标准的属性，要使用setAttribute()和getAttribute() 来设置、读取

  1
  oBox.setAttribute('data-n', 10);
  2
  var n = oBox.getAttribute('data-n');
  3
  alert(n);

1
function createTable() {
2
    var table = document.createElement("table");
3
    for (var i = 0; i < 20; i++) {
4
        var row = document.createElement("tr");
5
        for (var j = 0; j < 12; j++) {
6
            var cell = document.createElement("td");
7
            cell.innerHTML = i + "-" + j;
8
            row.appendChild(cell);
9
        }
10
        table.appendChild(row);
11
    }
12
    document.body.appendChild(table);
13
}
14
createTable();

1
//制作九九乘法表
2
function createTable1() {
3
    var table = document.createElement("table");
4
    for (var i = 1; i <= 9; i++) {
5
        var row = document.createElement("tr");
6
        for (var j = 1; j <= i; j++) {
7
            var cell = document.createElement("td");
8
            cell.innerHTML = i + "x" + j + "=" + i * j;
9
            row.appendChild(cell);
10
        }
11
        table.appendChild(row);
12
    }
13
    document.body.appendChild(table);
14
}
15
createTable1();

拓展-延迟执行#

• 在测试DOM代码时，通常JS代码一定要写到HTML节点的 后面，否则JS无法找到相应HTML节点
• 可以使用window.onload = function(){} 事件，使页面加 载完毕后，再执行指定的代码