JavaScript（js)节点

您所在的位置：网站首页 › js什么意思啊 › JavaScript（js)节点

JavaScript（js)节点

2023-09-07 19:26| 来源: 网络整理| 查看: 265

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

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

元素节点 nodeType为1。

属性节点 nodeType为2。

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

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

我是li1 我是li2 我是li3 我是li4 我是li1 我是li2 我是li3 我是li4 x

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

var erweima = document.querySelector('.erweima'); console.log(erweima.parentNode);

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

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

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

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

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

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

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]);//输出最后一个子元素节点兄弟节点：

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

下一个兄弟节点node.nextSibling

上一个兄弟节点node.previousSibling

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

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

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

【本文地址】

JavaScript（js)节点

JavaScript（js)节点

今日新闻

推荐新闻