dom模型.docx
《dom模型.docx》由会员分享,可在线阅读,更多相关《dom模型.docx(48页珍藏版)》请在冰豆网上搜索。
dom模型
我的记录(dom模型)
文档对象模型DOM(DocumentObjectModule)定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新。
它使得用户对HTML有了空前的访问能力,并使开发者能将HTML作为XML文档来处理。
一、访问文档中元素
document.getElementById("id");获取给定id的元素,并将其作为对象。
document.getElementByTagName("tagname");获取所有标签名为tagname的元素,并把它保存在一个类似数组的列表中。
二、读取元素的属性、节点值及其他节点数据
node.getAttribute(“attribute”);获取属性名为attribute的属性值。
node.setAttribute(“attribute”,”value”);设置属性名为attribute的值为value。
node.nodeType;读取节点类型(1=元素,3=文本节点)。
node.nodeName;读取节点名称(元素名字或#textNode)。
node.nodeValue;读取或设置节点的值(文本节点的情况下则为文本内容)。
三、节点之间操作
node.previousSibling;获取上一个兄弟节点,并将它保存为一个对象。
node.nextSibling;获取下一个兄弟节点,并将它保存为一个对象。
node.childNodes;获取对象的所有子节点,并把它们储存到一个列表中。
对于第一个和最后一个子节点,还可以使用node.firstChild和node.lastChild进行间写。
node.parentNode;获取包含node的节点。
四、创建新节点
document.createElement(“element”);创建一个名字为element的新元素,需要提供一个字符串形式的元素名。
document.createTextNode(“string”);创建一个节点值为string的文本节点。
newNode=node.cloneNode(bool);创建newNode节点作为node的副本(克隆)。
如果bool值为true,这个克隆将包括原节点的所有子节点和属性的克隆。
node.appendChild(newNode);将newNode作为子节点,添加在node所有子节点之后。
node.insertBefore(newNode,oldNode);在node节点的子节点oldNode之前插入newNode。
node.removeChild(oldNode);移除node节点的子节点oldNode.
node.replaceChild(newNode,oldNode);使用节点newNode替换node几点的子节点oldNode。
element.innerHTML;读写给定element的HTML内容,它是一个字符串,包括所有自己节点及它们的属性和文本内容。
.
例子
getElementsByTagName()获取HTML标记
代码:
DOMPage
functionsearchDOM(){
varoli=document.getElementsByTagName("li");
alert(oli.length+""+oli[0].tagName+""+oli[3].childNodes[0].nodeValue);
varoul=document.getElementsByTagName("ul");
varoli2=oul[1].getElementsByTagName("li");
alert(oli2.length+""+oli2[0].tagName+""+oli2[1].childNodes[0].nodeValue);
}