DOM基础

DOM= Document Object Model(文档对象模型)

DOM是什么?不用长篇大论,我理解就是javascript和文档的接口,这个文档就是HTML或者CSS.想想我们光有Javascript其实也没什么用,无非是一个脚本语言,不过如果和DOM相结合那么它就灰常牛逼了.

D

当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄悄而生.它把你编写的网页文档转换为一个文档对象.

O

Javascript里有三种对象,用户定义对象(user-defined object),内建对象(native object),宿主对象(host object).

其中宿主对象是Javascript中最为特别的(前两种其他语言都有),而宿主对象中window对象最最基础.

window对象对应着浏览器窗口本身,这个对象属性和方法统称为BOM(浏览器对象模型)

M

M代表模型,它把文档抽象成一个树形结构.就这样~

1 节点

元素节点

DOM的原子是元素节点(element node)

文本节点

<p>文本</p>,<p>元素包含这文本,所以它是一个文本节点(text node)

属性节点

<p title="atrribute">文本</p>,其中title="atrribute"是一个属性节点.

并非所有的元素都包含着属性,但所有的属性都被元素所包含.

2 CSS

Javascript可以控制CSS所以也说说CSS.

class属性

可以在所有的元素上任意应用class属性:

<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>

在css里可以为class属性值相同的所有元素定义同一种样式:

.special{
    font-style: italic;
}

还可以像下面这样利用class属性为一种特定类型的元素定义一种特定的样式:

h2.special{
    text-transform: uppercase;
}

id属性

id属性的用途是给网页里的某个元素加上一个独一无二的标识符:

<ul id="purchases">

在CSS里可以像下面这样为特定id属性值的元素定义一种独享的样式:

#purchases{
    border: 1px solid white;
}

尽管id本身只能使用一次,css还是可以利用id属性为包含在特定元素里的其他元素定义样式.

#purchases li{
    font-weight:bold;
}

id属性就像是一个挂钩,它一头连着文档里的某个元素,另一头连着CSS样式表里的某个样式.DOM也可以使用这样的挂钩.

常用DOM方法

获取元素

有3种方法可以获取元素节点,分别是通过元素ID,通过标签名字和通过类名字来获取.

1 getElementById

这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象.它是document对象特有的函数.

document.getElementById(id)

例如:

document.getElementById("purchases")

ps:typeof 操作符可以告诉我们它的操作数是一个字符串,数值,函数,布尔值还是对象.

2 getElementsByTagName

此方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素.

element.getElementsByTagName(tag)

getElementsByTagName允许把一个通配符作为它的参数.通配符("*")必须放在引号里,为了让通配符与乘法操作符有所区别.

如果想知道某个文档里有多少各元素节点:

alert(document.getElementsByTagName("*").length);

3 getElementsByClassName

HTML5 DOM新增方法,某些DOM可能还没实现.它也返回一个数组,包含类名class的所有元素:

element.getElementsByClassName(class);

例如:

document.getElementsByClassName("sale");

它还可以查找那些带有多个类名的函数.要指定类名,只要在字符串参数中用空格分隔类名即可(类名顺序无所谓):

alert(document.getElementsByClassName("import sale").length);

获取和设置属性

获取元素之后我们可以获取和设定属性值.

1 getAttribute

此方法只能通过元素节点对象调用,不能通过document对象调用(只有元素节点才有属性!).

object.getAttribute(attribute);

例如:

var paras = document.getElementsByTagName("p");
for (var i=0; i < paras.length; i++){
    alert(paras[i].getAttribute("title"));
}

2 setAttribute

它允许我们对属性节点的值做出修改,setAttribute也只能用于元素节点;

object.setAttribute(attribute, value);

例如:

var shopping = document.getElementById("purchases");
shopping.setAttribute("title", "a list of goods");

注意:通过setAttribute对文档做出修改后,在通过浏览器view source选项去查看文档的源代码时看到的仍将是改变前的属性值,也就是所setAttribute做出的修改不会反映在文档本身的源代码里.