🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

XML概述

XML是Extensible Markup Language的缩写，它是一种类似于HTML的标记语言，用来描述数据的层次结构及存储数据 。

XML应用背景

XML技术已经为成为中间数据的标准格式，使用XML描述的数据可以在任何系统间进行数据交换。近年来XML已经广泛的使用在了应用开发的各个方面，当中也包含Internet。在Web开发中，XML用于描述各种各样的数据用以交换

比如流行的Ajax技术就使用XML来描述在浏览器端到服务器端的数据。

XML是一种描述数据结构的语言，与之相应的是XML语言解析器。
如果没有解析器它所描述的数据就无法理解，同时也失去了意义。
程序接口对程序员来说统称为API，最先出现针对XML的API是SAX（Simple API for XML），它是一套程序包。

SAX提供了一套基于事件的XML解析的API。
SAX解析器从XML文件的开头出发，每当遇到节点标签、文本或者其他的XML语法时，就会激发一个事件。
事件处理程序由应用开发人员编写，因此可以在事件处理程序中决定如何处理XML文件当前节点的数据。

W3C的DOM规范制定了一系列标准用于描述结构化、层次化的数据

如图

例如HTML和XML, 使用DOM接口处理XML文件是当前WEB客户端开发常用的方法，大多数浏览器都实现W3C制定的DOM接口

节点的层次

DOM以树的形式组织文档中的数据，树的结构也就是由HTML或XML文档的元素节点组成的结构。

遍历一个文档中所有结点就是遍历DOM树的操作，第一个节点使用一个Node对象来表示，该对象提供了操作节点的接口 , document是最顶层的节点，所有的其他节点都是附属于它的 。

举个栗子

XML文档节点层次如下XML代码如下

<?xml version="1.0" encoding="gb2312">            <!--XML文件开始-->
<products>                    <!--产品集合-->
    <product>                    <!--产品-->
        <name>IBM Thinkpad R61i 7732CJC</name><!--名字-->
        <price>5300</price>            <!--价格-->
    </product>                <!--产品结束-->
    <product>                    <!--产品-->
        <name>CGX</name>            <!--名字-->
        <price>100</price>            <!--价格-->
    </product>                <!--产品结束-->
</products>                    <!--产品结束-->
<customers>                    <!--客户集合-->
<customer>                <!--客户-->
    <name>Peter</name>        <!--名字-->
    <phone>123456</phone>        <!--电话-->
</customer>
<customer>                <!--客户-->
    <name>Zognan</name>        <!--名字-->
    <phone>456789</phone>        <!--电话-->
</customer>
</customers>

DOM介绍

DOM接供操作遵循DOM规范文档的能力，使用DOM来操作页面中的元素 。
诸如，更改元素显示的内容、添加删除节点、遍历统计节点、过滤特定内容等等 。
访问相关的节点

JavaScript在Web客户端的编程工作基本上都围绕DOM展开，DOM的常用操作就是创建、访问、修改各个元素节点
childNodes：每一个节点的所有下一级子节点组成一个集合，该集合作为该节点的childNodes属性

特定语言的文档模型

DOM模型是以XML为核心，所有遵循DOM规范的文档都可以使用DOM接口来处理。
但已经得到广泛应用的HTML却没有完全遵循DOM规范，因此为了能支持HTML，W3C提出针对HTML的DOM规范。

HTML DOM特性

JavaScript是动态语言，属性、方法、事件在其中称为特性。属性用于描述对象的状态，但在使用上却和事件一样，通过给事件赋予一个函数的地址即可完成绑定的任务，操作方式和给属性赋值一样。

在标准DOM中，通常使用getAttribute和setAttribute操作的特性，但特定于HTML的DOM为能更方便的操作对象的特性，将操作方式统一起来。

使用DOM

下面是Node对象的常用方法和属性:

firstChild，表示头一个子节点。
lastChild，表示最后一个子节点。
hasChildNodes()，判断是否拥有子节点。
childNodes，子节点集合。
parentNode，其父节点的引用。

检测当前HTML文档BODY标签下的所有节点，并将节点名输出 。

处理节点属性

DOM的节点对象都拥有一些从Node对象继承而来的属性，也可以拥有自己独有的属性。
属性可以用来存储一些与节点相关的数据，获取元素的属性getAttribute，设置元素的属性setAttribute(name,value)方法。

访问指定节点

DOM接口提供了更快更方便的方法访问一个指定的节点，例如通过指定节点标签名、节点名称或节点ID来获得目标节点的引用。

getElementsByTagName，该方法返回一个与指定标签名吻合的节点对象的引用
如果传入的标签名为*，则返回文档中所有的节点元素。
getElementsByName，该方法返回与指定name属性相吻合的元素集合。
getElementById，该方法返回与指定ID相同元素节点

创建新节点

DOM接口对节点的操作不仅仅只有访问，还可以为一个节点创建任意数目的子节点 。

例如

createTextNode，创建文本节点。
createDocumentFragment，创建文档碎片。
createElement，通过指定标签名创建节点(元素)

修改节点 ：在文档对象（DOM）中，可以动态的插入、删除或替换某一个节点。节点对象（Node）提供实现这些操作的方法，这方法都通过节点对象（Node）来调用。

例如

removeChild，删除一个指定的子节点。
insertBefore，在指定的子节点前插入一个子节点。
replaceChild，用一个节点替换一个指定的节点。
appendChild，在一个元素节点中创建一个元素。 

"👍点赞" "✍️评论" "收藏❤️"
大家的支持就是我坚持下去的动力!

---

如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