javascript DOM(一)
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.dom包中 )
1). document.getElementById: 根据 id 属性获取对应的单个节点
2). document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
3). document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie 使用?
? ?getElementsByName 不能获取到节点数组, 但火狐可以.?
4). 其它的两个方法getElementsByClassName,getElementsByTagNameNS, ie 根本就不支持, 所以不建议使用 ?
以下是代码：
?4. 获取属性节点:
?
1). 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
2). 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值?
代码：
?
?
?5. 获取元素节点的子节点(只有元素节点才有子节点!!):(元素节点即:<a><p><input><select><div>等等，属性节点id,type,name,value等等。)
1). childNodes 属性获取全部的子节点: 火狐 和 ie的实现方式有区别2). firstChild 属性获取第一个子节点3). lastChild 属性获取最后一个子节点代码：?
?
?
?6. 节点的属性:
1). nodeName: 代表当前节点的名字. 只读属性. **如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串2). nodeType：返回一个整数, 这个数值代表着给定节点的类型. 只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点? ? ? ? 3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性①. 元素节点, 返回值是 null.②. 属性节点: 返回值是这个属性的值③. 文本节点: 返回值是这个文本节点的内容代码：?
?
?7. 获取文本节点:
?
1). 步骤: 元素节点 --> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode,
? ?然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
代码:
?
??