一、简介

1.1 概念

文档对象模型（Document Object Model）,是 W3C 组织推荐的处理可拓展标记语言的标准编程接口。

1.2 DOM 树

二、获取元素

获取页面中的元素主要可以使用以几种方式：

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

相关文档查询网站：MDN Web Docs (mozilla.org)

2.1 根据 ID 获取

使用 getElementById() 方法可以获取到带有ID的元素对象

<html lang="zh">
  <head>
    <title>getElementById 示例</title>
  </head>
  <body>
    <p id="para">这里有一些文本</p>

    <script>
        // 文档从上到下加载，所以script写在标签下面
       const elem = document.getElementById('para')
       console.log(elem)
       console.dir(elem)
    </script>
  </body>
</html>

2.2 根据标签名获取

使用 getElementsByTagName() 方法可以获取带有指定标签名的对象的集合

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
      function getAllParaElems() {
        var allParas = document.getElementsByTagName("p");
        var num = allParas.length;
        alert("There are " + num + " paragraph in this document");
      }

      function div1ParaElems() {
        var div1 = document.getElementById("div1");
        var div1Paras = div1.getElementsByTagName("p");
        var num = div1Paras.length;
        alert("There are " + num + " paragraph in #div1");
      }

      function div2ParaElems() {
        var div2 = document.getElementById("div2");
        var div2Paras = div2.getElementsByTagName("p");
        var num = div2Paras.length;
        alert("There are " + num + " paragraph in #div2");
      }
    </script>
  </head>
  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">show all p elements in document</button
    ><br />

    <button onclick="div1ParaElems();">
      show all p elements in div1 element</button
    ><br />

    <button onclick="div2ParaElems();">
      show all p elements in div2 element
    </button>
  </body>
</html>

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就得需要遍历
得到的元素是动态的
如果页面中没有这个元素，返回的还是一个空的伪数组

2.3 通过 HTML5 新增的方法获取

2.3.1 getElementsByClassName

document.getElementsByClassName('类名') // 根据类名返回元素对象集合

<html>
  <body>
    <div id="parent-id">
      <p>hello world 1</p>
      <p class="test">hello world 2</p>
      <p>hello world 3</p>
      <p>hello world 4</p>
    </div>

    <script>
      var parentDOM = document.getElementById("parent-id");

      var test = parentDOM.getElementsByClassName("test"); // 匹配类名的元素集合，不是元素本身
      console.log(test); //HTMLCollection[1]

      var testTarget = parentDOM.getElementsByClassName("test")[0]; // 我们想要取到的第一个元素
      console.log(testTarget); //<p class="test">hello world 2</p>
    </script>
  </body>
</html>

2.3.2 querySelector

document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

<html>
  <body>
    <div class="box">box1</div>
    <div class="box">box2</div>

    <div id="nav">nav</div>
    
    <script>
      var box = document.querySelector(".box");
      console.log(box)

      var nav = document.querySelector("#nav");
      console.log(nav)
    </script>
    
  </body>
</html>

2.3.3 querySelectorAll

querySelectorAll 根据选择器返回所有指定对象

<html>
  <body>
    <div class="box">box1</div>
    <div class="box">box2</div>

    <div id="nav">nav</div>
    
    <script>
      var allBox = document.querySelectorAll(".box");
      console.log(allBox)
    </script>
    
  </body>
</html>

2.4 获取特殊元素（body,html）

<html>
  <body>
    <div class="box">box1</div>
    <div class="box">box2</div>
    
    <script>
        // 1. 获取 body 元素
      var body = document.body
      console.log(body)
      console.dir(body)

      // 2. 获取 html 元素
      var html = document.documentElement
      console.log(html)
      console.dir(html)
    </script>
    
  </body>
</html>

三、获取属性

3.1 获取自定义属性

element.属性获取属性值
element.getAttribute('属性')

区别:

element.属性获取内置属性值(元素本身自带的属性)

element.getattribute('属性'); 主要获得自定义的属性(标准) 我们程序员自定义的属性

<html>
  <body>
    <div id="demo" index="1"></div>

    <script>
     // 获取元素属性
     var div = document.querySelector("div");
    // (1) element 元素
    console.log(div.id)

    // (2) 获取自定义属性
    console.log(div.getAttribute("id"))
    console.log(div.getAttribute("index"))

    </script>
    
  </body>
</html>

3.2 移除自定义属性

设置属性值

element.属性='值’设置内置属性值,
element.setAttribute(属性'值);

区别:

element.属性设置内置属性值

element.setAttribute('属性') 主要设置自定义的属性(标准)

<html>
  <body>
    <div id="demo" index="1">demo</div>
    <script>
     // 获取元素属性
     var div = document.querySelector("div");

    // (1) element.属性 = "值"
    div.id = "tst"

    // (2) element.setAttribute('属性'，'值')
    div.setAttribute("index","2")
    </script>
  </body>
</html>

使用 removeAttribute 可移除属性值

<html>
  <body>
    <div id="demo" index="1">demo</div>

    <script>
     // 获取元素属性
     var div = document.querySelector("div");

     // 移除属性值
      div.removeAttribute("index")
    </script>
    
  </body>
</html>

3.3 获取H5自定义属性

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute('属性')获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性H5给我们新增了自定义属性。

H5规定自定义属性data-开头做为属性名并且赋值

比如 <div data-index= 'x'></div>

获取H5自定义属性有如下几种方式：

1.兼容性获取 element.getAttribute( 'data-index');

2.H5新增 element.dataset.index 或者 element.dataset['index'] ie 11才开始支持

<html>
  <body>
    <div data-index = 1 data-list-name>demo</div>

    <script>
     // 获取元素属性
     var div = document.querySelector("div");

     // 兼容性获取
      console.log(div.getAttribute('data-index'))

      // H5 新增方法获取 - 只能获取以 data 开头
      console.log(div.dataset.index)
      console.log(div.dataset['index'])

      // dataset 是一个集合，存放了所有以data开头的自定义属性 
      console.log(div.dataset)

      // 有多个单词时采用驼峰命名法
      console.log(div.dataset.listName)
    </script>
    
  </body>
</html>

DOM 基本操作 - 获取元素