🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
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，在一个元素节点中创建一个元素。
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️ 说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇
