XML DOM

最新推荐文章于 2023-06-19 23:22:53 发布
最新推荐文章于 2023-06-19 23:22:53 发布
阅读量356 收藏 1
点赞数 4
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43515837/article/details/111824106
版权

XML DOM

XML 文档对象模型定义访问和操作XML文档的标准方法。

DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。

什么是 DOM？

DOM 是 W3C（万维网联盟） 的推荐标准。

DOM 定义了访问诸如 XML 和 XHTML 文档的标准。

“W3C 文档对象模型（DOM）是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。”

W3C DOM 被分为 3 个不同的部分/级别（parts / levels）：

  • 核心 DOM
    用于任何结构化文档的标准模型
  • XML DOM
    用于 XML 文档的标准模型
  • HTML DOM
    用于 HTML 文档的标准模型

DOM 定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。

您可以在我们的 W3C 教程 中获得更多有关 W3C DOM 规范/级别的信息。

什么是 XML DOM?

XML DOM 是：

  • 用于 XML 的标准对象模型
  • 用于 XML 的标准编程接口
  • 中立于平台和语言
  • W3C 的标准

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。

换句话说：

XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

XML DOM 节点

XML 文档中的每个成分都是一个节点。

节点

根据 DOM，XML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

  • 整个文档是一个文档节点
  • 每个 XML 标签是一个元素节点
  • 包含在 XML 元素中的文本是文本节点
  • 每一个 XML 属性是一个属性节点
  • 注释属于注释节点

XML DOM节点的遍历

<!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>
    <ul id="uid">
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>宋小宝</li>
    </ul>
</body>
<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>
</html>

XML DOM节点的删除

   <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的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节点属性操作

<!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节点创建

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的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 节点克隆

   <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的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/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").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节点的替换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的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/11.jpg"/>
        <img src="./images/22.jpg"/>
        <img src="./images/33.jpg"/>
        <img src="./images/44.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选项

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript中的XML DOM</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">黄家驹</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>
    </html>

