JavaScript进阶-WebAPI（获取和修改DOM元素）

Hello 码上秃

已于 2022-04-18 22:38:27 修改

阅读量420

点赞数

分类专栏： JavaScript笔记文章标签：前端 javascript

于 2022-04-18 22:26:52 首次发布

本文链接：https://blog.csdn.net/dazzpnb/article/details/124261411

版权

JavaScript笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

- - 二、JavaScript进阶-WebAPI

二、JavaScript进阶-WebAPI

WebAPI基础知识

DOM
　　操作html和css
BOM
　　操作浏览器
DOM 树

获取和修改DOM元素

获取DOM元素

document.querySelector(‘css选择器’)
　　获取的是满足条件的第一个，一定只有一个
　　可以直接进行操作
document.querySelectorAll(‘css选择器’)
　　1、获取的是满足条件的所有DOM对象，返回的是一个伪数组
　　　　①即使只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已
　　　　②有长度有索引号的数组
　　　　③但是没有pop()、push()等数组方法
　　2、无法直接操作，必须通过下标才能操作
其他获取DOM元素的方法：
　　document.getElementById()
　　document.getElementsByTagName()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div>Hello World!</div>
<div>Hello World!</div>
<div class="divThree">Hello World!</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
/**
     * CSS选择器匹配的第一个元素,一个HTMLElement对象。
     * 如果没有匹配到，则返回null。
     */
    let div = document.querySelector('div')
    let divThree = document.querySelector('.divThree')
    let li = document.querySelector('ul li:last-child')

    /**
     * CSS选择器匹配的所有元素
     */
    let divAll = document.querySelectorAll('div')

    for (let divAllKey in divAll) {
        console.log(divAll[divAllKey])
    }
</script>
</body>
</html>

设置/修改元素内容

innerText
　　只关注内容, 不关注标签
innerHTML
　　可以解析标签

设置/修改元素属性

设置/修改常用属性
　　href、title、src
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
</head>
<body>
<img src="../images/1.webp">
<script>
 let img = document.querySelector('img')
 // 修改元素属性
 img.src = '../images/desktop_5.jpg'
 img.title = '城市风光'
</script>
</body>
</html>
设置/修改元素样式属性
　　style操作css
　　　　每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
　　　　如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中-会被解析成减号）
　　　　style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
　　操作类名(className)【classList 是追加和删除不影响以前类名】
　　　　由于class是关键字, 所以使用className去代替
　　　　className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
　　classList
　　　　添加：add(class1, class2, …) 【追加一个类】
　　　　删除：remove(class1, class2, …)
　　　　切换：toggle(class)
设置/修改表单属性
　　表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true 代表添加了该属性，如果是false 代表移除了该属性
　　常见表单属性：value、type、disabled、checked、selected

自定义属性

固有属性：
　　标签天生自带的属性比如class id title等, 可以直接使用点语法操作
自定义属性：
　　setAttribute(‘属性名’, ‘属性值’) // 设置自定义属性
　　getAttribute(‘属性名’) // 获取自定义属性
　　removeAttribute(‘属性名’) // 删除自定义属性

命名规范：
　　　　data-自定义属性名称
　　　　获取自定义的属性
　　　　　　dataset.自定义属性名称