Javascript入门学习第七篇 js dom实例操作第1/2页

 更新时间:2008年07月06日 10:02:12   作者:  
上篇文章我们讲了 用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");
}

相关文章

  • ECMAScript6入门教程

    ECMAScript6入门教程

    本文详细讲解了ECMAScript6的基础教程,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • document.open() 与 document.write()

    document.open() 与 document.write()

    document.open() 与 document.write()...
    2006-10-10
  • javaScript基础语法介绍

    javaScript基础语法介绍

    本文从javascript简介开始,介绍了javascript的语法以及注意事项、动态语言、引用外部JS文件、变量命名规则、判断是否已经声明、不存在块级作用域这些方面的内容,是篇相当不错的基础语法的介绍文章,推荐给小伙伴们
    2015-02-02
  • Javascript的this详解

    Javascript的this详解

    这篇文章主要介绍了Javascript的this的作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • ES6基础语法之class类介绍

    ES6基础语法之class类介绍

    这篇文章介绍了ES6中class类的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • JavaScript的学习入门整理篇

    JavaScript的学习入门整理篇

    每次刚开始学语言时,作者都喜欢用“hello world”例子l来侮辱我们的智商,我想大家都不是笨蛋,故而寥寥数笔写了一点
    2008-09-09
  • 浅析Javascript ES6中的原生Promise

    浅析Javascript ES6中的原生Promise

    ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界。正所谓世界本没有回调,写的人多了也就有了。接下来就来简单介绍Javascript ES6中的原生Promise,有需要的可以参考借鉴。
    2016-08-08
  • JavaScript 学习笔记之语句

    JavaScript 学习笔记之语句

    这篇文章主要介绍了JavaScript中的语句,包括条件分支语句、循环语句、迭代语句、Lable语句、break和continue语句、with语句、swith语句,十分全面细致,推荐给小伙伴们。
    2015-01-01
  • JS JSON.stringify()的5个使用场景详解

    JS JSON.stringify()的5个使用场景详解

    JSON.stringify()方法用于将一个值转为JSON字符串,该字符串符合JSON格式,并且可以被JSON.parse()方法还原,下面这篇文章主要给大家介绍了关于JS JSON.stringify()的5使用场景,需要的朋友可以参考下
    2023-01-01
  • JavaScript中的关键字"VAR"使用详解 分享

    JavaScript中的关键字"VAR"使用详解 分享

    JScript的语法教程里面说在声明变量时忽略var关键字是完全合法的。但是事实常常又证明想当然的结果是不可靠的。
    2013-07-07

最新评论