DOM-获取DOM元素、修改属性

最新推荐文章于 2024-04-27 05:56:04 发布

雨会感到难过吗

最新推荐文章于 2024-04-27 05:56:04 发布

阅读量2.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46451036/article/details/123997675

版权

Web API 基本认知

作用: 就是使用 JS 去操作 html 和浏览器

分类：DOM (文档对象模型)、BOM（浏览器对象模型）

DOM树是什么

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用 :开发网页内容特效和实现用户交互

DOM对象：

浏览器根据html标签生成的 JS对象所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上

DOM的核心思想:

把网页内容当做对象来处理

document 对象 :

是 DOM 里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的例：document.write()

网页所有内容都在document里面

获取DOM元素

查找元素DOM元素就是选择页面中标签元素

1.根据CSS选择器来获取DOM元素

.1.1 选择匹配的第一个元素

语法：document.querySelector(`css选择器`)

参数：包含一个或多个有效的CSS选择器字符串

返回值：css选择器匹配的第一个元素，一个 HTMLElement对象,如果没有匹配到，则返回null

1.2 选择匹配的多个元素

语法：document.querySelectorAll(`css选择器`)

参数: 包含一个或多个有效的CSS选择器字符串

返回值： CSS选择器匹配的NodeList 对象集合

例如：document.querySelectorAll(`ul li`)

querySelectorAll() 方法获取到的元素能直接修改吗？

如果不能可以怎么做到修改？不可以，只能通过遍历的方式。依次给里面的元素做修改

querySelectorAll()获取的是一个伪数组

document.querySelectorAll(`css选择器`)

得到的是一个伪数组：有长度有索引号的数组，但是没有 pop() 、push() 等数组方法，想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

设置/修改DOM元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。

就是操作对象使用的点语法。

如果想要修改标签元素的里面的内容，则可以使用如下几种方式：

document.write() 方法

对象.innerText 属性

对象.innerHTML 属性

1. document.write() 只能将文本内容追加到 </body> 前面的位置，文本中包含的标签会被解析

2. 元素innerText 属性将文本内容添加/更新到任意标签位置文本中包含的标签不会被解析

3.元素innerHTML属性将文本内容添加/更新到任意标签位置文本中包含的标签会被解析

如：span.innerHTML=`<p>你好</p>`

设置/修改DOM元素属性

可以通过 JS 设置/修改标签元素属性

比如通过 src更换图片最常见的属性比如： href、title、src 等

语法：对象，属性=值

例如：

<body>
 <img src="" alt="">
    <script>
        let pic=document.querySelector(`img`)
        pic.src=`./1jpg`
    </script>
</body>

还可以通过 JS 设置/修改标签元素的样式属性。

1通过 style 属性操作CSS

语法：对象.style.样式属性=值

<body>
    <div>你好</div>
    <script>
        let divdom=document.querySelector(`div`)
        divdom.style.backgroundColor=`red`
    </script>
</body>

注意：

修改样式通过style属性引出如果属性有-连接符，需要转换为小驼峰命名法赋值的时候，需要的时候不要忘记加css单位

2. 操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

语法：元素.className=`css类名`

由于class是关键字, 所以使用className去代替 className是使用新值换旧值

如果需要添加一个类,需要保留之前的类名

3. 通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

 元素.classList.add(`类名`)//追加一个类
 元素.classList.remove(`类名`)//删除一个类
 元素.classList.toggle(`类名`)//如果有这个类名了则删除这个类名，如果没有这个则添加类名

classList 是追加和删除不影响以前类名

3. 设置/修改表单元素属性

获取: DOM对象.属性名设置: DOM对象.属性名 = 新值

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性比如： disabled、checked、selected

定时器-间歇函数

使用场景：网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发例如：网页中的倒计时要实现这种需求，需要定时器函数定时器函数有两种，今天我先讲间歇函数

基本使用：定时器函数可以开启和关闭定时器

注意： 1函数名字不需要加括号，定时器返回的是一个id数字

2. 关闭定时器一般不会刚创建就停止，而是满足一定条件再停止

雨会感到难过吗

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DOM-获取DOM元素、修改属性

Web API 基本认知作用: 就是使用 JS 去操作 html 和浏览器分类：DOM (文档对象模型)、BOM（浏览器对象模型）DOM树是什么将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树描述网页内容关系的名词作用：文档树直观的体现了标签与标签之间的关系什么是DOMDOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文：DOM是浏览器提供的一套专门用来操作网.
复制链接

扫一扫