一、DOM简介
1.
DOM
是
”DocumentObject Model”
(文档对象模型)的首字母缩写。当创建了一个网页并把它加载到
Web
浏览器中时,就会在幕后创建一个文档对象模型
2.
DOM
表示被加载到浏览器窗口里的当前页面:浏览器向我们提供了当前页面的模型,而我们可以通过
JavaScript
访问这个模型
3.
DOM
把一份文档表示为一棵树
二、DOM树结构
二、DOM树结构
浏览器加载该页面并将之转换为树形结构:
1.DOM
树中的一切是以最外层的
HTML
包含元素,即
html
元素开始的。使用树的比喻,这叫做根元素(
root element
)
2.
从根流出的线表示不同标记部分之间的关系。
head
和
body
元素是
html
根元素的孩子(
child
);
title
是
head
的孩子,而文本 “
Trees,trees, everywhere”
是
title
的孩子;相对的,
head
是
title
的父亲(
parent
),
title
是文本 “
Trees,trees, everywhere”
的父亲。处在同一层次的且互不包含的两个分支(如
head
和
body
)之间称为兄弟(
sibling
)关系。整个树就这样组织下去,直到浏览器获得与上图类似的结构
通常把这样的树结构成为一棵节点树
三、节点
三、节点
1
.DOM
文档是由节点构成的集合,此时的节点是文档树上的树枝或者树叶
2.
DOM
中节点的类型:
1.
元素节点(
element node
),诸如
<head>
、
<p>
、
<div>
等。元素节点可以包含其它的元素,唯一没有被包含在其它元素里的元素是
<html>
,它是根元素
2.
属性节点(
attribute node
),元素或多或少地有一些属性,属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里,所以属性节点总是被包含在元素节点中
3.
文本节点(
text node
),
<h1>
元素中包含着文本节点“
Trees,trees, everywhere”
四、基本DOM方法
五、重要DOM属性
四、基本DOM方法
1.
getElementById
(id):
返回一个给定
id
属性的元素节点相对应的对象。这个方法是与
document
对象相关联的函数。其中
document
对象代表着整个
HTML
文档并可以用来访问所有页面中的元素
2.
getElementsByTagName
(
tagname
):
返回一个对象数组,它们分别对应着文档里的一个特定的元素节点
3.
getAttribute
():
返回对象的属性值
4.
setAttribute
()
nodeName
修改对象的属性值五、重要DOM属性
1.
childNodes
可以将节点树中任何一个元素的所有子元素检索出来,这个属性返回一个数组,包含了给定元素节点的全体子元素
2.nodeName
返回元素节点的名称。注意,返回的结果全部是大写
3.
nodeType
用来区分节点的类型,元素节点的
nodeType
属性值是
1
,属性节点的
nodeType
属性值是
2
,文本节点的
nodeType
属性值是
3
4.
nodeValue
可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空
5.
firstChild
和
lastChild
第一个和最后一个孩子节点。
node.firstChild
等价于
node.childNodes
[0]
,
node.lastChild
等价于
node.childNodes
[
node.childNodes.length
– 1]
6.
parentNode
返回元素的父节点
7.
nextSibling
返回下一个兄弟节点
六、改变网页结构的DOM方法
六、改变网页结构的DOM方法
1.
createElement
(
tagname
)
创建新的元素节点,此方法与
document
对象相关联。新建的元素节点并未与节点树相连
2.
appendChild
(node)
把新建的节点插入到节点树的某个节点下,成为这个节点的子节点
3.
createTextNode
(text)
创建文本节点
4.
insertBefore
(
newNode
,
targetNode
)
把一个新元素插入到一个现有元素的前面
5.
replaceChild
(
newChild
,
oldChild
)
替换一个孩子节点
6.
removeChild
(node)
删除一个孩子节点