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

修改节点

上面一篇我们学习了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>