JavaScript - DOM如何获取页面元素

Charonmomo
1,942 阅读3分钟

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

DOM 的概念

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

DOM 树 DOM 又称为文档树模型

  • 文档：一个网页可以称为文档
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
  • 元素：网页中的标签
  • 属性：标签的属性

image.png

获取页面元素

根据 id 获取元素

document.getElementById()

  • 方法：调用 document 对象的 getElementById 方法。
  • 参数：字符串类型的 id 的属性值。
  • 返回值：对应 id 名的元素对象。

注意:

  1. 由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准方式，不推荐使用。

  2. 代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应id的元素。

var para = document.getElementById("para");

根据标签名获取元素

• 方法：调用 document 对象的 getElementsByTagName 方法。

• 参数：字符串类型的标签名。

• 返回值：同名的元素对象组成的数组。

注意:

  1. 操作数据时需要按照操作数组的方法进行。

  2. getElementsByTagName 方法内部获取的元素是动态增加的。也就是说不一定非要像id一样只能在html页面渲染之后才能使用, 比如Tag可以写在<body>之前, 会先显示空数组, 然后页面渲染的时候再push进去.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 提前获取元素
    var divs = document.getElementsByTagName("div");
    console.log(divs);
  </script>
</head>

<body>
  <p>text1</p>
  <p>text2</p>
  <p>text3</p>
  <p>text4</p>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <div>
    <p>text5</p>
  </div>
  <script>
    console.log(divs);
    // 通过标签名获取元素
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    // HTMLCollection  html 元素组成的集合 伪数组
    // 操作室需要按照操作数组的方法进行
    // 遍历数组
    for (var i = 0; i <= ps.length - 1; i++) {
      // 输出每一项
      console.log(ps[i]);
    }
    ps[0].style.background = "pink";
  </script>
</body>

</html>

image.png

元素对象内部获取标签元素

• 获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如 div 元素对象也可以

调用 getElementsByTagName 方法。

• 目的：缩小选择元素的范围，类似 css 中的后代选择器。

<body>
  <div id="box1">
    <p>text1 of box1</p>
    <p>text2 of box1</p>
    <p>text3 of box1</p>
    <p>text4 of box1</p>
  </div>
  <div id="box2">
    <p>text1 of box2</p>
    <p>text2 of box2</p>
    <p>text3 of box2</p>
    <p>text4 of box2</p>
  </div>
  <script>
    // 元素对象内部可以继续打点调用通过标签名获取元素的方法
    // 类似于 css 中 后代选择器，缩小选择范围
    var box1 = document.getElementById("box1");
    // 我们习惯将连续调用方式拆开书写
    var ps1 = box1.getElementsByTagName("p");
    console.log(ps1);
  </script>
</body>

image.png

根据 name 获取元素 (不推荐使用)

• 方法：调用 document 对象的 getElementsByName 方法。(与getElementsByTagName的区别是只能由document调用, 不能由别的调用)

• 参数：字符串类型的 name 属性值。

• 返回值：name 属性值相同的元素对象组成的数组。

• 选中的元素是动态变化的。

• 不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素。

<body>
  <form>
    <input type="radio" name="age">0~10<br>
    <input type="radio" name="age">11~20<br>
    <input type="radio" name="age">20~30<br>
  </form>
  <div id="age">年龄</div>
  <script>
    // 通过标签的 name 属性获取元素
    var ages = document.getElementsByName("age");
    // NodeList  节点列表集合  类数组
    console.log(ages);
    // 兼容问题：在 IE 和 Opera中 有兼容问题，会多选中 id 属性值相同的部分
  </script>
</body>

根据类名获取元素

• 方法：调用 document 对象的 getElementsByClassName 方法。

• 参数：字符串类型的 class 属性值。

• 返回值：class 属性值相同的元素对象组成的数组, 会动态添加。

• 浏览器兼容问题：不支持 IE8 及以下的浏览器

<body>
  <div id="box1">
    <p>text1 of box1</p>
    <p class="para">text2 of box1</p>
    <p class="para">text3 of box1</p>
    <p>text4 of box1</p>
  </div>
  <div id="box2">
    <p>text1 of box2</p>
    <p class="para">text2 of box2</p>
    <p class="para">text3 of box2</p>
    <p>text4 of box2</p>
  </div>
  <script>
    // 通过 class 属性值获取元素
    // var paras = document.getElementsByClassName("para");
    // 获取 id 为 box1 的元素对象
    var box1 = document.getElementById("box1");
    // 元素对象内部也可以调用 getElementsByClassName 方法
    var paras1 = box1.getElementsByClassName("para");
    console.log(paras1);
    // 兼容问题：不支持 IE 8 及以下浏览器
  </script>
</body>

image.png

根据选择器获取元素

• 方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。

• 方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素。

类选择器前面加 .

id选择器前面加 #

• 参数：字符串类型的 css 中的选择器。

• 浏览器兼容问题：不支持 IE8 以下的浏览器

注意:

两种方法都与id选择类似, 只有在渲染完成后才能选中

总结

掌握，没有兼容问题:

getElementById()

getElementsByTagName()

了解:

getElementsByName()

getElementsByClassName()

querySelector()

querySelectorAll()

avatar
文章
阅读
粉丝