Javascript入门学习第九篇 Javascript DOM 总结第1/2页

时间：2021-05-26

1，创建节点。
createElement():
vara=document.createElement(“p”);
它创建的是一个元素节点，所以nodeType等于1。
a.nodeName将返回p;
注意；createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。所以它也没有nodeParent属性。
如果想把它添加到文档里，可以使用appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中，自己写了一个insertAfter()方法;
比如：
vara=document.createElement(“p”);
document.body.appendChild(a);
注意：appendChild()默认是添加到文档的最后。也就是lastChild子节点。
如果想添加到某个地方，可以使用insertBefore()。
如果想在元素插入之前给元素添加属性。可以这么做：
vara=document.createElement(“p”);
a.setAttribute(“title”,”mydemo”);
document.body.appendChild(a);

createTextNode():
varb=document.createTextNode(“mydemo”);
它创建的是一个文本节点，所以nodeType等于3。
b.nodeName将返回#text;
跟createElement()一样，用createTextNode()创建的节点也不会自动添加到文档里。需要使用appendChild()或者insertBefore()方法或者replaceChild()方法。
他经常与createElement()配合使用，知道为什么吗？（一个元素节点，一个文本节点。）
varmes=document.createTextNode(“helloworld”);
varcontainer=document.createElement(“p”);
container.appendChild(mes);
document.body.appendChild(container);


2，复制节点。
cloneNode(boolean):
它有一个参数。
varmes=document.createTextNode("helloworld");
varcontainer=document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);
varnewpara=container.cloneNode(true);//true和false的区别
document.body.appendChild(newpara);
注意：
true的话：是<p>aaaa</p>克隆。
false：只克隆<p></p>，里面的文本不克隆。
可以自己写个例子，然后用firebug看看。

克隆后的新节点，和createTextNode()一样不会被自动插入到文档。需要appendChild();
另外还有一个注意：如果克隆后，id一样，不要忘记用setAttribute(“id”,“another_id“);
改变新的节点的ID。

3，插入节点。
appendChild():
给元素追加一个子节点，新的节点插入到最后。
varcontainer=document.createElement("p");
vart=document.createTextNode("cssrain");
container.appendChild(t);
document.body.appendChild(container);
他经常跟createElement()和createTextNode(),cloneNode()配合使用。
另外appendChild()不仅可以用来追加新的元素，也可以你挪动文档中现有的元素。
看下面的例子：
<pid="msg">msg</p>
<pid="content">content</p>
<pid="aaa">aaaaaaaa</p>
<script>
varmes=document.getElementById("msg");
varcontainer=document.getElementById("content");
container.appendChild(mes);
</script>
//发现msg放到content后面去了。
Js内部处理方式：
先把ID为msg的从文档中删除，然后再插入到content后，作为content的最后一个节点。
结果为：
<pid="content">
content
<pid="msg">msg</p>
</p>
<pid="aaa">aaaaaaaa</p>

insertBefore():
顾名思义，就是把一个新的节点插入到目标节点的前面。
Element.insertBefore(newNode,targerNode);

第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，相当于appendChild();
我们看看insertBefore()怎么使用：
<divid="cssrian">
<pid="content">1111</p>
<divid="msg">msg<div>test</div></div>
<pid="content">222</p>
<pid="aaa">aaaaaaaa</p>
</div>
<script>
varmsg=document.getElementById("msg");
varaaa=document.getElementById("aaa");
vartest=document.getElementById("cssrian");
test.insertBefore(msg,aaa);
</script>
//我们发现ID为msg的插入到了aaa的前面。
Js内部处理方式跟appendChild()相似。


4，删除节点。
removeChild():
<body>
<divid="cssrain">
<divid="a">a</div>
<divid="b">b</div>
<divid="c">c</div>
</div>
</body>
<script>
varmsg=document.getElementById("cssrain");
varb=document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要删除的节点的父节点是什么？可以使用parentNode属性。
比如：
<body>
<divid="cssrain">
<divid="a">a</div>
<divid="b">b</div>
<divid="c">c</div>
</div>
</body>
<script>
varb=document.getElementById("b");
varc=b.parentNode;
c.removeChild(b);
</script>

注意：你如果想把某个节点从一处移动到另一个地方，不必使用removeChild（）。
可以使用前面的appendChild()和insertBefore(),他们都会自动先删除节点，然后移动到你指定的地方。、


5，替换节点。
Element.repalceChild(newNode,oldNode);
OldNode必须是Element的一个子节点。
<body>
<divid="cssrain">
<divid="a">a</div>
<divid="b">b</div>
<divid="c">c</div>
</div>
</body>
<script>
varcssrain=document.getElementById("cssrain");
varmsg=document.getElementById("b");
varpara=document.createElement("p");
cssrain.replaceChild(para,msg);
</script>

12下一页阅读全文

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章