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>

js例子-NodeCRUD

推荐阅读更多精彩内容