js例子-NodeCRUD

什么是dom?
dom的本质就是将文档中所有的内容封装成对象
从这个例子中可以学到如何操作利用dom操作html页面标签(crud),添加属性,内容,其中还用到了dhtml中的一些属性,另外增删改都要用到.parentNode;找到父元素,通过父元素对实现子元素修改。
学习查询使用W3School和DHTML

<pre>

<!DOCTYPE html>
<html>
  <head>
    <title>NodeCRUDl.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        div {
            border:#0099FF 1px solid;
            height:60px;
            width:120px;
            margin:20px 0px 20px 20px;
            padding:10px 0px 0px 20px;
            }
            
        #div_1{
            background-color:#00FFFF;
            }
            
        #div_2{
            background-color:#FF3399;
            }
            
        #div_3{
            background-color:#0000FF;
            }
            
        #div_4{
            background-color:#FFFF66;
            }
</style>
    
  </head>
  
  <body>
      <div id="div_1">
        
    </div>
    
    <div id="div_2">
    div区域2
    </div>
    
    <div id="div_3">
     div区域3
    </div>
    
    
    
    <div id="div_4">
    div区域4
    </div>
    
    
    <hr />
    <input type="button" value="创建并添加节点" onclick="addNode()" />
    <input type="button" value="删除节点" onclick="deleteNode()" />
    <input type="button" value="替换节点" onclick="updateNode()" />
    <input type="button" value="克隆节点" onclick="copyNode()" />
  
  </body>
    
    <script type="text/javascript">
            function addNode(){
                var a =document.createElement("a");
                a.setAttribute("href","http://www.baidu.com");
                a.innerHTML ="点我";
                var div_1 =document.getElementById("div_1");
                div_1.appendChild(a);
            }
            
        //删除节点
        //增删改都要通过父元素进行
            function deleteNode(){
                //1 获得要删除的div
                var div_2 = document.getElementById("div_2");
                //2 获得div的父元素
                var parent = div_2.parentNode;
                //3 通过爹删除孩子
                parent.removeChild(div_2);
            }
        //替换节点
            function updateNode(){
                //1 获得被替换的div
                var div_3 = document.getElementById("div_3");
                //2 创建img元素对象<img />
                var img = document.createElement("img");
                //3 为img添加属性
                img.setAttribute("src", "mn.png");
                img.setAttribute("width", "300");
                //4 找到爹
                var parent = div_3.parentNode;
                //5 替换
                parent.replaceChild(img, div_3);
            }
        //克隆节点
            function copyNode(){
                // 1.获得div4
                var div_4 = document.getElementById("div_4");
                // 2.调用克隆方法克隆
                var div_copy = div_4.cloneNode(true);
                // 3.获得父亲\
                var parent = div_4.parentNode;
                // 4.添加到最后一个div之前
                //parent.appendChild(div_copy);
                parent.insertBefore(div_copy, div_4);
            }

    </script>
</html>

</pre>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,779评论 18 399
  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 4,535评论 2 61
  • 感恩今天去最好的酒店吃饭,感恩我的钱宝宝,感恩同桌阿姨的照顾,感恩这些美味的食物,感恩清爽的用餐环境,感恩蕊蕊很开...
    李馨兰阅读 227评论 1 0
  • 文/ 绿骏马 早晨醒来,乌鲁木齐在雪里,路边的街灯在细密的雪雾里发着淡黄色的光,远处的高楼忽隐忽现。这是进入冬季的...
    绿骏马sja阅读 244评论 0 0
  • 女人,为了跟岁月抗争,以望留住短暂的青春,也是拼劲了力气。然而耗费大量光阴,散出大把银子,付出的艰辛与所得成效是否...
    白墨迹阅读 878评论 0 3