JavaScript DOM 三

JavaScript DOM 三

这章主要讲述DOM的真正含义，详细描述M的内容。

一、D既是document，文档的意思；O既是object对象，对象的意思。浏览器最外层包着一个window对象，window对象中，需要显示内容document，所以在编程的过程中，一般只要操作document对象即可。

二、M既是model模型的意思；模型相对于对象来说就是一个实例，对于web浏览器来说就是一个特定的网页。DOM把一个文档表示成一个特定的树，可以叫家谱树，专业术语叫做节点树：

1、节点分为三类：元素节点、文本节点和属性节点。（可以根据这些节点的组合，构成一棵节点树，解释成网页）

例：

元素节点：

<p> 、<li>、<ul>

；

文本节点：

<p>我是谁？</p>；

属性节点：

<p title:"wowowo"></p>;

2、获取和修改节点的方法：

var objectByID= document.getElementById(id);//根据id获取对象

var objectByTagName= document.getElementByTagName("li");//根据元素节点的名称获取所有这个名称的对象

var  attribute=objectByID.getAttribute("title");//获取名称是title的属性值

objectByID.setAttribute("title","test");

document.body.childNodes;//获取body标签下的所有字节点包括元素节点、文本节点和属性节点；

node.nodeType;//共有12个返回值，其中3个有实用价值：1表示元素节点、2表示属性节点、3表示文本节点；

node.nodeValue；//获取文本的值，需要修改文本可用；

node.firstChild;

node.lastChild;

3、层叠样式表（CSS）的使用

1、CSS对某个元素的样式声明：

selestor:{

property:value;

property2:value2

}

2、CSS拥有继承的功能，就是节点树上的各个元素将继承其父元素的样式属性。

3、为了把某个或者某些元素分开，我们一般使用class属性或者id属性（注意id的属性是独一无二的）来进行区分。

例：<p class="special" id="p">this is pi.</p>

<h2 class="special" id="h2">so who is you.</h2>

可以用class属性来共享一个css样式：

.special{

color:"#ffffff";

font-style:italic

}

也可以为特定元素定义一个css样式：

h2.special{

color:"#ffffff";

font-style:italic

}

还可以使用id的属性来给特定的元素定义一个css元素：

#h2{

color:"#ffffff";

font-style:italic

}