JavaScript DOM 基础操作

最新推荐文章于 2022-11-03 15:40:24 发布

一杯甜的苦咖啡

最新推荐文章于 2022-11-03 15:40:24 发布

阅读量249

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_53327551/article/details/125345324

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中DOM操作的基础，包括ID、类名和标签选择API，元素的创建、属性修改，以及事件监听和交互的实践示例。从选择DOM元素到添加自定义事件，让读者掌握核心DOM操作技巧。

摘要由CSDN通过智能技术生成

JavaScript DOM 基础操作

浏览器提供了一系列DOM API接口用于创建、选择、修改 DOM中的元素、处理DOM事件等等

元素选择API

示例dom

<body>
    <div id="container">
        <div class="card">内容</div>
        <span>行内</span>
        <span>行内2</span>
        <p class="red">段落</p>
        <p class="red">段落 2</p>
        <input type="text" />
        <a href="https://www.bilibili.com">bilibili</a>
    </div>
</body>

ID选择

document.getElementById('container')

返回这个ID的DOM元素

class选择

document.getElementsByClassName('red')

返回HTMLCollection类型的元素集合，可以认为是一个数组

HTMLCollection

标签名选择

document.getElementsByTagName('div')

同样返回HTMLCollection类型的元素集合

使用选择器

document.querySelector('#container')

通过制定选择器选择元素,并返回第一个匹配的元素,上例为 #，也可换为 .

document.querySelectorALL('.red')

返回NodeList类型的元素集合,可以认为是一个数组

NodeList

使用遍历树得属性获取相邻节点和子节点

使用 `children`获取所有元素子节点的 `HTMLCOllection`集合

const container = document.getElementById('container')
const children = container.children

使用`nextElementSibiling`获取紧邻当前元素的下一个元素

const container = document.getElementById('container')
const next = container.nextElementSibiling

使用`previousElementSibiling`获取紧邻当前元素的上一个元素

const container = document.getElementById('container')
const previous = container.previousElementSibiling

创建元素API

document对象提供了creatElement的API用于创建一个dom元素并返回，所有元素都提供了append用于追加子元素到最后

<div id="container"></div>
<script>
    //创建<p></p>元素
    const p = document.createElement('p');
    //追加子节点,文本
    p.append('Hello world');
    //选择#container div
    const container = document.querySelector('#container');
    //追加p元素到#container div
    container.append(p)
</script>

修改元素属性API

在创建或获取到元素之后，就可以用 . 来访问元素的属性了，也可以使用setAttribute，removeAttribute方法获取、修改和删除属性

<div id="container"></div>
<script>
    //创建<p></p>元素
    const p = document.createElement('p')
    //追加子节点,文本
    p.append('Hello world')
    //选择#container div
    const container = document.querySelector('#container');
    //追加p元素到#container div
    container.append(p)
    //修改p文本字体为红色,内间距改为20像素
    p.style = "color:red;padding:20px;"
</script>

事件交互API

在拿到dom元素后可以调用它的addEventListener来添加事件

addEventListener(eventName,listener)

-eventName:string 事件名字

-listener:function 事件处理回调函数(尽量不要用匿名箭头函数)

常用事件

事件名	含义
click	鼠标/屏幕点击
mouseenter/mouseleave	鼠标进入/移出元素区域
drag/dragstart/dragend	元素被拖拽/拖拽开始/拖拽结束
input	`<input>`、`<select>`、`<textarea>`内容改变
focus/blur	获取失去焦点
keydown/keyup	键盘按下/松开
play/pause	媒体（视频、音频）播放/暂停

添加事件

事件回调函数中的参数为event对象，包含了事件的一些信息，比如使用target触发事件的元素

const handleEvent = event => {
        event.target //触发事件的元素
    }

下面例子比如给按钮添加事件，点击弹窗

<button id="btn">点我</button>
<script>
    //选择按钮元素
    const btn = document.querySelector('#btn')
        //创建事件监听函数
    const btnClick = function(event) {
            console.log(btn === event.target) //true
            alert("Hello world")
        }
        //给按钮添加事件
    btn.addEventListener('click', btnClick)
</script>

还有两个不推荐使用

给元素添加属性的方式添加事件

btn.onclick = btnClick

这种方式只能给一个元素添加一种事件处理函数，而使用addEventListener可以添加多个
直接在Html中添加事件和处理

<button id=“btn” οnclick=“alert (‘Hello world’)” )>点我< /button>

这种会导致代码难以阅读维护和处理，不推荐