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)

结果如下
DOM操作_获取元素_第1张图片

调用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操作_获取元素_第2张图片

获取多个 DOM元素:

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

html中的内容如下
<p id='title'>欢迎来到海南大学p>
    

2020年时多灾多难的一年p> <p class="b a">2021年将牛气冲天p>

你可能感兴趣的:(网页制作)