DOM知识总结

宋小羽 • 2024年8月17日 am10:53 • JavaScript • 41 阅读

获取DOM元素、修改属性

获取DOM对象的方式

document.querySelector

获取满足条件的第一个，有且只有一个。可以直接操作。

document.querySelectorAll

获取的是满足条件的所有DOM对象，返回的是一个集合。无法直接操作，必须通过下标才能操作。

其他方式

document.getElementById()：根据标签的id属性获取元素
document.getElementsByTagName()：根据标签名称获取元素集合

修改元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象。即可操作对象使用的点语法。

innerText：只关注内容，不关注标签（不明确数据安全的情况下，建议用innerText）
innerHTML：可以解析标签

<body>
    <div class="parent">我是一个父元素</div>
</body>
<script>
    var ele = document.querySelector('.parent');
    ele.innerText = '你不是';
    ele.innerHTML = '<p>我是一个子元素</p>'
    // console.log(ele);
</script>

修改元素属性

修改常用属性

如title、href、src等

<body>
    <a href="http://www.baidu.com">点击跳转百度</a>
</body>
<script>
    var ele = document.querySelector('a');
    ele.href = 'https://www.zhihu.com' // 更换href属性
    ele.target = '_blank' // 设置target属性
    ele.title = '点我查看' // 设置title属性
</script>

修改元素样式属性

style操作css

每个DOM对象都有一个style属性，style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
如果样式的名字带了-，如background-color，在style对象中，呈现的是驼峰命名法backgroundColor（因为在js中，-会被解析成减号）
style样式只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box" style="background-color: red;">我是一个盒子</div>
</body>
<script>
    var ele = document.querySelector('.box');
    ele.style.backgroundColor = 'green'
    console.log(ele.style.backgroundColor); // grren
    console.log(ele.style.width); // 
</script>

操作类名 className

由于class是关键字，所以使用className去代替。
className是使用新值替换旧值，如果需要添加一个类，需要保留之前的类名。

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: #fff;
            background-color: black;
        }
        .green {
           background-color: green;
        }
        .red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">我是一个盒子</div>
</body>
<script>
    var ele = document.querySelector('.box');
    ele.className = 'green' // 用green替换原有的box名字
    ele.className = 'box green'  // 用box green替换原有的box名字
</script>

classList

添加：add(class1, class2, ...)
删除：remove(class1, class2, ...)
切换：toggle(class)

<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>DOM操作对象</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: #fff;
            background-color: black;
        }
        .green {
           background-color: green;
        }
        .red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">我是一个盒子</div>
</body>
<script>
    var ele = document.querySelector('.box');
    ele.classList.add('green', 'red'); //添加green、red两个class类名
    ele.classList.remove('red'); // 删除red class类名
    ele.classList.toggle('red'); // 切换red class类名
</script>

className、style和classList间的区别

className修改大量样式更方便
style修改少量样式更方便
classList追加和删除不影响之前的类名

修改表单属性

正常有属性有取值的，与其他标签属性没有区别
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true表示添加了该属性，false表示移除了该属性。
常见表单属性有value、disabled、checked、selected等

<body>
    <input class="input" type="text">
    <br />
    <input type="checkbox" name="hobby" class="hobby" id="read"/><label for="read">阅读</label>
    <br />
    <select name="cook" id="cook">
        <option value="番茄炒蛋" class="fan">番茄炒蛋</option>
        <option value="红烧鱼" selected>红烧鱼</option>
    </select>
</body>
<script>
    var ele = document.querySelector('.input');
    ele.value = '这是一个输入框'; // 设置默认值
    ele.disabled = true; // 设置禁止输入

    var checkEle = document.querySelector('.hobby');
    checkEle.checked = true // 默认选择

    var cookEle = document.querySelector('.fan');
    cookEle.selected = true // 设置番茄炒蛋为默认选中
</script>

定时器

间隔一段时间之后重新执行对应的代码

创建定时器

let timer = setInterval(回调函数, 间隔时间);

清楚定时器

clearInterval(timer)

注意：

定时器需要等待，所以后面的代码先执行
每一次调用定时器，都会产生一个新的定时器

<body>
     <div class="parent">
        1分钟倒计时：
        <span class="son"></span>
     </div>
     <input type="button" value="开始" />
