JavaScript DOM操作详解：节点关系与高效获取

178 浏览量更新于2024-08-30 收藏 86KB PDF 举报

本篇教程是关于JavaScript操作HTML DOM节点的基础指南，主要介绍了如何利用DOM（Document Object Model）在JavaScript中对页面结构进行动态管理。DOM模型将HTML文档视为一个由节点构成的树状结构，允许开发者通过编程方式访问、修改和操作这些节点。 1. **获取节点**: - **父子关系**: 通过`element.parentNode`属性可以获取当前元素的父节点，如示例中`ulNode.parentNode`返回的是`<body>`元素。`element.firstChild`和`element.lastChild`分别获取第一个和最后一个子节点，而`element.childNodes`包含所有子节点（包括文本节点），`element.children`只包含元素子节点。 2. **兄弟关系**: - `element.previousSibling` 和 `element.nextSibling` 分别获取前一个和后一个兄弟节点，如果不存在则返回`null`。而`element.previousElementSibling` 和 `element.nextElementSibling` 仅限于元素节点，过滤了文本节点。 3. **性能与维护性**: 使用直接的关系获取节点，如`previousSibling`，可能导致代码不易维护，因为节点关系的变化可能会导致获取结果出错。为了提高代码的稳定性和可维护性，建议使用更稳定的接口或方法，如`getElementsByTagName`、`querySelector`等，它们能够确保在不同情况下的正确性。 4. **示例代码**: 作者给出了一个HTML结构，包括一个`<ul>`列表和一个`<p>`段落，然后使用JavaScript获取并打印这些节点的相关信息。例如，`ulNode.firstElementChild`获取`<ul>`的第一个子元素节点，即`<li>First</li>`。通过本教程，学习者可以掌握基本的DOM操作技巧，这对于前端开发人员来说是至关重要的，因为理解并熟练运用DOM操作能够帮助他们实现动态网页效果，提升用户体验。

JavaScript操作操作HTML DOM节点的基础教程节点的基础教程

因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。

NOTE：下面提供的例子中的 element 均为元素节点。

获取节点获取节点

父子关系父子关系

element.parentNode

element.firstChild/element.lastChild

element.childNodes/element.children

兄弟关系兄弟关系

element.previousSibling/element.nextSibling

element.previousElementSibling/element.nextElementSibling

通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点），而通过接口则可以

有效的解决此问题。

通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点），而通过接口则可以

有效的解决此问题。

<!DOCTYPE html>

<head>

<title>ELEMENT_NODE & TEXT_NODE</title>

</head>

<body>

<li>First</li>

<li>Second</li>

<li>Third</li>

<li>Fourth</li>

</ul>

<p>Hello</p>

var ulNode = document.getElementsByTagName("ul")[0];

console.log(ulNode.parentNode); //<body></body>

console.log(ulNode.previousElementSibling); //null

console.log(ulNode.nextElementSibling); //<p>Hello</p>

console.log(ulNode.firstElementChild); //<li>First</li>

console.log(ulNode.lastElementChild); //<li>Fourth</li>

</script>

</body>

</html>

NTOE：细心的人会发现，在节点遍历的例子中，body、ul、li、p节点之间是没有空格的，因为如果有空格，那么空格就会被

当做一个TEXT节点，从而用ulNode.previousSibling获取到得就是一个空的文本节点，而不是 <li>First</li> 节点了。即节点遍

历的几个属性会得到所有的节点类型，而元素遍历只会得到相对应的元素节点。一般情况下，用得比较多得还是元素节点的遍

历属性。

实现浏览器兼容版的实现浏览器兼容版的element.children

有一些低版本的浏览器并不支持 element.children 方法，但我们可以用下面的方式来实现兼容。

<head>

<title>Compatible Children Method</title>

</head>

</div>

function getElementChildren(e){

if(e.children){

return e.children;

}else{

/* compatible other browse */

var i, len, children = [];

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38677648

粉丝: 5
资源: 886

JavaScript DOM操作详解：节点关系与高效获取

头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）

dom教程 dom文档对象实例教程

JavaScript操作DOM基础教程

JavaScript DOM教程：节点分类与操作详解

JavaScript DOM编程与节点操作

掌握JavaScript操作DOM的压缩包教程

JavaScript节点类型详解与DOM节点分类

JavaScript对象与DOM操作教程

jQuery包裹节点基础教程：DOM操作与动画应用

JavaScript DOM基础：创建、修改与节点插入教程

最新资源