DOM常用操作，获取元素、元素属性操作、元素样式style和类class操作、节点操作、事件操作

最新推荐文章于 2023-02-05 23:48:33 发布

为你写首诗ge

最新推荐文章于 2023-02-05 23:48:33 发布

阅读量323

点赞数

分类专栏： Web前端知识学习文章标签： css html 前端

本文链接：https://blog.csdn.net/zhoutao2333/article/details/127581882

版权

Web前端知识学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、获取元素

操作	说明
document.getElementByid()	按照id获取节点
ocument.getElementsByClassName()	按照类名获取节点，使用非ID的节点获取，获取的节点为数组。
document.getElementsByTagName()	按照标签名获取节点，使用非ID的节点获取，获取的节点为数组。
document.querySelectorAll()	通过选择器匹配元素 [批量]
document.querySelector()	通过选择器匹配 [单个]

2、元素属性操作

操作	说明
element.属性（html）	获取元素css的属性（默认属性）
element.属性（html） = “值”	设置元素css的属性值（默认属性）
element.getAttribute(“属性名”)	获取元素css属性（默认/自定义属性）
element.setAttribute(“属性名”,”属性值”)	设置元素css属性值（默认/自定义属性）
element.removeAttribute(‘属性名’)	删除元素的属性（默认/自定义属性）
element.dataset.属性	H5自定义属性值以data-开头(驼峰)，获取属性，dataset是一个以data开头的自定义属性

3、元素样式style和类class操作

操作	说明
element.style.css样式属性	获取元素的style样式
element.style.css样式属性小驼峰=”值”	设置元素的style样式
element.className	获取class类属性
element.className = “值”	设置class类属性

4、节点操作

操作子节点

操作	说明
element.childNode	获取所有子节点，包含了元素结点，文本节点等，不提倡使用
element.children	获取所有子节点，只包含元素节点
element.firstElementChild	获取子节点的第一个元素节点，元素节点第一个
element.LastElementChild	获取子节点的最后一个元素节点，元素节点最后一个
element.firstChild	获取子节点的第一个节点，可能是文本节点
element.LastChild	获取子节点的最后一个节点，可能是文本节点
element.children[0]	获取子节点的第一个节点，无兼容问题
element.children[element.children.length-1]	获取子节点的最后一个节点，无兼容问题

操作父节点

操作	说明
element.parentNode	获取的是当前元素的直接父元素。parentNode是w3c的标准。
element.parentElement	parentElement和parentNode一样，只是parentElement是ie的标准。
element.offsetParent	一看offset我们就知道是偏移量其实这个是于位置有关的上下级，直接能够获取到所有父亲节点，这个对应的值是body下的所有节点信息。

操作兄弟节点

操作	说明
element.nextSibling	获取兄弟节点下一个节点，包含元素、文本节点
element.previousSibling	获取兄弟节点上一个节点，包含元素、文本节点
element.nextElementSibling	获取兄弟节点下一个元素节点，只包含元素节点
element.previousElementSibling	获取兄弟节点上一个元素节点，只包含元素节点

创建、插入节点

操作	说明
document.createElement(“标签名”)	创建节点
element.appendChild(child)	插入到子节点的最后
element.insertBefore(目标节点，child)	插入到目标节点前面

删除节点、复制节点

操作	说明
element.removeChild	删除当前节点
element.cloneNode(false)	浅克隆：只克隆节点本身，不可隆子节点
element.cloneNode(true)	深克隆：会复制节点本身，及里面的所有子节点

5、事件操作

操作	说明
element.on事件名 = function(){}	绑定事件（只能绑定一个事件）
element.on事件名 = null	删除事件
element.addEventListener(‘事件名’,function(){})/ele.addEventListener(‘事件名’,事件)	注册事件（可以绑定多个事件）
element.removeEventListener(‘事件名’)	注销事件

阻止默认、冒泡行为

1.addEventListener('click',function(e){

        e.preventDefault();     //阻止默认

        e.stopPropagation();   //阻止冒泡

})

2.传统写法

a.onclick = function(e){

        return false;            //但是后面面的代码不执行了，该方法只能在传统方法中使用

}

事件委托（面试重点！！！）

原理：不是每个子节点单独设置事件的监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

举例：给ul注册点击事件，然后利用事件对象target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e){
        e.target.style.backgroudColor = 'pink'; //e.target获得了ul下的li，使得li样式改变
    })