JavaScript-XML DOM

最新推荐文章于 2021-03-19 15:24:32 发布

难平是人心

最新推荐文章于 2021-03-19 15:24:32 发布

阅读量122

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Just__2009/article/details/108932981

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

XML DOM节点的遍历

XML DOM通过childNodes来获取所有子节点，此方法获取的节点包含空白文本节点。需要进行判断过滤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML DOM 遍历</title>
</head>
<h1>XML DOM 遍历</h1>
<body>
    <ul id="uid">
        <li>张三</li>
        <li>李四</li>
        <li>王二</li>
        <li>麻子</li>
       
    </ul>
    
</body>
<script>
    //获取ul中的所有li节点
    var mList = document.getElementById("uid").getElementsByTagName("li");
    console.log("节点数量"+mList.length);//节点数量4
    //通过子节点获取
    var children = document.getElementById("uid").childNodes;
    console.log("节点数量"+children.length);//节点数量9（由于存在空白文本节点）
    //节点的遍历
    for(var i = 0 ;i<children.length;i++){
        //判断是否是元素节点
        if(children[i].nodeType == 1){
            // console.log(children[i].nodeType);
            console.log(children[i].innerHTML);//HTML DOM获取内容
            console.log(children[i].firstChild.nodeValue);//XML DOM获取内容
        }
    }

</script>
</html>

XML DOM节点的删除

要点：

