JavaScript（js)节点--父节点、子节点、兄弟节点

╰半橙微兮° 2022-12-22 09:59 258阅读 0赞

# JavaScript（js)节点–父节点子节点 #

一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。

元素节点 nodeType为1。

属性节点 nodeType为2。

文本节点 nodeType为3。（文本节点包含文字、空格、换行等）

实际开发中节点操作主要操作元素节点。

<ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ul>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <div class="box">
        <span class="erwetma">x</span>
    </div>

父节点：node.parentNode 得到的是离元素最近的父级节点，如果找不到父节点节返回为null

<script>
    	var erweima = document.querySelector('.erweima');
        console.log(erweima.parentNode);
    </script>

子节点：node.childNode 得到的是所有的子节点，包括元素节点，文本节点等。

node.children 获取所有的子元素节点，也是实际开发常用的方法。

<script>
    	var ul =document.querySelector('ul');
        console.log(ul.childNodes);//得到9个子节点，五个文本节点，四个元素节点。
        console.log(ul.children);//得到4个li。
    </script>

第一个子节点firstChild和最后一个子节点lastChild

firstChild和lastChild返回的是第一个和最后一个子节点，不管是文本节点还是元素节点。

firstElementChild和lastElementChild返回第一个和最后一个元素子节点。(IE9以上支持)

<script>
    	var ul = document.querySelector('ul');
        console.log(ul.firstChild);//输出结果为:#text
        console.log(ul.lastChild);//输出结果为:#text
        console.log(ul.firstElementChild);//输出结果为:我是li1
        console.log(ul.lastElementChild);//输出结果为:我是li4
        console.log(ul.children[2]);//输出结果为：我是li3；无兼容性，实际开发常用
        console.log(ul.children[0]);//输出第一个子元素节点
        console.log(ul.children[ul.children.length-1]);//输出最后一个子元素节点
    </script>

--------------------

### 兄弟节点： ###

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

下一个兄弟节点`node.nextSibling`

上一个兄弟节点`node.previousSibling`

返回上/下一个兄弟元素节点（IE9以上兼容）

下一个兄弟元素节点`node.nextElementSibling`

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

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery的父，子，兄弟节点查找方法

Jquery的父，子，兄弟节点查找方法 1. Query.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$(“span”).parent()或者$

超、凢脫俗/ 2023年10月17日 17:31/ 0 赞/ 45 阅读

相关 JS获取子节点、父节点和兄弟节点的方法实例总结

1.js获取子节点的方式 1.通过获取dom方式直接获取子节点 var a = document.getElementById("test").getEle

太过爱你忘了你带给我的痛/ 2023年10月11日 14:01/ 0 赞/ 20 阅读

相关 vue获取节点的父节点、兄弟节点、子节点

<span @click="getClickInfo(event)"> </span> getClickInfo: function (e)

红太狼/ 2023年06月06日 12:04/ 0 赞/ 25 阅读

相关 JavaScript（js)节点--父节点、子节点、兄弟节点

JavaScript（js)节点–父节点子节点一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。

╰半橙微兮°/ 2022年12月22日 09:59/ 0 赞/ 259 阅读

相关 php 父节点,无限级菜单父节点查询所有子节点

写了一个Thinkphp的节点工具，通过传入一个父id查询旗下的子节点。 ThinkPHP ?phpclass Tree\{static public $treeList=ar

朴灿烈づ我的快乐病毒、/ 2022年11月17日 11:24/ 0 赞/ 309 阅读

相关 JQUERY的父，子，兄弟节点查找方法

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

我不是女神ヾ/ 2022年08月21日 15:59/ 0 赞/ 187 阅读

相关【jquery】删除节点添加节点找兄弟节点

一些简单的内容, 加深印象记录下来： $().empty(); //该方法会删除当前节点下的所有子节点，请注意当前节点不会被删除 $

迈不过友情╰/ 2022年08月13日 12:54/ 0 赞/ 348 阅读

相关 js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); 　　var paren

た入场券/ 2022年06月17日 04:48/ 0 赞/ 459 阅读

相关 js、jquery 获取父节点、子节点、兄弟节点

一 js 获取父节点,子节点,兄弟节点 var test = document.getElementById("test"); var parent =

缺乏、安全感/ 2022年03月19日 14:34/ 0 赞/ 453 阅读

相关【JavaScript & jQuery】获取元素各个节点 (父节点,子节点,兄弟节点),元素筛选

![在这里插入图片描述][20190428142233854.png] JavaScript原生版： var test = document.getElementB

- 日理万妓/ 2022年02月20日 03:41/ 0 赞/ 354 阅读