一、DOM:Document Object Model(文档对象模型),是由W3C组织制定的一套操作文档的
应用编程接口。
W3C(World Wide Web Consortium):万维网联盟,该组织的主要工作是制定Web技术的标准,其中DOM只是其中的一项标准,其他的标准还有CSS,XML,XHML等等。
二、DOM分类:Core DOM, HTML DOM等等。Core DOM在所有的标记语言上都可以使用所以可以利用Core DOM来操作HTML文档,当然我们也可以利用HTML DOM提供的一些特殊的方法来操作HTML文档,但是要注意HTML DOM只能针对HTML文档使用,而不能用于其他的文档,比如XML文档等等。现在我们一起来学习Core DOM里面的一些常用的属性和方法。
三、在正式学习Core DOM的属性和方法之前,先来了解一下HTML文挡的一些基本概念。
任何一篇HTML文档被浏览器加载到计算机的内存后,都会被解析为一颗内存树。这颗树是由一个一个的节点构成的。其中节点有12种类型,但是最常用的只有3种,分别是元素节点、属性节点、文本节点。例如:
test.html
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<div style="width:800px">This is my first demo!</div>
<font color=”red”>hello world!</font>
<body>
</html>
其节点分解图如下:
属性节点:
style="width:800px" |
文本节点:This is my first demo! |
练习:
<div id=”testdiv”>
<p>This is <em>my</em> content.</p>
</div>
画出其节点分解图
四、DOM里的常见属性和方法
getElementById:根据Id获得某个元素
getElementsByTagName:获得指定标签名的所有元素
getElementsByName:获得制定名称的所有元素
nodeName:节点的名字
nodeValue:节点的值
nodeType:节点的类型(元素节点:1;属性节点:2;文本节点:3)
ownerDocument:指向这个节点所属的文档
firstChild:指向第一个子节点
lastChild:指向最后一个子节点
childNodes:获得所有的子节点
previousSibling:指向前一个兄弟节点
nextSibling:指向下一个兄弟节点
parentNode:指向父节点
hasChildNodes:当前节点是否有子节点
attributes:返回元素节点的所有属性(返回的是一个数组)
append:附加,添加
appendChild(node):将node添加到childNodes的末尾
removeChild(node):将node从childNodes中删除
replaceChild(newNode, oldNode):将childNodes中的oldNode替换成newNode
insertBefore(newNode, refNode):在childNodes中的refNode之前插入newNode
因为元素节点才有属性,所以只有元素节点才能调用
getAttribute,setAttribute, removeAttribute
getAttribute:获得元素的指定属性值
setAttribute:为元素的指定属性赋值
setAttribute(属性名,属性值)
removeAttribute:删除元素的指定属性
createElement:创建元素节点
createTextNode:创建文本节点
五、例子
Document.getElementsByTagName(“p”);
Document.getElementsByName(“myName”);
document.getElementsByTagName(“ 标签名字”);
<html>
<head>
</head>
<body>
<p name=”myName”>aaa<p>
<p name=”myName”>bbb</p>
<p name=”myName”>ccc</p>
</body>
</html>