首页 > 编程语言> 文章详细

JavaScript基础——节点操作

2022-05-12 01:32:41 阅读：146 来源： 互联网

标签：node 结点元素 ul JavaScript 获取操作节点

节点概念

节点类型

节点常见类型有以下几种：

元素结点 Node.ELEMENT_NODE(1)
属性结点 Node.ATTRIBUTE_NODE(2)
文本结点 Node.TEXT_NODE(3)

节点层级

利用DOM树可以将结点划分为不同层级关系，常见的是父子级关系

一、父级节点

node.parentNode

例如：实现点击test结点中的close结点让test消失，就可以这么写。

<div id='test'>
    <div id='close'>x</div>
</div>
<script>
    var close = this.document.querySelector('#close');
    close.onclick = function(){
        close.parentNode.remove();
    }
</script>

二、子节点

1.获取所有子节点

node.childNodes // 标准

例如：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var ul = this.document.querySelector('ul');
    console.log(ul.childNodes);
</script>

我们要将ul中的childNodes将所有4个li打印出来，但是将上述代码进行输出时，却发现得到的数组长度为9，如下所示。

展开该数组不难发现，除了4个元素结点li外还有5个文本结点，这5个并不是li中的文本，因为li中的文本已经不属于ul的子节点。

那么这5个文本类型的结点是ul的？可ul中并没有文本啊？

别忘了，其实换行符也是属于一个字符，这5个文本结点正好对应ul中li与li之间的换行符。

注意：childsNode返回值里面包含的是所有的子节点，如果想要获取里面的元素结点，则需要专门处理。一般不提倡使用。

2.获取所有子元素结点

parentNode.children // 非标准

children是一个只读属性，返回所有子元素的节点。它只返回元素结点，其他结点均不返回。
虽热children是非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。

3.获取第一个和最后一个结点

获取第一个/最后一个节点，包含文本结点、元素结点等。

node.firstChild // 获取第一个子节点
node.lastChild  // 获取最后一个子节点

获取第一个/最后一个节点，只获取子元素结点。

node.firstElementChild // 获取第一个子元素节点
node.lastElementChild  // 获取最后一个子元素节点

注意：这两个方法有兼容性问题，IE9以上才支持

获取第一个/最后一个节点，只获取子元素结点。（实际开发中为了照顾兼容性的写法）

node.children[0] // 获取第一个子元素节点
node.children[node.children.length] // 获取最后一个子元素节点

三、兄弟结点

获取上一个/下一个兄弟节点，包含文本节点、元素节点等。

node.nextSibling      // 下一个兄弟节点
node.previousSibling  // 上一个兄弟节点

获取上一个/下一个兄弟节点，只获取元素节点。

node.nextElementSibling   // 上一个兄弟元素节点
node.previousElementSibling   // 上一个兄弟元素节点

注意：这两个方法有兼容性问题，IE9以上才支持
解决办法：自己封装一个兼容性的函数

function getNextElementSibling(element){
    var el = element;
    while(el = el.nextSibling){ // 注意这里是赋值运算符并不是比较，循环条件是el不为null
        if(el.nodeType==1)return el;
    }
    return null;
}

标签：node,结点,元素,ul,JavaScript,获取,操作,节点
来源： https://www.cnblogs.com/maplerain/p/16260590.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9