获取所有要删除的节点。
XML DOM中删除要使用其父节点下的removeChild（删除对象）方法，（可以通过parentNode获取其父节点）。
删除多个时注意循环中的元素数量变化，指示数须自减1。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML DOM节点的删除</title>
    <style>
        ul{list-style:none;}
        ul li{line-height:30px;background-color:#ddd;margin-top:2px;}
        ul li:hover{background-color:#fc0;}
        ul li.cc{background-color:#f0c;}
    </style>
</head>
<body>
    <h1>XML DOM节点的删除</h1>
    <ul id="uid">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>七</li>
        <li>八</li>
    </ul>
    <button onclick="doDel()">删除</button>
</body>
<script>
   //获取所有ul中的li节点并绑定点击事件
   var list = document.getElementsByTagName("li");
   for(var i=0; i<list.length; i++){
       list[i].onclick = function(){
           this.setAttribute("class","cc");
       }
   }

   //执行节点删除函数
   function doDel(){
       var list2 = document.getElementsByTagName("li");
       //遍历
       for(var i=0; i<list2.length; i++){
           //判断当前li是否有class属性值为cc的
           if(list2[i].getAttribute("class")=="cc"){
               //执行删除
               list2[i].parentNode.removeChild(list2[i]);
               //避免多选删除时列表长度变更导致的漏删
               i--;
           }
       }
   }
</script>
</html>

XML DOM节点属性操作

当向元素标签中添加非HTML属性时，HTML DOM 将不再支持，此时XML DOM的特点就体现出来。可以通过setAttribute（“属性类型”,“属性值”）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</title>
</head>
<body>
    <h1>XML-DOM：改变节点的属性</h1>
    <a id="aid" href="http://www.baidu.com">百度</a>
</body>
<script>
    //获取上面超链接a元素节点
    var a = document.getElementById("aid");
    //通过已知的HTML DOM操作a节点属性
    console.log(a.href);
    a.title="百度网址";
    //a.aa = "bb"; //添加aa属性值为bb 无效的

    //使用XML DOM操作节点a的属性
    console.log(a.getAttribute("href"));
    a.setAttribute("aa","bb"); //通过XML DOM可以添加任何属性和值
</script>
</html>

XML DOM节点的创建

创建一个新节点中的文本节点。
创建一个新节的元素节点。
将文本节点通过父节点的appendChild()方法向后添加。
获取原节点列表的父节点，将创建好的元素节点再次通过appendChild()方法添加到其子节点的末尾。
若要向前添加，则使用insertBefore(“新元素”,“目标位置元素”)则新元素添加到目标位置元素之前。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML DOM节点的创建</title>
    <style>
        ul{list-style:none;}
        ul li{line-height:30px;background-color:#ddd;margin-top:2px;width:100px;}
    </style>
</head>
<body>
    <h1>XML DOM节点的创建</h1>
    <ul id="uid">
        <li>张三</li>
        <li>李四</li>
        <li>王二</li>
        <li>麻子</li>
    </ul>
    名称：<input id="nid" type="text" size="10" name="name"/>
    <button onclick="doAdd()">添加</button>
</body>
<script>
    function doAdd(){
        //获取输入框中的信息
        var name = document.getElementById("nid").value;
        //获取ul元素节点对象
        var ul = document.getElementById("uid");
        //创建一个文本节点
        var tt = document.createTextNode(name);
        //创建一个元素节点
        var li = document.createElement("li"); //<li></li>
        //将文件节点添加到li元素节点中
        li.appendChild(tt);
        //将li节点添加到ul中
        //ul.appendChild(li); //后追加
        ul.insertBefore(li,ul.firstChild); //前插入
    }
</script>
</html>

XML DOM节点的克隆

XML DOM中每个节点是一个对象，通过appendChild()方法将一个对象添加到另一个节点中时，原节点中的对象会消失。所以如果想要添加的同时对原节点中的对象进行保留。要用到.cloneNode() 方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML DOM节点的克隆</title>
    <style>
        #did{width:400px;height:300px;border:1px solid blue;}
        img{width:80px;border:2px solid #fff;margin:2px;}
        img:hover{border:2px solid red;}
    </style>
</head>
<body>
    <h1>XML DOM节点的克隆</h1>
    <div id="did"></div>
    <div id="mid">
        <img src="./images/1.jpg"/>
        <img src="./images/2.jpg"/>
        <img src="./images/3.jpg"/>
        <img src="./images/4.jpg"/>
    </div>
    <h4>双击图片可实现图片的添加</h4>
</body>
<script>
    //获取mid中的所有图片节点
    var list = document.getElementById("mid").getElementsByTagName("img");
    //遍历添加鼠标双击事件
    for(var i=0; i<list.length; i++){
        list[i].ondblclick = function(){
            //获取did节点
            var did = document.getElementById("did");
            //将当前图片节点克隆一份添加到did元素节点中
            did.appendChild(this.cloneNode());
        }
    }
</script>
</html>

XML DOM节点的替换

replaceChild(新节点,被替换节点）将当前节点替换目标节点中的第一个子节点。
替换时如要保留替换节点，需要对替换节点进行克隆。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML DOM节点的替换</title>
    <style>
        #did{width:400px;border:1px solid blue;}
        #did img{width:400px;}
        #mid img{width:80px;border:2px solid #fff;margin:2px;}
        #mid img:hover{border:2px solid red;}
    </style>
</head>
<body>
    <h1>XML DOM节点的替换</h1>
    <div id="did"><img src="./images/11.jpg"/></div>
    <div id="mid">
        <img src="./images/1.jpg"/>
        <img src="./images/2.jpg"/>
        <img src="./images/3.jpg"/>
        <img src="./images/4.jpg"/>
    </div>
    <h4>双击图片可实现图片的替换</h4>
</body>
<script>
    //获取id属性值为did的节点对象
    var did = document.getElementById("did");
    //获取id属性值为mid节点中的所有图片img元素节点
    var list = document.getElementById("mid").getElementsByTagName("img");
    //遍历图片节点，并绑定鼠标双击事件
    for(var i=0; i<list.length; i++){
        list[i].ondblclick = function(){
            did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换
        }
    }
</script>
</html>

XML DOM操作select选项

获取下拉框中的所有元素。
遍历下拉框中所有元素，找到被选中的元素。
取消其选中属性
获取目标下拉框的节点。
通过appendChild()方法在目标下拉框中添加选中元素。
对于多选操作，要防止数组长度变动导致的漏操作，指示数自减。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML DOM操作select选项</title>
    <style>
        select{width:100px;height:200px;border:1px solid #ddd;float:left;}
        div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
    </style>
</head>
<body>
    <h1>XML DOM操作select选项</h1>
    <select id="sid1" size="10" multiple>
        <option value="0">周杰伦</option>
        <option value="1">林俊杰</option>
        <option value="2">黄家驹</option>
        <option value="3">Allen Walker</option>
        <option value="4">迈克尔.杰克逊</option>
       
    </select>
    <div>
        <button onclick="doMove('sid1','sid2')">>></button>
        <br/><br/><br/><br/>
        <button onclick="doMove('sid2','sid1')"><<</button>
    </div>
    <select id="sid2" size="10" multiple></select>
</body>
<script>
   function doMove(d1,d2){
       //获取对应的下拉框节点对象
       var select1 = document.getElementById(d1);
       var select2 = document.getElementById(d2);
       //获取第一个下拉框中的所有option下拉项节点对象
       var list = select1.getElementsByTagName("option");
       //遍历并判断是否选中
       for(var i=0; i<list.length; i++){
           if(list[i].selected){
               list[i].selected = false;
               select2.appendChild(list[i]); //使用XML DOM移动下拉项
               i--;
           }
       }
   }
</script>
</html>

XML DOM操作table表格

删除：获取删除对象的父节点（一层或多层），通过父节点对象调用removeChild(“删除的对象”)方法.
添加：

获取表单信息。
将表单信息存入变量/数组中。
通过循环的方式创建一个或多个文本节点。
创建一个或多个元素节点。
将文本节点通过appenChild()嵌套入元素节点中。
直接通过.innerHTML=" "添加删除按钮。
重置表单中信息。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML DOM操作table表格</title>
    <style>
        select,option,div,button{margin:0px;padding:0px;}
        #lid,#rid,div{
            width:80px;
            height:260px;
            float:left;
        }
        div{
            text-align:center;
            padding-top:60px;
        }
    </style>
</head>
<body>
    <h1>XML DOM操作table表格</h1>
    <table id="tid" width="500" border="1">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>女</td>
                <td>21</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1003</td>
                <td>王五</td>
                <td>男</td>
                <td>22</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <br/><br/><br/>
    <h2>添加学生信息</h2>
    <form action="#" name="myform" onsubmit="return doAdd()">
        学号：<input type="text" name="sno"/><br/><br/>
        姓名：<input type="text" name="name"/><br/><br/>
        性别：<input type="text" name="sex"/><br/><br/>
        年龄：<input type="text" name="age"/><br/><br/>
        <input type="submit" value="添加"/>
    </form>
</body>
<script>
   //执行数据删除操作
   function dodel(bt){
      bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode);
   }
   
   function doAdd(){
       //获取表单信息
       var data = new Array();
       data[0] = document.myform.sno.value;
       data[1] = document.myform.name.value;
       data[2] = document.myform.sex.value;
       data[3] = document.myform.age.value;
       //获取tbody元素节点对象
       var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0];
       //创建一个元素节点tr
       var tr = document.createElement("tr");
       //遍历数据并创建td节点
       for(var i=0; i<data.length; i++){
           var td = document.createElement("td");
           var text = document.createTextNode(data[i]);
           td.appendChild(text);
           tr.appendChild(td);
       }
       //添加删除按钮
       var td = document.createElement("td");
       td.innerHTML = '<button οnclick="dodel(this)">删除</button>';
       tr.appendChild(td);
       //将行节点tr放置到tbody中
       tbody.appendChild(tr);

       //清空表单
       document.myform.reset();

       return false;
   }
</script>
</html>

难平是人心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-XML DOM

XML DOM节点的遍历XML DOM通过childNodes来获取所有子节点，此方法获取的节点包含空白文本节点。需要进行判断过滤。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