深入理解JavaScript DOM操作：创建与复制节点
5星 · 超过95%的资源 需积分: 9 150 浏览量
更新于2024-09-19
收藏 50KB DOC 举报 "JavaScript DOM技术是Web开发中的核心部分，用于操作HTML或XML文档。这篇总结主要涵盖创建、复制和操作DOM节点的方法。"
在JavaScript中，DOM（Document Object Model）是一种标准，允许我们通过编程方式访问和修改网页内容。DOM表示文档的结构，并将其作为一个对象树，使得我们可以方便地对每个元素进行操作。
1、创建节点：
JavaScript 提供了 `createElement()` 和 `createTextNode()` 两个方法来创建新的节点。
- `createElement()` 方法用于创建新的元素节点。例如，`var a = document.createElement("p");` 创建了一个`<p>`元素。新创建的节点的 `nodeType` 属性值为1，表示元素节点。`nodeName` 返回元素的标签名，这里是 "p"。这个新元素并不会自动添加到文档中，需要使用如 `appendChild()`、`insertBefore()` 或 `replaceChild()` 等方法将它插入到合适的位置。例如，`document.body.appendChild(a);` 将新元素添加到页面的<body>元素末尾。
- `createTextNode()` 方法用于创建文本节点。例如，`var b = document.createTextNode("mydemo");` 创建了一个包含文本 "mydemo" 的文本节点。新创建的节点的 `nodeType` 值为3，`nodeName` 返回 "#text"。文本节点同样需要通过上述方法插入文档中。经常与 `createElement()` 配合使用，创建元素节点后，再添加文本节点，例如创建一个包含文本的段落。
2、复制节点：
JavaScript 也提供了复制节点的方法，如 `cloneNode()`。例如，如果你有一个已存在的节点 `node`，你可以使用 `var newNode = node.cloneNode(true);` 来创建它的深拷贝（`true` 表示包括所有子节点）。这将生成一个新的具有相同属性和内容的节点，但不会自动添加到文档中。要将其插入，仍需使用类似 `appendChild()` 的方法。
3、操作节点：
除了创建和复制，DOM 还提供了一系列方法来操作节点，如：
- `appendChild()`：将新节点添加到父节点的末尾。
- `insertBefore(newNode, referenceNode)`：在指定的参考节点之前插入新节点。
- `removeChild(node)`：删除给定的子节点。
- `replaceChild(newNode, oldNode)`：用新节点替换旧节点。
这些方法使得动态更新网页内容变得非常简单，例如响应用户交互或数据变化。
总结：
JavaScript DOM 提供了一套强大的工具，使得我们可以动态创建、操作和修改HTML或XML文档。熟练掌握这些方法对于前端开发至关重要，它们能帮助我们实现动态网页、交互式界面以及富互联网应用的构建。
Javascript DOM 总结
1、创建节点。
它创建的是一个元素节点，所以 等于 。
将返回
注意：方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一
个游离的状态。所以它也没有 属性。
如果想把它添加到文档里，可以使用 或者 !"#方法或者 方法。当然我们在
前面的例子中，自己写了一个 !$#方法
比如：
%
注意： 默认是添加到文档的最后。也就是 ! 子节点。
如果想添加到某个地方，可以使用 !"#。
如果想在元素插入之前给元素添加属性。可以这么做：
!$ % &
%
'
%'
它创建的是一个文本节点，所以 等于 (。
%将返回 )'跟 一样，用 '创建的节点也不会自动添加到文档里。
需要使用 或者 !"#方法或者 方法。他经常与 配合使用，
知道为什么吗？（一个元素节点，一个文本节点。）
!'*
!
%
2、复制节点。
%
它有一个参数。
!'+*+
++
!
%
* ,, 和 #! 的区别
% *
注意：
的话：是-.-,.克隆。
#!： 只克隆 -.-,.，里面的文本不克隆。
可以自己写个例子，然后用 /%0看看。
克隆后的新节点，和 '一样 不会被自动插入到文档 。需要
下载后可阅读完整内容，剩余7页未读，立即下载
2013-05-06 上传
2016-12-07 上传
2020-10-30 上传
2018-04-15 上传
2011-08-28 上传
2014-08-09 上传
2020-06-18 上传
2011-10-21 上传
2011-10-20 上传
xiaopengpeng666
- 粉丝: 0
- 资源: 1
我的内容管理
展开
最新资源
- Fisher Iris Setosa数据的主成分分析及可视化- Matlab实现
- 深入理解JavaScript类与面向对象编程
- Argspect-0.0.1版本Python包发布与使用说明
- OpenNetAdmin v09.07.15 PHP项目源码下载
- 掌握Node.js: 构建高性能Web服务器与应用程序
- Matlab矢量绘图工具：polarG函数使用详解
- 实现Vue.js中PDF文件的签名显示功能
- 开源项目PSPSolver：资源约束调度问题求解器库
- 探索vwru系统：大众的虚拟现实招聘平台
- 深入理解cJSON：案例与源文件解析
- 多边形扩展算法在MATLAB中的应用与实现
- 用React类组件创建迷你待办事项列表指南
- Python库setuptools-58.5.3助力高效开发
- fmfiles工具：在MATLAB中查找丢失文件并列出错误
- 老枪二级域名系统PHP源码简易版发布
- 探索DOSGUI开源库：C/C++图形界面开发新篇章
