`

Javascript 在浏览器环境中 (四) DOM节点的创建,修改与删除（转）

浏览器JavaScriptCSSHTML 
阅读更多

修改节点

上面一篇我们学习了DOM节点的访问，下面来看看DOM节点的修改。

先获取要改变的节点。

Js代码 复制代码
  1. var my = document.getElementById('closer');  
var my = document.getElementById('closer');

非常容易更改这个元素的属性。我们可以更改innerHTML.

Js代码 复制代码
  1. my.innerHTML = 'final';//final  
my.innerHTML = 'final';//final

因为innerHTML可以写入html，所以我们来修改html。

Js代码 复制代码
  1. my.innerHTML = '<em>my</em> final';//<em>my</em> fnal  
my.innerHTML = '<em>my</em> final';//<em>my</em> fnal

em标签已经成为dom树的一部分了。我们可以测试一下

Js代码 复制代码
  1. my.firstChild;//<em>   
  2. my.firstChild.firstChild;//my   
my.firstChild;//<em>
my.firstChild.firstChild;//my

我们也可以通过nodeValue来改变值。

Js代码 复制代码
  1. my.firstChild.firstChild.nodeValue = 'your';//your  
my.firstChild.firstChild.nodeValue = 'your';//your

 

修改样式

大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码

Js代码 复制代码
  1. my.style.border = "1px solid red";  
my.style.border = "1px solid red";

CSS属性很多都有破折号("-")，如padding-top，这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写，规范如下。 margin-left变为marginLeft。依此类推

Js代码 复制代码
  1. my.style.fontWeight = 'bold';  
my.style.fontWeight = 'bold';

我们还可以修改其他的属性，无论这些属性是否被初始化。

Js代码 复制代码
  1. my.align = "right";   
  2. my.name = 'myname';   
  3. my.id = 'further';   
  4. my;//<p id="further" align="right" style="border: 1px solid red; font-weight: 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属性

Js代码 复制代码
  1. var myp = document.createElement('p');   
  2. myp.innerHTML = 'yet another';   
var myp = document.createElement('p');
myp.innerHTML = 'yet another';

 

元素P建完成了，就可以随意修改添加属性了

Js代码 复制代码
  1. myp.style.border = '2px dotted blue'  
 myp.style.border = '2px dotted blue'

 接下来可以用appendChild把新的节点添加到DOM树中的。

Js代码 复制代码
  1. document.body.appendChild(myp)  
document.body.appendChild(myp)

 

使用DOM的方法

用innerHTML方法的确很简单，我们可以用纯的dom方法来实现上面的功能。

  1. 新建一个文本节点(yet another)
  2. 新建一个段落
  3. 把文本节点添加到段落中。
  4. 把段落添加到body中
Js代码 复制代码
  1. // 创建p   
  2. var myp = document.createElement('p');   
  3. // 创建一个文本节点   
  4. var myt = document.createTextNode('one more paragraph')   
  5. myp.appendChild(myt);   
  6. // 创建一个STRONG元素   
  7. var str = document.createElement('strong');   
  8. str.appendChild(document.createTextNode('bold'));   
  9. // 把STRONG元素添加到P中   
  10. myp.appendChild(str);   
  11. // 把P元素添加到BODY中   
  12. document.body.appendChild(myp);   
  13. //结果<p>one more paragraph<strong>bold</strong></p>   
// 创建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，仅仅复制自己。

 

首先获取要复制的元素。

Js代码 复制代码
  1. var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>  
var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>

先不用深度复制。

Js代码 复制代码
  1. document.body.appendChild(el.cloneNode(false))  
document.body.appendChild(el.cloneNode(false))

我们发现页面并没有变化，因为仅仅复制的是元素p。和下面的效果一样。

Js代码 复制代码
  1. document.body.appendChild(document.createElement('p'));  
document.body.appendChild(document.createElement('p'));

如果用深度复制，包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。

Js代码 复制代码
  1. document.body.appendChild(el.cloneNode(true))  
document.body.appendChild(el.cloneNode(true))

 

insertBefore()

用appendChild，就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。

Js代码 复制代码
  1. elementNode.insertBefore(new_node,existing_node)  
elementNode.insertBefore(new_node,existing_node)

实例

Js代码 复制代码
  1. document.body.insertBefore(   
  2.   document.createTextNode('boo!'),   
  3.   document.body.firstChild   
  4. );  
document.body.insertBefore(
  document.createTextNode('boo!'),
  document.body.firstChild
);

意思就是新建一个文本节点，把它作为body元素的第一个节点。

 

 

删除节点

要从DOM树删除一个节点，我们可以使用removeChild().我们来看看要操作的HTML

Html代码 复制代码
  1. <body>  
  2.   <p class="opener">first paragraph</p>  
  3.   <p><em>second</em> paragraph</p>  
  4.   <p id="closer">final</p>  
  5.   <!-- and that's about it -->  
  6. </body>   
  <body>
    <p class="opener">first paragraph</p>
    <p><em>second</em> paragraph</p>
    <p id="closer">final</p>
    <!-- and that's about it -->
  </body>

来看看下面代码，删除第二段

Js代码 复制代码
  1. var myp = document.getElementsByTagName('p')[1];   
  2. var removed = document.body.removeChild(myp);   
var myp = document.getElementsByTagName('p')[1];
var removed = document.body.removeChild(myp);

removed节点就是删除的节点。以后还可以用这删除的节点。

 

我们也可以用replaceChild()方法。这个方法是删除一个节点，并用另一个节点替代。当执行上个删除节点操作之后，结果如下

Html代码 复制代码
  1. <body>  
  2.   <p class="opener">first paragraph</p>  
  3.   <p id="closer">final</p>  
  4.   <!-- and that's about it -->  
  5. </body>   
<body>
  <p class="opener">first paragraph</p>
  <p id="closer">final</p>
  <!-- and that's about it -->
</body>

 我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p

Js代码 复制代码
  1. var replaced = document.body.replaceChild(removed, p);  
var replaced = document.body.replaceChild(removed, p);

 和removeChild返回一样。replaced就是移除的节点。现在结果为

Html代码 复制代码
  1. <body>  
  2.   <p class="opener">first paragraph</p>  
  3.   <p><em>second</em> paragraph</p>  
  4.   <!-- and that's about it -->  
  5. </body>  
分享到：
| javascript对象的property和prototype是这 ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    JavaScript DOM编程艺术(中文第2版)

    第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章 ...

    JavaScript操作DOM对象 Day05

    删除：删除一个Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点。 1 获取Dom节点 获得Dom节点代码： Title 标题一 p1 p2 var h1 = document.getElementsByTagName('h1'); var p1 = document....

    浅谈Javascript中的12种DOM节点类型

    DOM的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做...

    JavaScript在浏览器标题栏上显示当前日期和时间的方法

    主要介绍了JavaScript在浏览器标题栏上显示当前日期和时间的方法,实例分析了javascript操作时间及DOM节点实现定时触发的技巧,非常具有实用价值,需要的朋友可以参考下

    JavaScript：DOM编程艺术（第2版）

    本书将这些概念贯穿在书中的所有代码示例中，以便呈现用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本，最后结合所讲述的内容创建了一个实际的网站。 《javascript dom编程艺术...

    JavaScript之DOM_动力节点Java学院整理

    由于HTML文档被浏览器解析后就是一棵... 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。 在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    这一点是没有争议的，并且在所有浏览器中的行为都是一致的，原因也不难理解：浏览器需要一个稳定的DOM结构，而JavaScript可能会修改DOM(改变DOM结构或修改某个DOM节点)，如果在JavaScript执行的同时还继续进行页面的...

    JavaScript王者归来part.1 总数2

    　12.5 访问和操纵DOM节点　 　12.5.1 打开每一个盒子--遍历节点　 　12.5.2 弄清层级关系--父子与兄弟　 　12.5.3 如何搜索特定节点　 　12.5.4 克隆节点--一个使用cloneNode()复制表格的例子　 　12.5.5 移动节点...

    :scissors:跨DOM节点截断文本-JavaScript开发

    shear.js shear.js是一个零依赖的...无需将目标元素设置为块级元素的功能，即可在目标元素内的dom节点之间截断，保持目标元素内的原始dom节点在截断零依赖项末尾插入html字符串，非常轻巧（1.9kb）浏览器支持IE

    JavaScript详解(第2版)

    　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 节点的小型快速实用程序

    domhide.js背后的想法是保留标签的尺寸并从 DOM 中删除所有标签的子级，有效地释放内存（尤其是对图像标签有用）。 Tag 的 innerHTML 属性作为注释节点插入回 DOM。 为了扭转这一点，为了揭示标签的内部结构，评论...

    JavaScript跨浏览器获取页面中相同class节点的方法

    网页开发时，在很多时候我们需要操作相同类名的元素，即...Jeremy Keuth大叔在《JavaScript DOM 编程艺术》（第2版）（英文：DOM Scripting-Web Design with JavaScript and the Document Object Model）一书的第三章第

    侦听dom节点bootcamp准备000

    已经确定，我们可以轻松地操作DOM中的“节点”，以及随意创建和删除元素。 我们知道我们可以，那么我们究竟如何互动与页面上的节点？ 好吧，我们听他们的！ 目标 演示使用addEventListener()侦听DOM节点上的事件 ...

    创建并插入dom节点bootcamp-prep-000

    创建和插入DOM节点目标在本课程结束时，您将能够以编程方式创建DOM元素将元素插入DOM 从DOM中删除元素本课程是一门代码-学习将期望看到对文件内容所做的更改以注册完成。 继续进行操作，然后复制并粘贴代码段。...

    【JavaScript源代码】Vue源码分析之虚拟DOM详解.docx

    Vue源码分析之虚拟DOM详解 　虚拟DOM就是为了解决浏览器性能问题而被设计出来的。... ----- 元素节点： 元素节点更贴近于我们通常所看到的真实DOM节点，他有描述节点标签名词的tag属性，描述节点属性

    dom-parser:使用正则表达式的dom解析器支持浏览器，节点，react-native等

    不需要节点环境或特殊的浏览器！！！ 支持react，react-native，vue等... 安装 npm install --save react-native-dom-parser 用法 import DomSelector from 'react-native-dom-parser'; const rootNode = ...

    [JavaScript.Enlightenment(2012.12)].Cody.Lindley.文字版.pdf

    通过《DOM启蒙》，读者将学习如何通过文档对象模型（DOM）更有效率地操作HTML，而无需DOM操作库的帮助。...读者将理解jQuery在DOM脚本编写中扮演的角色，并学习如何在移动应用和特定浏览器中直接使用DOM编写应用程序。

    grail:通过 CSS 选择器查找 DOM 节点的简单 JavaScript 库

    一个简单的 JavaScript 库，用于通过 CSS 选择器查找 DOM 节点。 例子 grail . find ( '#abc' ) ; grail . find ( 'div.alpha' ) ; grail . findAll ( 'div' , document . body ) ; grail . findAll ( '.alpha' ) ;...

    源文件程序天下JAVASCRIPT实例自学手册

    源文件程序天下JAVASCRIPT实例自学手册 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 ...

Magicbox
Global site tag (gtag.js) - Google Analytics