DOM操作_获取元素

2021-01-12 15:16:49 浏览数 (3)
概述

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

输出结果如下:




前端

0 人点赞