WebAPIs-DOM：获取元素

cocoCola91667
170 阅读4分钟

前面我们学习了 JavaScript 语法，现在我们学习 Web APIs，Web APIs 包括 DOM 和 BOM。

DOM 介绍

什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。所有的浏览器都遵循了这套标准。

DOM树

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

  • 文档：一个页面就是一个文档，DOM中使用 document 表示
  • 节点：网页中的所有内容，在文档树中都是节点，包括元素、属性、文本、注释等，使用 node 表示
  • 元素节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用 element 表示
  • 属性：元素的属性

DOM把以上内容都看做是对象。

获取元素

为什么要获取页面元素？

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

① 根据ID获取 getElementById('id值')

语法：document.getElementById('id值')
作用：根据id获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="time">2019-9-9</div>
  <script>
      // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
      var timer = document.getElementById('time');
      console.log(timer); // 打印:<div id="time">2019-9-9</div>
      console.log(typeof timer); // 打印:object
      // console.dir 打印我们返回的元素对象,更好的查看里面的属性和方法
      console.dir(timer); // 打印HTMLDivElement类型的对象
  </script>
</body>
</html>

打印结果：

console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法。

② 根据标签名获取 getElementsByTagName('标签名')

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
作用：根据标签名获取元素对象
参数：标签名字符串
返回值：元素对象集合（伪数组，数组元素是元素对象）

示例代码：

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li>知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1. 返回的是获取过来元素对象的集合，以伪数组的形式存储的，是HTMLCollection类型的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        var nav = document.getElementById('nav'); // 根据id获得nav元素
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意：因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。获取的是元素动态的集合，是什么意思呢？就是如果刚开始获取的集合是空的，代码往后执行，如果后面又新增了标签，那么上面获取的集合就会增加一个标签。

③ H5新增获取元素方式

document.getElementByClassName('类型'); //根据类名返回元素对象集合
document.querySelector('选择器');       //根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');    //根据指定选择器返回元素对象集合

注意：querySelector和querySelectorAll里面的选择器需要加符号，比如：document.querySelector('#nav');，document.querySelector('.box');

示例代码：

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象。切记，里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

④ 获取特殊元素（body，html）

获取body元素：

document.body   //返回body元素对象

获取html元素：

document.documentElement   //返回html元素对象

总结：

document.getElementById('id值')        // 返回唯一的元素对象
document.getElementsByTagName('标签名') // 返回元素对象集合
document.getElementByClassName('类型'); //返回元素对象集合
document.querySelector('选择器');       //返回第一个元素对象
document.querySelectorAll('选择器');    //返回元素对象集合

1. 传入的参数都是字符串
2. getElementById和querySelector获取的都是单个元素，其他都是获取元素集合
avatar
文章
阅读
粉丝