DOM节点基础操作

一.了解节点操作

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

我们之前所了解到的

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>

 DOM节点基础操作

那我们思考一个问题:为什么打印出来的是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>

DOM节点基础操作

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

node.nextElementSibling
node.previousElementSibling

DOM节点基础操作

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

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