dom编程
DOM编程
理解树的概念
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范(https://www.360docs.net/doc/4d7019632.html,/DOM/),DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscape的Javascript和Microsoft的Jscript 之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。
在理解DOM眼中的HTML文档结构之前,应该对树状结构有所了解。直接位于一个节点之上的节点是该节点的父节点(parent)。直接位于一个节点之下的节点是该节点的子节点(children)。位于同一层次,具有相同父节点的节点是兄弟节点(sibling)。一个节点的下一个层次的节点集合是那个节点的后代(descendant)。一个节点的父节点、祖父节点及其他所有位于它之上的节点都是那个节点的祖先(ancestor)。
在DOM眼中,HTML是一种树状结构的文档,是根(root)节点,
、注意事项:
1、在使用DOM时,必须等文档被装载完毕再执行遍历等行为操作文档。
2、
标记并没有被使用,但是在统计Element节点总数的时候,还是被统计进来了。因为如果没有显式地指定例程4-17则使用firstChile、lastChild、nextSibling、previousSibling等树状遍历整个文档树。
例程4-17 sample4_13.htm
var elementName = ""; //全局变量,保存Element标记名,使用完毕要清空
function countTotalElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType == 1) { //检查node是否为Element对象
total++; //如果是,计数器加1
elementName = elementName + node.tagName + "\r\n"; //保存标记名
}
for(var m=node.firstChild; m!=null;m=m.nextSibling) {
total += countTotalElement(m); //在每个子节点上进行递归操作
}
return total;
}
2.搜索文档中特定的元素
在使用DOM的过程中,有时候需要定位到文档中的某个特定节点,或者具有特定类型的节点列表。这种情况下,可以调用Document对象的getElementsByTagName()和getElementById()方法来实现。document.getElementsByTagName()返回文档中具有指定标记名的全部Element节点数组。Element出现在数组中的顺序就是他们在文档中出现的顺序。传递给getElementsByTagName()的参数忽略大小写。
(注意:可以使用document.body定位到
标记,因为它是惟一的。)getElementsByTagName()返回的数组取决于文档。一旦文档改变,返回结果也立即改变。与其相比,getElementById()则比较灵活,可以随时定位到目标,只是要实现给目标元素一个惟一的id属性值。Element对象也支持getElementsByTagName()和getElementById()。不同的是,搜索领域只针对调用者的子节点。
例程4-18示范使用document.getElementsByTagName()和document.getElement ById()两个方法定位HTML文档中的元素。
例程4-18 sample4_14.htm
//统计input控件总数,结果为3
function countTotal() {
var elements = document.getElementsByTagName("input");
window.alert("input类型的控件总数为:"+elements.length);
}
//定位id设置为submit1的控件,将其value值显示出来
function anchorElement() {
var element = document.getElementById("submit1");
window.alert("控件Value设置值为:"+element.value);
}
3.修改文档内容
遍历整棵文档树、搜索特定的节点,这些操作的最终目的之一是修改文档内容。接下来的两个例子将使用Node的几个常用方法,来演示如何修改文档内容,其代码如例程4-19所示。
例程4-19 sample4_15.htm
function reverseNode(node) { // 颠倒节点node的顺序
var kids = node.childNodes; //获取子节点列表
var kidsNum = kids.length; //统计子节点总数
for(var i=kidsNum-1;i>=0;i--) { //逆向遍历子节点列表
var c = node.removeChild(kids[i]); //删除指定子节点,保存在c中
node.appendChild(c); //将c放在新位置上
}
}
第一行
第二行
第三行
value="颠倒" onClick="reverseNode(document.body)">
注意的是,在将一个节点加入文档之前,先要将这个节点删除,即保证这个节点是无父的。
例程4-19通过直接操作body的子节点来修改文档。而在HTML文档中,布局和定位常常通过表格
第一行 |
第二行 |
第三行 |
第四行 |
4.往文档添加新内容
在尝试遍历、搜索、修改文档之后,现在试着往文档添加新的内容。其实没有什么新意,只是利用前面提到的Node的属性和方法而已,还是操作
网友留言列表: |
使用DOM操作XML文档
在数据表示方面,XML文档更加结构化。DOM在支持HTML的基础上提供了一系列的API,支持针对XML的访问和操作。利用这些API,可以从XML中提取信息,动态地创建这些信息的HTML呈现文档。处理XML文档,通常遵循“加载XML文档→提取信息→加工信息→创建HTML文档”的过程。
例程4-23 sample4_19.htm
function loadXML(handler) {
var url = "employees.xml";
if(document.implementation&&document.implementation.create Document) { var xmldoc = document.implementation.createDocument("", "", null); xmldoc.onload = handler(xmldoc, url);
xmldoc.load(url);
}
else if(window.ActiveXObject) {
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.onreadystatechange = function() {
if(xmldoc.readyState == 4) handler(xmldoc, url);
}
xmldoc.load(url);
}
}
function makeTable(xmldoc, url) {
var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","600");
table.setAttribute("class","tab-content");
document.body.appendChild(table);
var caption = "Employee Data from " + url;
table.createCaption().appendChild(document.createTextNode (caption)); var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("姓名")); headerrow.insertCell(1).appendChild(document.createTextNode("职业")); headerrow.insertCell(2).appendChild(document.createTextNode("工资")); var employees = xmldoc.getElementsByTagName("employee");
for(var i=0;i var e = employees[i]; var name = e.getAttribute("name"); var job = e.getElementsByTagName("job")[0].firstChild.data; var salary = e.getElementsByTagName("salary")[0].firstChild. data; var row = table.insertRow(i+1); row.insertCell(0).appendChild(document.createTextNode (name)); row.insertCell(1).appendChild(document.createTextNode (job)); row.insertCell(2).appendChild(document.createTextNode (salary)); } }
例程4-24 供读取调用的XML文档– employees.xml