DOM替换节点

最新推荐文章于 2023-08-31 13:56:59 发布

向日葵的眼里只有太阳

最新推荐文章于 2023-08-31 13:56:59 发布

阅读量1.1k

点赞数

分类专栏： DOM 文章标签： button function firefox reference 浏览器 html

本文链接：https://blog.csdn.net/smallsundoudou/article/details/7288313

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM替换节点：也就是说用新的节点把旧的节点替换掉

replaceChild()

（1）把一个给定父元素里的一个子节点替换为另外一个子节点

Var reference = element.replaceChild(newChild,oldChild);

（2）返回值是一个指向已被替换的那个子节点的引用指针

（3）如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

案例：

example05.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>example01.html</title>

  </head>

  

  <body>

        <div align="center">

           <div id="bdy">

               <select name="edu" id="edus">

                  <option value="篮球" id="lq">篮球</option>

                  <option value="足球">足球</option>

                  <option value="羽毛球">羽毛球</option>

                  <option value="游泳" id="yy">游泳</option>

               </select>

           </div>

<!—把type类型换成 button 和 checkbox 分别在IE和firefox浏览器下测试-à 

           <input type="text" id="uname"/>

        </div>

  </body>

</html>

 

<script type="text/javascript">

<!--

    //当窗体加载完毕后触发匿名函数

    window.onload = function(){

       //把type类型换成 button 和 checkbox 分别在IE和firefox浏览器下测试

       var unameNode = document.getElementById("uname");

       //unameNode.setAttribute("type","button");

       unameNode.setAttribute("type","checkbox");

       test1();

    }

    function test2(){

       //获取edus节点的name属性的值

       var edus = document.getElementById("edus");

       //getAttribute() 获取该节点的属性名称=name值

       var value = edus.getAttribute("name");

       //获取该节点的指定名称的属性节点

       var nameNode = edus.getAttributeNode("name");

       alert(nameNode.nodeName+"----"+nameNode.nodeType+"----"+value);

       //节点

       edus.setAttribute("name","pangli");

       //为节点添加属性 属性名 属性值 ""

       var value = edus.getAttribute("name");

       alert(value);

       

       function test1(){

       //找到替换节点的父节点

       var lqNode = document.getElementById("lq");

       //父节点

       var edusNode = lqNode.parentNode;

       

       var yyNode = document.getElementById("yy");

       

       //父节点

       edusNode.replaceChild(yyNode,lqNode);

       }

       test1();

    }

//-->

</script>

向日葵的眼里只有太阳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM替换节点

DOM替换节点：也就是说用新的节点把旧的节点替换掉replaceChild()（1）把一个给定父元素里的一个子节点替换为另外一个子节点Var reference = element.replaceChild(newChild,oldChild);（2）返回值是一个指向已被替换的那个子节点的引用指针（3）如果被插入的子节点还有子节点，则那
复制链接

扫一扫