</body>
<script>
    // 实现点击按钮 1分钟倒计时
    var btn = document.querySelector('input')
    var ele = document.querySelector('.son')
    var timerTotal = 60
    // 监听点击事件
    btn.addEventListener('click', function() {
        // 开始倒计时
        ele.innerHTML = timerTotal
        let timer = setInterval(function() {
            timerTotal -= 1
            ele.innerHTML = timerTotal

            if(timerTotal <=0) {
                // 清楚定时器
                clearInterval(timer)
                ele.innerText = '倒计时结束啦'
            }
        }, 1000)
    })
</script>

事件基础

能给元素添加事件，并利用事件做常见的网页交互效果。

事件

发展历史

DOM L0：DOM发展的第一个版本
DOM L1：DOM级别1于1998年10月1日称为W3C推荐标准
DOM L2：使用addEventListen注册事件
DOM L3：DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新的事件类型

事件监听

分别有以下几个内容：

事件源
事件类型
事件处理函数

常见的事件类型

鼠标事件：click, mouseenter,mouseleave
焦点事件：fouce, blur
键盘事件：keydown, keyup
文本事件：input

注意点：

事件处理函数不会主动执行，必须触发才会执行，触发一次就会执行一次
事件处理函数里面的内容最后执行

高级函数

可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成值来对待。

函数表达式：把函数当值赋值给变量

回调函数：把函数作为参数传递给另外一个函数（如定时器函数）

环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。（谁调用函数，this就指向谁）

节点操作

针对标签本身的增删改查

查找节点

有明确的亲戚关系的时候，查找节点更加方便

父级：parentNote
子级：children（返回伪数组）
兄弟：nextElementSibling、previousElementSibling

增加节点

创建新节点

let result = document.createElement('标签名称')

追加节点

parent.appendChild(child)：将child的元素添加到parent元素里面，添加到最后面
parent.insertBefor(child, refChild)：将child元素添加到refChild的前面，如果refChild元素获取不到，则默认以appendChild形式添加

克隆节点

模板元素.cloneNode(布尔值)

克隆节点时，需要页面上有一个模板节点。布尔值为false，浅拷贝；true为深拷贝。

删除节点

parent.removeChild(child)

事件高级

事件流

经历事件捕获、事件目标阶段和事件冒泡的整个完成的过程就是事件流。实际上都以时间冒泡为主。

事件捕获

从DOM的根元素开始去执行对应对应的事件（从外到里）

捕获机制必须使用事件监听的形式注册

DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。

事件冒泡的必要性：如果没有冒泡，给大盒子注册点击事件，点击里面的小盒子时，则会导致大盒子的点击事件无法执行。

阻止冒泡

阻止事件冒泡

先要明确哪一块区域不能冒泡
需要阻止什么事件传递就给这块区域的最大盒子注册该事件
在事件处理函数里面接受事件对象，并添加e.stopProgagation()

阻止冒泡方式

e.stopProgagation()：阻止事件冒泡
e.preventDefault()：阻止链接、表单域的跳转

事件注册的两种方式区别

传统on注册：

同一个对象，后面注册的同类事件会覆盖前面的事件
直接使用null覆盖就可以实现解绑
都是冒泡阶段执行的

事件监听注册：

语法：addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面的同类事件
可以通过第三个参数确定是在冒泡还是捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)，匿名函数无法被解绑

事件委托

指的是自己不注册事件，将对应的事件注册给祖先元素

可以减少事件的注册，提高效率

网页特效篇

页面滚动事件和页面加载事件

页面滚动事件

滚动条在滚动的时候持续触发的事件

window.addEventListener('scroll', function() {
    // 执行的操作
})

加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完成时触发的事件

window.addEventListener('load', function() {

})

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

document.addEventListener('DOMContentLoaded', function() {

})

元素大小和位置

srcoll家族

scroll事件
scrollTop、scrollLeft：获取滚动被卷去的大小

offset家族

获取出来的是数值，方便计算。只读属性。

可视宽高属性：（获取的是可视宽高，如果盒子是隐藏的，获取的值则为0）

offsetWidth
offsetHeight

元素位置属性：（获得最近带有定位的父亲）

offsetTop
offsetLeft

client家族

给window注册的事件

属性有以下几个：

clientWidth
clientHeight
clientTop
clientLeft

这些信息可能会帮助到你：关于我们 | 饿了么返钱 | 捐赠支持

文章名称：DOM知识总结
文章链接：https://www.bysjb.cn/dom.html

THE END

二维码

打赏

JS面向对象编程之实例对象与new命令

< <上一篇

BOM操作浏览器和正则表达式

下一篇>>

搜索内容