DOM中如何获取元素

这篇文章将为大家详细讲解有关DOM中如何获取元素，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

概述

DOM (Document objectModal) ：文档对象模型。

DOM：是浏览器提供的(浏览器特有)，专门用来操作网页内容的一些JS对象。

目的：让我们可以使用 Js/TS 代码来操作页面(HTML) 内容，让页面“动”起来，从而实现 Web 开发。

HTML：超文本标记语言，用来创建网页结构。

两者的关系：浏览器根据 HTML 内容创建相应的 DOM 对象，也就是:每个 HTML 标签都有对应的 DOM 对象

获取元素

常用方法有两个：

querySelector (selector)作用：获取某一个DOM元素。

queryseletor (selectocu)作用：同时获取多个D0M元素。

获取一个DOM元素:

document. querySelector (selector)document 对象:文档对象(整个页面)，是操作页面内容的入口对象。selector 参数:是一个 css 选择器(标签、类、id 选择器等)。作用:查询(获取)与选择器参数匹配的 DOM 元素，但是，只能获取到第一个推荐使用id选择器，例如

获取html中id为title的标签内容并在控制台输出：let title = document.querySelector('#title')console.log(title)

结果如下

调用 querySelector ()通过id选择器获取 DOM 元素时，拿到的元素类型都是 Element.因为无法根据id来确定元素的类型，所以，该方法就返回了一个宽泛的类型:元素(Element) 类型。不管是 h2 还是 img 都是元素。导致新问题:无法访问 img 元素的 class="lazy" data-src 属性了。因为: Element 类型只包含所有元素共有的属性和方法(比如: id 属性)。

解决方式:使用类型断言，来手动指定更加具体的类型(比如，此处应该比 Element 类型更加具体)。比如:解释:我们确定 id=" image"的元素是图片元素，所以，我们将类型指定为 HTML ImageElement。

let img1 = document.querySelector('#img1') as HTMLImageElementimg1.class="lazy" data-src = './img/4.jpg'

技巧:通过 console.dir()打印 DOM 元素,在属性的最后面，即可看到该元素的类型。

let img1 = document.querySelector('#img1') as HTMLImageElementimg1.class="lazy" data-src = './img/4.jpg'console.dir(img1)

获取多个 DOM元素:

document . querySelectorAll (selector)作用:获取所有与选择器参数匹配的 DOM 元素，返回值是一个列表。推荐:使用 class 选择器。示例:let、list = document . querySelectorAll(’.a’)解释:获取页面中所有 class 属性包含 a 的元素。

<p id='title'>欢迎来到海南大学</p>    <p class = ' a'>2020年时多灾多难的一年</p>    <p class="b a">2021年将牛气冲天</p>    <img id = 'img1'class="lazy" data-src="./img/1.jpg" alt="">    <script class="lazy" data-src = './index.js'></script>

let list = document.querySelectorAll('.a')console.log(list)

操作文本内容

读取:dom. innerText设置:dom. innerText = ’ 等你下课’注意:需要通过类型断言来指定 DOM 元素的具体类型，才可以使用innerText 属性。例如

let title = document.querySelector('#title') as HTMLParagraphElementconsole.log(title.innerHTML)

追加内容如下操作

let title = document.querySelector('#title') as HTMLParagraphElementtitle.innerHTML = title.innerHTML + '  阳光沙滩美女'console.log(title.innerHTML)

let list = document.querySelectorAll('.a') list.forEach(function (item,index) {    let p = item as HTMLParagraphElement    p.innerHTML = '['+index+']'+p.innerHTML})

关于“DOM中如何获取元素”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。