DOM基础
XML(可扩展标记语言)是从称为SGML(标准通用标记语言)的更加古老的语言派生出来的。SGML的主要目的是定义使用标签来表示数据的标记语言的语法。
XML的主要目的是使用文本以结构化的方式来表示数据。在某些方面，XML文件也类似于数据库，提供数据的结构化视图。
每个XML文档都由XML序言开始，在前面的代码中的第一行便是XML序言，<?xml version="1.0"?>.这一行代码会告诉解析器和浏览器，这个文件应该按照前面讨论过的XML规则进行解析。
<![CDATA[]]>表示无需进行解析的文本，允许诸如大于号和小于号之类的特殊字符包含在文本中，而无需担心破坏XML的语法。文本必须出现在<![CDATA[和]]>之间才能合适的避免被解析。这样的文本称为Character Data Section,简称CData Section.
<?page render multiple authors?>是一种称为处理指令（processing instruction）的不同类型的语法。处理指令（以下简称PI）的目的是为了给处理页面的程序（如XML解析器）提供额外的信息。PI通常情况下是没有固定格式的，唯一的要求是紧随第一个问号必须至少有一个字母。在此之后，PI可以包含除了小于号和大于号之外的任何字符串序列。
最常见的PI是用来指定XML文件的样式表：
<?xml-Stylesheet type="text/css" href="MyStyles.css" ?>
DOM是针对XML的基于树的API。
特定语言的DOM
document对象是BOM的一部分，同时也是HTML DOM的HTMLDocument对象的一种表现形式，反之，它也是XML DOM Document对象。
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn’t this exciting?</p>
<p>You’re learning to use the DOM!</p>
</body>
</html>
<script>
var oHtml = document.documentElement;//<HTML/>是文档的document元素
alert(oHtml.tagName);
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
alert(oBody.innerText);
</script>
检测节点类型
通过使用nodeType特性检验类型；
处理特性：
只有Element节点才能有特性。Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
getNamedItem(name)：返回nodeName属性值等于name的节点；
removeNamedItem(name):删除nodeName属性值等于name的节点；
setNamedItem(node):将node添加到列表中，按其nodeName属性进行索引；
item(pos)：像NOdeList一样，返回在位置pos的节点。
访问指定节点
1、getElementsByTagName()
核心(XML)DOM定义了getElementsByTagName()方法，用来返回一个所有的tagName(标签名)特性等于某个指定值的元素的NodeList.
2、getElementsByName()
HTML DOM定义了getElementsByName()，它用来获取所有name特性等于指定值的元素的。
3、getElementById()
这是HTML DOM定义的第二种方法，它将返回id特性等于指定值的元素，在HTML在，id特性是唯一的。
创建和操作节点
1、创建新节点
DOM Document(文档)中有一些方法用于创建不同类型的节点，即便在所有的浏览器中的浏览器document对象并不需要全部支持所有的方法。
2、createElement()、createTextNode()、appendChild()
创建<p/>元素：var op = document.createElement("p");
创建文本节点：var oText = document.createTextNode("Hello World!");
把文本节点加入到元素中：op.appendChild(oText);
document.body.appendChild(op);
3、removeChild()、replaceChild()和insertBefore()
removeChild()可以添加一个节点，也可以删除一个节点；
replaceChild()方法有两个参数：被添加的节点和被替换的节点。
appendChild()方法让新消息出现在老消息之后。
使用appendChild()方法：
<script type="text/javascript">
function appendMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
document.body.appendChild(oNewP);
}
</script>
4、createDocumentFragment()
例：
<script type="text/javascript">
function addMessages() {
var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
var oFragment = document.createDocumentFragment();
for (var i=0; i < arrText.length; i++) {
var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}
</script>
Document — 最顶层的节点,所有其它节点都是附属于它的
DocumentType — DTD引用的使用 <!DOCTYPE >语法的对象表现出形式如: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>. 它不能包含子节点
DocumentFragment — 文档片段,可以象Document一样来保存节点
Element — 表示起始和结束标签之间的内容如: <tag></tag> 或<tag/>.
Attr — 代表特性名值对
Text — 代表起始和结束标签之间或CDATA间的普通文本
CDataSection —<![CDATA[ ]]>. 的对象表现形式可以包含文本节点
Entity — 代表DTD中的一个实体定义, such as <!ENTITY foo “foo”>.
EntityReference —代表一个实体引用如"
ProcessingInstruction — 代表一个PI
Comment — 代表XML注释
Node特性和方法
特性/方法 类型/返回类型 说明
nodeName String 节点名字跟据节点类型而定
nodeValue String 节点的值
nodeType Number 节点的类型常量值
ownerDocument Document 指向这个节点所属的文档
firstChild Node childNodes列表中的第一个节点
lastChild Node childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
previousSibling Node 前一个兄弟节点
nextSibling Node 后一个兄弟节点
hasChildNodes() Boolean 当childNodes包含一个或多个节点时返回真
attributes NamedNodeMap Element元素的特性对象Attr
appendChild(node) Node 把node加入 childNodes
removeChild(node) Node 移掉节点
replaceChild Node (newnode, oldnode) 用newnode oldnode替换oldnode
insertBefore Node (newnode, refnode) 在refnode前插入newnode
浙公网安备 33010602011771号