修改节点
上面一篇我们学习了DOM节点的访问，下面来看看DOM节点的修改。
先获取要改变的节点。
var my = document.getElementById('closer');
非常容易更改这个元素的属性。我们可以更改innerHTML.
my.innerHTML = 'final';//final
因为innerHTML可以写入html，所以我们来修改html。
my.innerHTML = '<em>my</em> final';//<em>my</em> fnal
em标签已经成为dom树的一部分了。我们可以测试一下
my.firstChild;//<em>
my.firstChild.firstChild;//my
我们也可以通过nodeValue来改变值。
my.firstChild.firstChild.nodeValue = 'your';//your
修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码
my.style.border = "1px solid red";
CSS属性很多都有破折号("-")，如padding-top，这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写，规范如下。 margin-left变为marginLeft。依此类推
my.style.fontWeight = 'bold';
我们还可以修改其他的属性，无论这些属性是否被初始化。
my.align = "right";
my.name = 'myname';
my.id = 'further';
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">
创建节点
为了创建一个新的节点，可以使用createElement和createTextNode.如果新建完成，可以用appendChild()把节点添加到DOM树中。
创建一个元素P，并把设置innerHTML属性
var myp = document.createElement('p');
myp.innerHTML = 'yet another';
元素P建完成了，就可以随意修改添加属性了
myp.style.border = '2px dotted blue'
接下来可以用appendChild把新的节点添加到DOM树中的。
document.body.appendChild(myp)
使用DOM的方法
用innerHTML方法的确很简单，我们可以用纯的dom方法来实现上面的功能。
- 新建一个文本节点(yet another)
- 新建一个段落
- 把文本节点添加到段落中。
- 把段落添加到body中
// 创建p
var myp = document.createElement('p');
// 创建一个文本节点
var myt = document.createTextNode('one more paragraph')
myp.appendChild(myt);
// 创建一个STRONG元素
var str = document.createElement('strong');
str.appendChild(document.createTextNode('bold'));
// 把STRONG元素添加到P中
myp.appendChild(str);
// 把P元素添加到BODY中
document.body.appendChild(myp);
//结果<p>one more paragraph<strong>bold</strong></p>
cloneNode()
另一种新建节点的方法是，我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制，包括他的子节点，false，仅仅复制自己。
首先获取要复制的元素。
var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>
先不用深度复制。
document.body.appendChild(el.cloneNode(false))
我们发现页面并没有变化，因为仅仅复制的是元素p。和下面的效果一样。
document.body.appendChild(document.createElement('p'));
如果用深度复制，包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。
document.body.appendChild(el.cloneNode(true))
insertBefore()
用appendChild，就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。
elementNode.insertBefore(new_node,existing_node)
实例
document.body.insertBefore(
document.createTextNode('boo!'),
document.body.firstChild
);
意思就是新建一个文本节点，把它作为body元素的第一个节点。
删除节点
要从DOM树删除一个节点，我们可以使用removeChild().我们来看看要操作的HTML
<body>
<p class="opener">first paragraph</p>
<p><em>second</em> paragraph</p>
<p id="closer">final</p>
<!-- and that's about it -->
</body>
来看看下面代码，删除第二段
var myp = document.getElementsByTagName('p')[1];
var removed = document.body.removeChild(myp);
removed节点就是删除的节点。以后还可以用这删除的节点。
我们也可以用replaceChild()方法。这个方法是删除一个节点，并用另一个节点替代。当执行上个删除节点操作之后，结果如下
<body>
<p class="opener">first paragraph</p>
<p id="closer">final</p>
<!-- and that's about it -->
</body>
我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p
var replaced = document.body.replaceChild(removed, p);
和removeChild返回一样。replaced就是移除的节点。现在结果为
<body>
<p class="opener">first paragraph</p>
<p><em>second</em> paragraph</p>
<!-- and that's about it -->
</body>
分享到：
相关推荐
在现代Web开发中，JavaScript与HTML DOM（Document Object Model）的交互是构建动态网页的关键技术之一。DOM是一种标准，用于表示HTML或XML文档的结构，它将文档视为一个树状结构，其中每个节点代表一个元素、属性或...
6. 脚本编辑：可能支持直接在浏览器环境中编写和运行JavaScript代码，进行更复杂的DOM操作。 由于文件列表中只有一个名为"Plug-in unit"的条目，这可能是插件的主要代码单元或组件。它可能包含了实现上述功能的...
在本章“第06章 DOM节点操作（上）”中，我们将深入探讨Document Object Model（DOM）在JavaScript中的应用，以及如何通过DOM接口来操纵HTML或XML文档的结构、内容和样式。DOM是一种标准，它允许编程语言与网页内容...
4. **图片处理**：在JavaScript开发中，处理图片可能涉及读取、修改、显示、上传等操作。domtoimage将DOM转换为图片的过程就是一种图片处理方式。 5. **JavaScript事件处理**：在生成图像后，可能会结合JavaScript...
跨浏览器兼容性是JavaScript DOM编程中的一个挑战，本书可能会讲解如何处理不同浏览器对DOM API的实现差异，以确保代码在各种环境下都能正常运行。了解这些技巧对于开发健壮的Web应用至关重要。 最后，本书可能还会...
在讲解的过程中，涉及到JavaScript操作DOM节点的一些基本技巧和方法，如使用`getElementsByClassName`和`getElementsByTagName`等。 知识点详细说明如下： 1. `getElementsByClassName` 方法： `...
1. JavaScript基础知识：JavaScript是一种在浏览器中运行的脚本语言，它是实现网页动态效果和交云的核心技术之一。要精通DOM编程，首先要对JavaScript语言本身有足够的理解，包括变量、数据类型、运算符、函数、对象...
在网页开发中，jQuery 和 JavaScript 都提供了创建和操作 DOM 节点的方法，但它们在语法和效率上存在一定的差异。本篇文章主要探讨了两者在创建节点方面的区别。 首先，我们来看一下创建一个 h1 标签并将其作为 div...
修改元素的内容和属性是指通过 JavaScript 修改 DOM 中元素的内容和属性。DOM 提供了许多方法和属性，开发者可以通过这些方法和属性来修改元素的内容和属性。 元素节点对象 元素节点对象是指 DOM 中的元素节点对象...
JavaScript的核心是基于ECMAScript的，ECMAScript是与运行环境无关的语言，浏览器是ECMAScript的一个众所周知的运行环境，出了浏览器，js还可以运行在PS等等中。 BOM（Browser Object Model）对象是JavaScript访问...
通过JavaScript，我们可以利用DOM API来查找、创建、修改和删除这些节点。 在JavaScript中，访问DOM元素有多种方法。例如，`getElementById`用于获取具有特定ID的元素，`getElementsByClassName`和`...
在Web浏览器环境中，JavaScript与DOM紧密协作，提供了动态更新页面、响应用户交互、处理数据和构建复杂应用的能力。书中详细介绍了如何利用JavaScript来创建、修改、遍历和操作DOM元素，以实现丰富的用户界面和交互...
在书中，作者会详细介绍如何利用JavaScript与DOM进行交互，这包括选取元素（如通过选择器API或XPath），修改元素属性，以及处理事件。还会探讨如何使用CSS样式和JavaScript结合来实现动态布局和视觉效果。此外，书中...
本文档旨在总结JavaScript中DOM（Document Object Model）节点API的基本用法及其在实际开发中的应用。通过深入理解这些API，开发者能够更加灵活地操控网页文档结构，实现动态内容更新、用户交互等功能。 #### 文档...
这本书全面覆盖了利用JavaScript来操纵和改变网页内容的方法，帮助开发者提升在浏览器环境中编写交互式网页的能力。 书中首先介绍了DOM的基本概念，包括DOM的层次结构、节点类型以及如何通过JavaScript访问和操作...
DOM Enlightenment可能涵盖了如何通过JavaScript访问和修改DOM节点，包括元素选择（如querySelector和querySelectorAll）、遍历DOM树、添加和删除元素、以及事件处理。此外，还可能涉及到性能优化技巧，如使用文档...
在JavaScript中，DOM（Document Object Model）是一种用于表示HTML或XML文档的标准模型，它将文档解析为一个可操作...通过深入理解DOM节点及其关系，以及如何操作这些节点，开发者能够构建交互性强、响应式的Web应用。
学习DOM，你需要了解节点的概念，包括元素节点、文本节点、属性节点等，并学会如何通过DOM方法来遍历、查找、创建和修改这些节点。 三、Ajax技术 Ajax的核心在于能够在不刷新整个页面的情况下，与服务器交换数据并...