0%

DomScriptingCh3

DOM

D: 文档

即document,当文档加载到浏览器中时,就成为一个document对象。

O:对象

js中有三种对象:

  • user-defined object
  • native object: js语言中的对象,Array之类
  • host object: 浏览器提供的对象

如window对象等在很早的版本中就可以使用,即浏览器本身,它的属性和方法统称为BOM。(或者应该叫窗口对象模型)
它提供了open和blur等方法。
我们主要学习DOM

M: Model

模式或者叫表现形式,DOM是将document表示为一棵树的模型。

节点

节点是DOM树的基本单位

element node

body,p,ul等即为元素,元素间可以包含其他元素,只有html元素作为root不被其他元素包含。

text node

如果一块文档全是文本,就是一个text node
比如:

1
<p>汪德法</p>

中,汪德法是一个包含在p元素节点中的文本节点。在XHTML中,文本节点总是包含在元素节点中,但元素节点不总是包含文本节点。

attribute node

属性节点用于对元素节点做出更详细的描述,比如几乎每个元素都有的title属性节点。如:

1
<p title = "a gentle reminder" >Don't forget to buy this stuff.</p>

而有的元素中则有id和class等属性。

CSS基本概念

除了DOM,还可以通过CSS告诉浏览器如何显示一个文档。
和js脚本类似,可以在head的style之前嵌入,或者在调用外部css文件。

CSS声明元素样式的语法类似函数:

1
2
3
selector{
property: value;
}

其中可以定义浏览器在显示元素时的颜色,字体和字号等。

1
2
3
4
5
p {
color: yellow;
font-family:"arial",sans-serif;
font-size: 1.2em;
}

继承是CSS中重要功能,类似DOM,CSS也可以将文档当成一棵树,子节点将继承父节点的样式,同时可以定义特殊的新样式。

而如果我们需要将一类特殊的元素施加样式且他们是分散的,就需要使用id或class属性:

class:

比如有两个不同元素有相同的class值:special:

1
2
3
4
5
6
<p class ="special">
this is a p
</p>
<h2 class ="special">
this is a h2 headLine;
</h2>

可以为同一class的指定样式:

1
2
3
.special{
font-style: italic;
}

或者为一种元素中拥有某一class的结点指定样式:

1
2
3
h2.special{
color: yellow;
}

id

id属性可以直接给一个元素节点加上一个id,如:

1
2
3
<ul id="purchases">

</ul>

这时可以在css中给这个id指向的结点指定样式:

1
2
3
4
5
6
#purchases{
border: 1px solid white;
background-color: #333;
color: # CCC;
padding: 1em;
}

尽管id只能用一次,但仍可用来给此id节点中的结点指定样式。

获取元素

有三种方式获取节点:id,名字和类(注意element和elements)

  • getElementById(“lance”)
  • getElementsByTagName(tag):返回此标签元素的数组(可以使用通配符”*“,注意需要”“)
  • getElementsByClassName(“class1 class2 class3”);同时拥有几个类的结点,顺序无关,可以有更多元素但不能少,类名间空格隔开,返回数组。

当我们使用document.get….时,是以整个document为范围,即在这个对象中找,但也可以指定在别的子树中找,如先用id找到指定节点,然后看他下面有几个子节点。

注意其中byClassName的方法是html5的新方法,以前的程序员需要”成人礼般“实现自己的方法,一般如下,其中第一个参数是搜索树的root:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getElementsByClassName(node ,classname){
if(node.getElementsByClassName){
//如果有实现
return node.getElementsByClassName(classname);
}else{
var results=new Array();
var elems=node.getElementsByTagName("*");
for(var i=0;i<elems.length;++i){
if(elems[i].className
.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}

其使用如下(若多类,需要嵌套使用):

1
2
var shopping = document.getElementById("purchases");
var sales = getElementsByClassName(shopping,"sales");

获取和设置属性

获取和设置属性节点。

修改后如果使用浏览器查看原文档,并没有改变,因为浏览器静态加载后,修改是动态刷新。

getAttribute(attribute)

如果没有这个属性,就是null,即没有。

setAttribute(attribute,value)

修改属性值,如果attribute没有也可以正常赋值。