1.介绍
1.1 DOM 解释
说明：DOM全称 Document Object Model，即文档对象模型。将文档抽象成一个树型结构，文档中的标签、标
1.2 DOM 分类
按照操作对象的不同，可分为Core DOM、XML DOM 和 HTML DOM。
Core Dom：核心Dom，针对任何结构化文档的标准模型。 XML DOM：用于XML文档的标准模型，对XML元素进行操作。 HTML DOM：用于HTML文档的标准模型，对HTML元素进行操作。 1.3 DOM 功能
1、查询某个元素
2、查询某个元素的祖先、兄弟以及后代元素
3、获取、修改元素的属性
4、获取、修改元素的内容
5、创建、插入和删除元素
2. DOM 节点
文档中的所有内容都可表示为一个节点(node)，如：HTML里整个文档、每个标签、每个标签的属性和文本都可作
2.1 节点分类
1、文档节点(Document)：整个XML、HTML文档
2、元素节点(Element)：每个XML、HTML元素
3、属性节点(Attr)：每个XML、HTML元素的属性
4、文本节点(Text)：每个XML、HTML元素内的文本
5、注释节点(Comment)：每个注释
注意：这里的Document节点为总称，具体可分为XMLDocument和HTMLDocument，同理Element也可分为XM
2.2 HTML DOM 节点层次
节点彼此都有等级关系：父节点、兄弟节点、子节点等等。
3、获取 HTML 元素节点方法
文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName
4、常用DOM操作
js操作dom节点
1.访问节点
document.getElementById(id);返回对拥有指定id的第一个对象进行访问document.getElementsByName(name
返回带有指定标签名的对象集合
注意：Elements
document.getElementsByClassName(classname);
返回带有指定class名称的对象集合
注意：Elements
2.生成节点
document.createElement(eName);创建一个节点document.createAttribute(attrName);对某个节点创建属性do
3.添加节点
document.insertBefore(newNode,referenceChild);
在某个节点前插入节点
parentNode.appendChild(newNode);
给某个节点添加子节点
4.复制节点cloneNode(true | false);
复制某个节点
参数：是否复制原节点的所有属性
5.删除节点
parentNode.removeChild(node)
删除某个节点的子节点
node是要删除的节点
注意：IE会忽略节点间生成的空白文本节点(例如，换行符号)，而Mozilla不会这样做。在删除指定节点的时候不会
元素节点的节点类型是 1，因此如果首个子节点不是一个元素节点，它就会移至下一个节点，然后继续检查此节点 Internet Explorer 和 Mozilla 得到正确的方法。
6.修改文本节点appendData(data);
将data加到文本节点后面
deleteData(start,length);
将从start处删除length个字符
insertData(start,data)
在start处插入字符,start的开始值是0;
replaceData(start,length,data)
在start处用data替换length个字符
splitData(offset)
在offset处分割文本节点
substringData(start,length)
从start处提取length个字符
7.属性操作getAttribute(name)
通过属性名称获取某个节点属性的值
setAttribute(name,value);
修改某个节点属性的值
removeAttribute(name)
删除某个属性
<html>< head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> function Load_message()
{ var oimg=document.getElementById("a"); alert(oimg.getAttribute("border")); oimg.setAttribute("alt","DOM Test"); } </script>< /head>< body onload="Load_message();"> <img border="0" width="100" height="150" id="a"/>< /body>< /html>
8.查找节点parentObj.firstChild如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使
9.获取相邻的节点neborNode.previousSibling :获取已知节点的相邻的上一个节点nerbourNode.nextSlbling:
获取已知节点的下一个节点
10.获取父节点childNode.parentNode:得到已知节点的父节点
11替换节点方法replace(new,old)
<html>< head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> function replaceMessage() { var oNewp=document.createElement("p"); var oText=document.createTextNode("World Hello"); oNewp.appendChild(oText); var oOldp=document.body.getElementsByTagName("p")[0];
oOldp.parentNode.replaceChild(oNewp,oOldp); } </script>< /head>< body on-load="replaceMessage();"> <p>hello world!</p>< /body>< /html>
网友评论