DOM节点基础操作

最新推荐文章于 2024-05-11 00:24:25 发布

Try Tomato

最新推荐文章于 2024-05-11 00:24:25 发布

阅读量426

点赞数 1

分类专栏： # + 浏览器 DOM 文章标签： javascript 节点前端

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124187314

版权

+ 浏览器 DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.了解节点操作

我们所有的代码都是节点，哪怕是一句注释，也是一个节点

我们之前所了解到的

document.getElementById()

document.getElementByTagName()

document.querySelector()

document.querySelectorAll()

像这些获取元素的方法很繁琐，而且逻辑性不强

但是如果我们使用节点操作的话，可以利用节点的层级关系来获取元素

例如我们利用父子节点的关系来获取元素，亦或者是利用兄弟节点获取元素等等

逻辑性较强

二.进一步深入节点

一般来说，节点至少拥有节点类型（nodeType）、节点名称（nodeName）、节点值（nodeValue）这三个最基本属性

节点类型有这三种常见类型：

元素节点：1

属性节点：2

文本节点：3

三.节点层级

1.父级节点

node.parentNode

假如现在ul里面有一个li，我们想通过li来获取到他的父亲ul：

<body>
    <ul>
        <li></li>
    </ul>
</body>
<script>
  const li = document.querySelector('li')
  console.log(li.parentNode)
   
</script>

那我们思考一个问题：为什么打印出来的是ul，而没有body？

我们可以这样理解：再上一层的是爷爷，我们使用的是父节点，所以和爷爷没关系

我们还可以这样理解：得到的是距离元素最近的父节点

（找不到父亲返回为空）

2.子节点

子节点的获取方法很多：

//获取父级下的所有子节点的集合，该集合包含了元素节点、文本节点等等（不建议使用）
parentNode.childNodes

//只获取了元素节点，是一个只读属性
parentNode.children

//获取到第一个子元素
parentNode.firstChild

//获取到最后一个子元素
parentNode.lastChild

//I9以上版本支持的获取首尾元素方法
parentNode.firstElementChild
parentNode.lastElementChild

综合以上所有写法，我们建议使用parentNode.children这一个获取子元素的方法搭配索引来完成需求：

//获取第一个子元素
parentNode.children[0]

//获取最后一个子元素
parentNode.children[parentNode.children.length - 1]

3.兄弟节点

//返回当前元素的下一个兄弟节点
node.nextSibling

//返回当前节点的上一个兄弟节点
node.previousSibling

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li id="testli">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script>
  const li = document.querySelector('#testli')
  console.log(li.nextSibling)
   
</script>

包含了所有的节点，所以我们这个方法是不常用的，我们一般使用下面这个新方法：

node.nextElementSibling

node.previousElementSibling

这个方法很好用，但是有一些兼容性的问题，当然我们现在不考虑兼容性的问题了，但是难免有个万一，所以我们可以自己封装一个函数来解决这个问题：

function getNextElementSibling(e){
    while(e = e.nextSibling){
        if(e.noodeType === 1){ return e }
    }return null
}

Try Tomato

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM节点基础操作

目录一.了解节点操作二.进一步深入节点三.节点层级1.父级节点2.子节点3.兄弟节点一.了解节点操作我们所有的代码都是节点，哪怕是一句注释，也是一个节点我们之前所了解到的document.getElementById()document.getElementByTagName()document.querySelector()document.querySelectorAll()像这些获取元素的方法很繁琐，而且逻辑性不强但是如果我们使用节点
复制链接

扫一扫