前端：JavaScript （五）XML DOM

Savannah_Wen

于 2021-03-19 15:24:32 发布

阅读量287

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_48723926/article/details/115007316

版权

都是方便用JS语言动态操作页面，XML DOM用来弥补HTML DOM的不足
🌟拥有与HTML DOM 相同的属性nodeName, nodeValue, nodeType
✨获取和遍历方式有两种：

<script>
   //获取ul中的所有li节点
   var list = document.getElementById("uid").getElementsByTagName("li");
   console.log("节点数量：",list.length);

   //通过子节点获取
   var list2 = document.getElementById("uid").childNodes;
   console.log("节点数量：",list2.length);

   //节点的遍历
  for(var i=0; i<list2.length; i++){
       //console.log(list2[i].nodeType);
       //判断是否是元素节点
    if(list2[i].nodeType == 1){
       console.log(list2[i].innerHTML); //HTML DOM获取内容
       console.log(list2[i].firstChild.nodeValue); //XML DOM获取内容
       }
   }
</script>

✨XML DOM节点的删除

   <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>

✨XML DOM节点属性操作

<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>

✨XML DOM节点的创建

   <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>

✨XML DOM节点的克隆/复制操作

    <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/11.jpg"/>
        <img src="./images/22.jpg"/>
        <img src="./images/33.jpg"/>
        <img src="./images/44.jpg"/>
    </div>
    <h4>双击图片可实现图片的添加</h4>
</body>

<script>
    //获取mid中的所有图片节点
    var list = document.getElementById("mid").getElementsTagName("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>

✨XML DOM节点的替换
同样是三步：
1）获取id属性值为did的节点对象
2）获取id属性值为mid节点中的所有图片img元素节点
3）在遍历图片节点时，绑定鼠标双击事件

<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].onclick = function(){
            //子节点替换，将克隆的图片放到指定id元素中
            did.replaceChild(this.cloneNode(),did.firstChild);
        }
    }
</script>

✨XML DOM操作select选项

    <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">黄家驹</option>
        <option value="4">迈克尔.杰克逊</option>
        <option value="5">姚贝娜</option>
        <option value="6">张雨生</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>

✨XML DOM操作table 表格

   <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>JavaScript语言中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>

Savannah_Wen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端：JavaScript （五）XML DOM

都是方便用JS语言动态操作页面，XML DOM用来弥补HTML DOM的不足????拥有与HTML DOM 相同的属性nodeName, nodeValue, nodeType✨获取和遍历方式有两种：<script> //获取ul中的所有li节点 var list = document.getElementById("uid").getElementsByTagName("li"); console.log("节点数量：",list.length); //通过子节
复制链接

扫一扫