首页W3C技术头条DOM操作_获取元素

DOM操作_获取元素

w3cschool小编 2021-01-12 15:16:49 浏览数 (78)
反馈
概述

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) 类型。 不管是 h1 还是 img 都是元素。 导致新问题:无法访问 img 元素的 src 属性了。 因为: Element 类型只包含所有元素共有的属性和方法(比如: id 属性)。

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

let img1 = document.querySelector('#img1') as HTMLImageElement

img1.src = './img/4.jpg'
如何知道元素的属性?

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

let img1 = document.querySelector('#img1') as HTMLImageElement

img1.src = './img/4.jpg'

console.dir(img1)

在这里插入图片描述

获取多个 DOM元素:

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

html中的内容如下
<p id='title'>欢迎来到海南大学</p>
   <p class = ' a'>2020年时多灾多难的一年</p>
   <p class="b a">2021年将牛气冲天</p>
   <img id = 'img1'src="./img/1.jpg" alt="">
   <script src = './index.js'></script>
ts 中的内容如下
let list = document.querySelectorAll('.a')

console.log(list)
运行结果如下

在这里插入图片描述

操作文本内容

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

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

追加内容如下操作

let title = document.querySelector('#title') as HTMLParagraphElement
title.innerHTML = title.innerHTML + ' 阳光沙滩美女'
console.log(title.innerHTML)
给所有p标签的内容加上索引
let list = document.querySelectorAll('.a') 

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

输出结果如下:

20210110174112599 (1)


0 人点赞

相关课程 更多»

{{ relateCourse.bookname }}

{{ relateCourse.description }}

{{ relateCourse.watch_count }} 人参与

立即学习
相关文章 更多»
{{ relateArticle.title }} {{ relateArticle.postdate }}

最新文章

热门文章

更多»