DOM 基本操作 - 获取元素_dom获取元素的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45924250/article/details/140282419

一、简介

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 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.3.3 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.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>