XML DOM操作的table操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</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>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>
</html>
TLQHT
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
学习XML DOM---解析XML文档的典型模型
DongZhaoCheng
11-28 569
书接上文：关于XML的结构、特点、属性 XML DOM学习笔记 如果希望解析、读取、写入XML，那么就要学习XML DOM 1.XML DOM是啥？ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWipgqGw-1638092479646)(E:\015.2MarkDown笔记\image-20211125104113944.png)] XML DOM 定义了所有XML元素的对象和属性，以及访问他们的方法(接口) XML DOM 是用于获取、更改、添加、删除XML元素的标
10分钟掌握Python xml.dom
weixin_40212662的博客
05-28 2874
前言 文章的目的是使读者快速掌握Python xml.dom的基本功能，10分钟学会使用xml.dom完成xml的读写。 文章中包含大量的代码示例，可以直接引用到工作项目中，提升开发效率。 Python xml.dom是什么？ xml是Python标准库的一员，专门处理xml文件的数据处理。xml库中包含了许多处理xml文件数据的子库，xml.dom就是其中一个。 既然使标准库的一部分，就不需要额外安装了。 xml文件的结构 既然是处理xml文件的，那么我们还是先来看看标准的xml文件是什么样
XML( 可扩展编辑语言 ) —— DOM解析
让优秀成为一种习惯！
06-19 632
1. 什么是DOM ? 用于 XML 的标准对象模型 用于 XML 的标准编程接口 中立于平台和语言 W3C 标准 XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。 换句话来说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。 2. 节点 根据 DOM，XML 文档中的每个成分都是一个节点。 整个文档是一个文档节点 每个 XML 元素是一个元素节点 包含在 XML 元素中的文本是文本节点 每一个 XML 属性是一个属性节点
[每天一个python小技巧] Python中的XML解析（DOM）
Monster_H7的博客
12-28 1024
前言： 在工作任务中遇到了需要将XML中的标签信息提取并判断是否与文件标签名匹配的问题，那么首先解析XML是关键的一步，该文就此讨论 1.什么是XML？ XML 指可扩展标记语言（eXtensible Markup Language）。 XML 被设计用来传输和存储数据。 XML 是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。 它也是元标记语言，即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。 2.Python解析XML的常见的方式 常见的 XM
xmldom
02-14
“＃xmldom”
XMLDOM.rar_DOM_xml
09-22
XMLDOM对象方法手册 XMLDOM对象方法手册 XMLDOM对象方法手册
xmldom.zip
01-24
在写微信小程序的时候，遇到需要解析xml格式的文件时，这个工具会对你有帮助的
xmldom4j解析
03-31
xml解析，dom4j解析，xml循环节点处理，java代码 jar包执行20190331.rar
易语言模块 XMLDOM 解析 构造 获取 更改 添加 删除 遍历元素 格式化XML
04-11
示例源码： ...什么是 XML DOM？ XML DOM 是： 用于 XML 的标准对象模型 用于 XML 的标准编程接口 中立于平台和语言 W3C 标准 XML DOM 定义了所有 XML 元素...5、XMLDOM教程文档推荐参考：https://www.w3cschool.cn/xmldom
XML——XML解析之DOM
Gavin
06-16 2302
本文介绍了XML解析的基本概念，并重点介绍了使用JAXP的DOM技术进行XML文档的解析
简单XMLDOM解析
wenhuabuzhijian的博客
07-11 274
文章目录一、XML是什么？1.XML语法2.解析方式二、DOM解析实例： 一、XML是什么？ 可扩展标记语言，标准通用标记语言的子集，简称XML。是一种用于标记电子文件使其具有结构性的标记语言。和HTML是同宗， Xml文件标签可以进行自定义 对大小写敏感 主要用于存储数据。 1.XML语法 双标签 xml文件语法格式比较严格 有开必有关 大小写敏感 <department></department> ----Element ---Tag 标签节点(双标签) Id=”110”
XML DOM摘要一(XML DOM介绍和解析)
zp19860529的博客
07-01 401
XML 文档对象模型（XML DOM，XML Document Object Model 的缩写）定义访问和操作XML文档的标准方法。DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。 XML DOM结节树： XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树。 可通过这棵树访问所有节点。可以修改或删除它们的内容，也可以创建新的元素。 这颗节点树展示了节点的集合，以及它们之间的联系。这棵树从根节点开始，然后在树的最低层级向文本节点长出枝条： 什...
XML解析之DOM解析
WL1234567891的博客
01-07 2487
xml文件的DOM解析
XML解析之DOM解析详解
热门推荐
a1353206432的博客
06-05 2万+
一、概念 xml文件多用于信息的描述，所以在得到一个xml文档之后按照xml中的元素取出对应的信息就是xml的解析。Xml解析有两种方式，一种是DOM解析，另一种是SAX解析，两种操作的方式如图。       二、DOM解析   基于DOM解析的xml分析器是将其转换为一个对象模型的集合，用树这种数据结构对信息进行储存。通过DOM接口，应用程序可以在任何时候访问xml文档中的任何...
xml.dom的基本操作
lzboy123的博客
02-24 204
DOM -一个XML文件在缓存中以树形结构保存，读取 -用途 -定位浏览xml任何一个节点信息 -添加删除相应内容 -minidom -minidom.parse(filename):加载读取的xml文件，filename也可以是xml代码 -doc.documentElement：获取xml文档对象，一个xml文件只有一个对于的文档对象 -node.getAttribute(attr_name)...
python xml文件读写使用之xml.dom.minidom
Potential
11-13 8292
XML文件读写xml结构xml和dom读取指定字符串写xml文件 xml结构 xml的结果性关系包括节点关系及属性内容 xml的基本单位是元素，开始标记，属性，结束标记组成 〈?xml version="1.0" encoding="gb2312" ?〉 　　〈参考资料〉 　　 〈书籍〉 　　 〈名称〉xml入门精解〈/名称〉 　　 〈作者〉张三〈/作者〉 　　 〈价格 货币单位="人民币"〉20.00〈/价格〉 　　 〈/书籍〉 　　 〈书籍〉 　　 〈名称〉xml
XML文件和DOM简单操作
qq_51810428的博客
08-25 452
XML简介 XML文档结构 XML标签 解析XML技术 XML编写注意事项 DOM解析XML 编写XML步骤
XML DOM摘要二(XML DOM节点、属性、方法介绍)
zp19860529的博客
07-01 954
编程接口 DOM 把 XML 模拟为一系列节点接口。可通过 JavaScript 或其他编程语言来访问节点。在本教程中，我们使用 JavaScript。 对 DOM 的编程接口是通过一套标准的属性和方法来定义的。 属性经常按照“某事物是什么”的方式来使用（例如节点名是 "book"）。 方法经常按照“对某事物做什么”的方式来使用（例如删除 "book" 节点）。 XML DOM 属性 一些典型的 DOM 属性： x.nodeName - x 的名称 x.nodeValue - x 的值 x
egret xmldom.js
最新发布
12-30
egret xmldom.js是一个用于处理XML文档的开源JavaScript库。它提供了一组简单而强大的API，使得XML文档的解析和操作变得更加容易和高效。 这个库可以帮助开发人员处理XML文档中的节点、属性和文本内容，以及进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值