（1）核心DOM：遍历DOM树、添加新节点、删除节点、修改节点
（2）HTML
DOM：以一种简便的方法访问DOM树
（3）XML
DOM：准用于 *** 作XML文档
1.文档对象模型（DOM）DOM是HTML和XML文档的编程基础，它定义了处理执行文档的途径。编程者可以使用DOM增加文档、定位文档结构、填加修改删除文档元素。W3C的重要目标是把利用DOM提供一个使用于多个平台的编程接口。W3C
DOM被设计成适合多个平台，可使用任意编程语言实现的方法。
2.节点接口
XML
parser用来装载XML文档到缓存中，文档装载时，可以使用DOM进行检索和处理。DOM采用树形结构表示
XML文档，文档元素是树的最高阶层，该元素有一个或多个孩子节点用来表示树的分枝。
节点接口程序通常用来读和写XML节点树中的个别元素，文档元素的孩子节点属性可以用来构造个别元素节点。XML
parser用来证明Web中的DOM支持遍历节点树的所有函数，并可通过它们访问节点和及其属性、插入删除节点、转换节点树到XML中。
所有Microsoft
XML
parser函数得到W3C
XML
DOM的正式推荐，除了load和loadXML函数（正式的DOM不包括标准函数loading
XML文档）。有13个节点类型被Microsoft
XML
parser支持，下面列出常用节点：
节点类型
例子
Document
type
<!DOCTYPE
food
SYSTEM
"food.dtd">
Processing
instruction
<?xml
version="1.0"?>
Element
<drink
type="beer">Carlsberg</drink>
Attribute
type="beer"
Text
Carlsberg
3.使用XML
parser
为了更加熟练的处理XML文档，必须使用XML
parser。Microsoft
XML
parser是IIS5.0所带的一个COM组件，一旦安装了IIS5.0，parser可以利用HTML文档和ASP文件中的脚本。
Microsoft
XMLDOM
parser支持以下编程模式：
----支持
JavaScript,
VBScript,
Perl,
VB,
Java,
C++
等等
----支持
W3C
XML
1.0
和
XML
DOM
----支持
DTD
和
validation
如果使用IE5.0中的JavaScript，可以使用下面的XML文档对象：
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
如果使用VBScript，可以使用下面的XML文档对象：
set
xmlDoc
=
CreateObject("Microsoft.XMLDOM")
如果使用ASP，可以使用下面的XML文档对象：
set
xmlDoc
=
Server.CreateObject("Microsoft.XMLDOM")
4.装载一个XML文件到parser中
下面的代码装载存在的XML文档进入XML
parser:
<script
language="JavaScript">
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
//
.......
processing
the
document
goes
here
</script>
第一行脚本增加了一个Microsoft
XML
parser实例，第三行装载名为”note.xml”的XML文档进入parser中。第二行保证文档装载完成以后parser进行下一步工作。
5.
parseError对象
打开XMl文档时，XML
Parser产生错误代码，并存在parseError对象中，包括错误代码、错误文本和错误行号，等信息。
6.文件错误
下面的例子将试图装载一个不存在的文件，然后产生相应的错误代码：
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("ksdjf.xml")
document.write("<br>Error
Code:
")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error
Reason:
")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error
Line:
")
document.write(xmlDoc.parseError.line)
7.XML错误
下面使用不正确的格式装载XMl文档，
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note_error.xml")
document.write("<br>Error
Code:
")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error
Reason:
")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error
Line:
")
document.write(xmlDoc.parseError.line)
8.
parseError属性
属性描述：
errorCode
返回长整型错误代码
reason
返回字符串型错误原因
line
返回长整型错误行号
linePos
返回长整型错误行号位置
srcText
返回字符串型产生错误原因
url
返回url装载文档指针
filePos
返回长整型错误文件位置
9.遍历节点树
一种通用的析取XML文档的方法是遍历节点树和它的元素值。下面是使用VBScript写的遍历节点树的程序代码：
set
xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
for
each
x
in
xmlDoc.documentElement.childNodes
document.write(x.nodename)
document.write(":
")
document.write(x.text)
next
10.为XML文件提供HTML格式
XML的一个优点是把HTML文档和它的数据分离开。通过使用浏览器中的XML
parser，HTML页面可以被构造成静态文档，通过JavaScript提供动态数据。下面的例子使用JavaScript读取XML文档，写XML数据成HTML元素：
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
nodes
=
xmlDoc.documentElement.childNodes
to.innerText
=
nodes.item(0).text
from
.innerText
=
nodes.item(1).text
header.innerText
=
nodes.item(2).text
body.innerText
=
nodes.item(3).text
11.通过名称访问XML元素
下面的例子使用JavaScript读取XML文档，写XML数据成HTML元素：
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
document.write(xmlDoc.getElementsByTagName("from").item(0).text)
12.装载纯XML文本进入parser
下面的代码装载文本字符串进入XML
parser
：
<script
language="JavaScript">
var
text="<note>"
text=text+"<to>Tove</to><from>Jani</from>"
text=text+"<heading>Reminder</heading>"
text=text+"<body>Don't
forget
me
this
weekend!</body>"
text=text+"</note>"
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.loadXML(text)
//
.......
processing
the
document
goes
here
</script>
13.装载XML进入Parser
<html>
<body>
<script
language="javascript">
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
document.write("The
first
XML
element
in
the
file
contains:
")
document.write(xmlDoc.documentElement.childNodes.item(0).text)
</script>
</body>
</html>
遍历XML节点树：
<html>
<body>
<script
language="VBScript">
txt="<h1>Traversing
the
node
tree</h1>"
document.write(txt)
set
xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
for
each
x
in
xmlDoc.documentElement.childNodes
document.write("<b>"
&
x.nodename
&
"</b>")
document.write(":
")
document.write(x.text)
document.write("<br>")
next
</script>
</body>
</html>
装载XML
进入
HTML
<html>
<head>
<script
language="JavaScript"
for="window"
event="onload">
var
xmlDoc
=
new
ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
nodes
=
xmlDoc.documentElement.childNodes
to.innerText
=
nodes.item(0).text
from.innerText
=
nodes.item(1).text
header.innerText
=
nodes.item(2).text
body.innerText
=
nodes.item(3).text
</script>
<title>HTML
using
XML
data</title>
</head>
<body
bgcolor="yellow">
<h1>Refsnes
Data
Internal
Note</h1>
<b>To:
</b><span
id="to"></span>
<br>
<b>From:
</b><span
id="from"></span>
<hr>
<b><span
id="header"></span></b>
<hr>
<span
id="body"></span>
</body>
</html>
循环遍历咯。。其实不是遍历html，应该是遍历dom节点吧。将某几个节点进行按需求复制，然后推入到响应的html页面中。
这样的方法可以用原生js的for循环，或者用jquery的each遍历都是OK的。当然用vue的V-for也是可以的
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）