DOM:Document Object Model(文本对象模型)

D: 文档---html文档或xml文档

O:对象---document对象的属性和方法

M:模型

DOM是针对xml(html)的基于树的API

DOM树:节点(node)的层次。

DOM把一个文档表示为一棵家谱树(父、子、兄弟)

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面。

?

1. 节点及其类型：

1). 元素节点

2). 属性节点

3). 文本节点

节点及其类型

节点(node):来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。

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

p是一个element node.元素节点。

title="a gentle reminder"是一个attribute node.属性节点

Don't forget to buy this stuff.是一个text node.文本节点

其中Don't forget to buy this stuff.是节点p的一个子节点。

?

2. 在html文档的什么位置编写js代码?

0). 直接在html页面中书写代码。

? ? ?缺点：?js和Html耦合性太强，不利于维护。

1). 一般地，不能在body节点之前来直接获取body内的节点，因为此时html文档树还没有加载完成，获取不到指定的节点；除非它在某一个方法内部；这样的话，只有在调用方法的时候，才会去获取节点，这个时候一般文档树加载已经完成。

2). 可以在整个html文档的最后缩写类似代码，但是这不符合习惯。

3). 一般地，在body节点之前编写js代码，但是需要利用window.onload事件。该事件在当前文档完全加载之后被触发，所以其中的代码可以获取到文档的任何节点。

?

<script type="text/javascript">

window.onload=function(){

var cityNode=document.getElementById("city");

alert(cityNode);

}

</script>

?

4). 关于为onclick等属性赋值的问题：

?

?

在<script type="text/javascript"></script>内部给一个节点添加事件的方法。不需要()。例如：

<script type="text/javascript">

var button=document.getElementById("button");

button.onclick=alert("Hello, World");

</script>

这里就为button添加了一个点击事件。但是页面载入的时候会有一个alert窗口Hello,World，你再去点击button的时候不会有任何作用，这个原因是因为 button.onclick执行的是alert("Hello,World");的执行结果，但是alert并没有任何执行结果。

下一个例子：

<script type="text/javascript">

function helloworld(){

alert("Hello,World");

}

var button=document.getElementById("button");

button.onclick=helloworld;//这里会执行helloworld()方法，括号不要加。因为加括号之后，会直接执行helloworld()方法。所以不要加括号。

var test=helloworld;//方法的引用；

test();//这里会执行helloworld()方法体；

</script>

?

? ? ? ? ? ? ? ? ①. button.onclick = helloWorld();

错误的赋值方式, 以上代码将会导致　helloWorld　函数执行, 而赋给 onclick 属性的是函数的执行结果

②. button.onclick = helloWorld; 正确的赋值方式, 赋给 onclick 属性的是函数的引用

?

?

3. 如何来获取元素节点:(关于节点方法可以参考java API文档中的Node,Element等接口中的方法 ，在org.w3c.