DOM之获取页面元素方法总结

最新推荐文章于 2023-05-12 21:25:35 发布

ItDaChuang

最新推荐文章于 2023-05-12 21:25:35 发布

阅读量859

点赞数

分类专栏：前端 # JavaScript 文章标签： html html5 javascript

本文链接：https://blog.csdn.net/ItDaChuang/article/details/120507310

版权

前端同时被 2 个专栏收录

43 篇文章 7 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

DOM之获取页面元素

HTML文档中的标签我们用 JS 怎么去操作呢？这就设计到 DOM 文档对象模型。要操作页面元素，首先就得获取页面中的元素。首先先简单了解下 DOM，再详细了解 JS 中获取获取页面元素的方法。

一、DOM 简介

1.1 什么是 DOM

文档对象模型( Document Object Model ，简称DOM) ，是 W3C组织推荐的处理可扩展标记语言( HTML 或者 XML )的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2 DOM 树

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素， DOM 中使用 element 表示
节点：网页中的所有内容都是节点 (标签、属性、文本、注释等)，DOM 中使用 node 表示

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

二、获取元素

DOM 在我们实际开发中主要用来操作元素。操作元素前要先获取页面中的元素，可以使用以下几种方式:

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

2.1 根据 ID 获取 getElementById()

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

document.getElementById：

Document 的方法 getElementById() 返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

语法：

var element = document.getElementById(id);

参数：

element 是一个 Element 对象。如果当前文档中拥有特定 ID的元素不存在则返回 null。
id 是大小写敏感的字符串，代表了所要查找的元素的唯一 ID。

返回值：

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

示例：

<body>
    <div id="time">2021-9-1</div>
    <script>	// 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        let timer = document.getElementById('time');
        console.log(timer);     // <div id="time">2021-9-1
        console.log(typeof timer);	// object
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);     // div#time
    </script>
</body>

注意：利用console.dir(timer) 可以更加详细的返回对象信息。

2.2 根据标签名获取 getElementByTagName()

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

<body>
    <ul>
        <li>你好呀1</li>
        <li>你好呀2</li>
    </ul>
    <ol>
        <li>881</li>
        <li>882</li>
    </ol>
    <script>
        let lis = document.getElementsByTagName('li');
        let div = document.getElementsByTagName('div');
        console.log(lis);   // HTMLCollection(4) [li, li, li, li]
        console.log(div);   // HTMLCollection []
        console.log(lis[0]);    // li
    </script>
</body>

伪数组就是有长度有索引号，没有pop、push等方法。可以通过下标去遍历每个对象，如果只有一个 <li> 标签，这种方式获取的还是一个伪数组，长度为1，没有相应的元素则返回空的伪数组。并且获取的是整个文档中所有的 <li> 标签。

如果就想要获取上述代码中的 <ol> 标签中的 <li>该怎么办呢？可以通过下面方法：

element.getElementsByTagName(‘标签名’);

<body>
    <ul>
        <li>你好呀1</li>
        <li>你好呀2</li>
    </ul>
    <ol>
        <li>881</li>
        <li>882</li>
    </ol>
    <script>
        // element.getElementsByTagName('标签名')方式获取父标签内部的所有li
        var ol = document.getElementsByTagName('ol');
        var lis = ol[0].getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
    </script>
</body>

2.3 H5新增获取元素方式

document.getElementByClassName() 方法可以根据类名返回对象集合。
document.querySelector(‘选择器’); 可以根据指定选择器返回第一个元素对象。
document.querySelectorAll(‘选择器’); 根据指定选择器返回所有的对象，伪数组形式。

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