修改节点
上面一篇我们学习了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>
分享到：
相关推荐
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
删除：删除一个Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点。 1 获取Dom节点 获得Dom节点代码： Title 标题一 p1 p2 var h1 = document.getElementsByTagName('h1'); var p1 = document....
DOM的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做...
主要介绍了JavaScript在浏览器标题栏上显示当前日期和时间的方法,实例分析了javascript操作时间及DOM节点实现定时触发的技巧,非常具有实用价值,需要的朋友可以参考下
本书将这些概念贯穿在书中的所有代码示例中，以便呈现用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本，最后结合所讲述的内容创建了一个实际的网站。 《javascript dom编程艺术...
由于HTML文档被浏览器解析后就是一棵... 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。 在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.
这一点是没有争议的，并且在所有浏览器中的行为都是一致的，原因也不难理解：浏览器需要一个稳定的DOM结构，而JavaScript可能会修改DOM(改变DOM结构或修改某个DOM节点)，如果在JavaScript执行的同时还继续进行页面的...
shear.js shear.js是一个零依赖的...无需将目标元素设置为块级元素的功能，即可在目标元素内的dom节点之间截断，保持目标元素内的原始dom节点在截断零依赖项末尾插入html字符串，非常轻巧（1.9kb）浏览器支持IE
12.5 访问和操纵DOM节点 12.5.1 打开每一个盒子--遍历节点 12.5.2 弄清层级关系--父子与兄弟 12.5.3 如何搜索特定节点 12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点...
15.2 理解DOM节点 15.3 节点 15.3.1 父节点和子节点 15.3.2 兄弟节点 15.3.3 nodeName和nodeType属性 15.3.4 空白bug 15.4 遍历DOM 15.5 DOM查看器 15.6 查询DOM的快捷...
domhide.js背后的想法是保留标签的尺寸并从 DOM 中删除所有标签的子级，有效地释放内存（尤其是对图像标签有用）。 Tag 的 innerHTML 属性作为注释节点插入回 DOM。 为了扭转这一点，为了揭示标签的内部结构，评论...
已经确定，我们可以轻松地操作DOM中的“节点”，以及随意创建和删除元素。 我们知道我们可以，那么我们究竟如何互动与页面上的节点？ 好吧，我们听他们的！ 目标 演示使用addEventListener()侦听DOM节点上的事件 ...
网页开发时，在很多时候我们需要操作相同类名的元素，即...Jeremy Keuth大叔在《JavaScript DOM 编程艺术》（第2版）（英文：DOM Scripting-Web Design with JavaScript and the Document Object Model）一书的第三章第
创建和插入DOM节点目标在本课程结束时，您将能够以编程方式创建DOM元素将元素插入DOM 从DOM中删除元素本课程是一门代码-学习将期望看到对文件内容所做的更改以注册完成。 继续进行操作，然后复制并粘贴代码段。...
Vue源码分析之虚拟DOM详解 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。... ----- 元素节点： 元素节点更贴近于我们通常所看到的真实DOM节点，他有描述节点标签名词的tag属性，描述节点属性
不需要节点环境或特殊的浏览器！！！ 支持react，react-native，vue等... 安装 npm install --save react-native-dom-parser 用法 import DomSelector from 'react-native-dom-parser'; const rootNode = ...
通过《DOM启蒙》，读者将学习如何通过文档对象模型（DOM）更有效率地操作HTML，而无需DOM操作库的帮助。...读者将理解jQuery在DOM脚本编写中扮演的角色，并学习如何在移动应用和特定浏览器中直接使用DOM编写应用程序。
一个简单的 JavaScript 库，用于通过 CSS 选择器查找 DOM 节点。 例子 grail . find ( '#abc' ) ; grail . find ( 'div.alpha' ) ; grail . findAll ( 'div' , document . body ) ; grail . findAll ( '.alpha' ) ;...
6.3.5 修改length属性更改数组 6.3.6 调用Array对象的方法生成字符串 6.3.7 连接两个数组 6.3.8 常见属性和方法汇总 6.4 Date对象 6.4.1 生成日期对象的实例 6.4.2 如何提取日期各字段 6.4.3 如何设置日期各字段 ...