DOM节点操作

沐沐185

已于 2022-06-27 20:34:48 修改

阅读量147

点赞数

分类专栏： JS 文章标签： javascript

于 2022-06-27 20:34:01 首次发布

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125491305

版权

JS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

节点之间的关系大致可以分为；

文档document--->根节点<html>--->父级节点---->子级节点---->兄弟节点

节点的属性

属性	描述
parentNode	返回节点的父节点
childNodes	返回子节点的集合，包含换行和注释，childNodes
firstChild	返回第一个子节点，包含换行和注释文本
lastChile	返回节点的最后一个子节点，包含换行和注释文本
nextSibiling	兄弟节点之间的选择，无法选择父节点，返回下一个兄弟节点
previousSilibing	兄弟节点之间的选择，返回上一个节点

Element属性：

属性	描述
firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSilibing	返回下一个兄弟节点
previousElementSilibing	返回上一个兄弟节点

注意：

ie的兼容：

firstChild : 第一个子节点在标准和ie9下会获取到空白文本节点。

firstElementChild : 标准下获取第一个子元素节点，ie6/7/8不支持。

lastChild : 最后一个子节点在标准和ie9下会获取到空白文本节点。

lastElementChild : 标准下获取最后一个子元素节点，ie6/7/8不支持。

nextSibling：下一个兄弟节点在标准和ie9下会获取到空白文本节点。

nextElementSibling：标准下获取下一个兄弟节点，ie6/7/8不支持。

previousSibling：上一个兄弟节点在标准和ie9下会获取到空白文本节点。

previousElementSibling：标准下获取上一个兄弟节点，ie6/7/8不支持。

在兼容ie浏览器时，需要写兼容写法

elment = element.nextElementSibling ||element.nextSibling

elment=elment.previousElementSibling ||elment.previousSibling

elment=elment. firstElementChild || elment.firstChild

elment=elment.lastElementChild ||elment.lastChild

<ul>
        <li>通过ul的firstChild和firstElementChild兼容写法让我的字体变红色</li>
        <li>通过previousSibling和previousElementSibling 让我的背景要变蓝色</li>
        <!-- 通过操作第三个li 给他其他同级改变样式使用||兼容写法，需要兼容ie9以及以上，和ie8以及以下 -->
        <li>我是程序员3</li>
        <li>通过nextSibling和previousElementSibling 让我的字体变大</li>
        <li>通过ul的lastChild和lastElementChild兼容写法让我字体变粗</li>
    </ul>
    <script>
        var ul = document.querySelector("ul");
        var ulfirst = ul.firstElementChild || ul.firstChild;
        ulfirst.style.color = "red";
        var lis = document.getElementsByTagName("li");
        var li1 = lis[2].previousElementSibling || lis[2].previousSibling;
        li1.style.backgroundColor = "blue";
        var li3 = lis[2].nextElementSibling || lis[2].nextSibling;
        li3.style.fontSize = "30px";
        var ullast = ul.lastElementChild || ul.lastChild;
        ullast.style.fontWeight = "700"
    </script>

节点信息

主要注意：

nodeName:节点名称
nodeValue:节点值
nodeType:节点类型,

节点类型	nodeType值
元素element	1
文本text	3
注释comments	8
文档doucment	9

设置节点属性：

setAttribute()方法添加指定的属性。并为其赋值。
getAttribute()方法返回指定的属性名的属性值。
removeAttribute()方法删除指定属性值
var annimals = document.getElementsByTagName("input");
        var img = document.querySelector("img");
        annimals[0].onclick = function () {
            img.removeAttribute("src");
            img.setAttribute("src", "cat.webp");
        }
        annimals[1].onclick = function () {
            img.removeAttribute("src");
            img.setAttribute("src", "dog.webp");
        }