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

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

"本教程深入讲解了JavaScript操作HTML DOM节点的基础，涵盖了节点的创建、修改、删除以及关键方法如appendChild()和insertBefore()的使用。学习者将理解如何通过JavaScript动态地控制HTML文档结构，包括通过parentNode获取父节点、利用firstChild/lastChild访问子节点列表、通过childNodes/children区别元素和文本节点，以及处理兄弟节点关系。教程强调了直接通过节点关系查找的局限性，提倡通过接口的方式来提高代码的健壮性和维护性。首先，要了解JavaScript如何与DOM交互，我们需要知道基本的节点类型，如ELEMENT_NODE（代表HTML元素）和TEXT_NODE（代表文本）。通过document.getElementsByTagName("ul")[0]这样的方法，我们可以获取到指定标签的第一个实例，例如获取到一个无序列表<ul>元素。 1. 获取节点： - `element.parentNode`：返回元素的直接父节点，例如获取<ul>元素的父节点将是<body>元素。 - `element.firstChild` 和 `element.lastChild`：分别获取元素的第一个和最后一个子节点，如果元素是文本节点，这些可能就是文本本身。 - `element.childNodes`：包含所有子节点，包括文本节点和元素节点。 - `element.children`：仅包含元素节点，不包括文本节点。 2. 兄弟节点关系： - `element.previousSibling` 和 `element.nextSibling`：分别获取元素前一个和后一个同级节点。 - `element.previousElementSibling` 和 `element.nextElementSibling`：类似，但只考虑元素节点，排除文本节点。在实际操作中，当使用appendChild()和insertBefore()插入节点时，需要注意以下几点： - appendChild()：将新节点添加到指定元素的子节点列表的末尾。 - insertBefore(newNode, referenceNode)：将新节点newNode插入到referenceNode之前，如果referenceNode不存在，新节点将被添加到元素的末尾。然而，直接使用这些节点关系可能会导致代码不易维护，因为节点的插入位置改变时，依赖于具体节点位置的代码可能需要更新。为了应对这种情况，推荐使用事件监听或条件逻辑，而不是硬编码节点关系，这样能更好地适应文档结构的变化。通过学习这个教程，读者将掌握基础的DOM操作技巧，并能够灵活运用到实际项目中，提升页面的动态性和响应能力。"

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

主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其

中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下

因为 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 = [];

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

weixin_38658471

粉丝: 4
资源: 944

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

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

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

JavaScript操作DOM基础教程

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

JavaScript DOM编程与节点操作

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

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

JavaScript对象与DOM操作教程

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

JavaScript DOM教程：事件处理与节点操作

最新资源