Javascript入门学习第七篇 js dom实例操作


直接从方法说起:
1, 删除节点。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。
比如:
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>

2, 替换节点。repalceChild()
element.repalceChild( newNode , oldNode ); // 新节点是客人,肯定先服务他咯。。oldNode必须是Element的一个子节点。
例子:
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg = document.getElementById("b");
var para = document.createElement("p");
cssrain.replaceChild( para , msg );
</script>

3,查找节点
相对上面的方法,查找节点是比较简单的。
因为很多人都用过。(记得我认识js的第一句就是getElementById();)
getElementById();
返回一个对象, 对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。

getElementsByTagName() 查找标签名的所有元素。
返回一个集合,可以用循环取出每个对象,对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。
例子:
var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
ps[i].setAttribute(“title”,”hello”);
//也可以使用: ps.item(i).setAttribute("title","hello");
}
直接从方法说起:
1, 删除节点。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。
比如:
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>

2, 替换节点。repalceChild()
element.repalceChild( newNode , oldNode ); // 新节点是客人,肯定先服务他咯。。oldNode必须是Element的一个子节点。
例子:
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg = document.getElementById("b");
var para = document.createElement("p");
cssrain.replaceChild( para , msg );
</script>

3,查找节点
相对上面的方法,查找节点是比较简单的。
因为很多人都用过。(记得我认识js的第一句就是getElementById();)
getElementById();
返回一个对象, 对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。

getElementsByTagName() 查找标签名的所有元素。
返回一个集合,可以用循环取出每个对象,对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。
例子:
var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
ps[i].setAttribute(“title”,”hello”);
//也可以使用: ps.item(i).setAttribute("title","hello");
}

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3