日期:2014-05-16  浏览次数:20401 次

[原]JavaScript学习笔记(二.DOM)

1.DOM

服务器---(返回)---HTML文件----(DOM树)----浏览器

浏览器其实解析的是HTML文件的DOM树,所以我们才可以通过DOM来改变外观,因为更改DOM是直接修改显示方式!

所以符合DOM标准的,一般在各个不同的浏览器也都支持的,因为各个浏览器也同样得遵循DOM的标准!


2.一切皆结点;

包括元素,文本,属性和注释


3.元素结点和文本结点

像<div>xx..</div>这样的结点就是元素结点,元素结点有名无值

像"xxx"这样只有文本的结点就是文本结点,文本结点无名有值


node ? ? ? ? ? ? ? ? ? ? ? ? nodeName ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nodeValue

<div> ? ? ? ? ? ? ? ? ? ? ? ? ? ?div ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? null/undefined

"abc" ? ? ? ? ? ? ? ? ? ? ? ? ? ? null/undefined ? ? ? ? ? ? ? ? ? ? ? ?"abc"


4.有一些浏览器并不支持Node对象

如:if(someNode.nodeType == Node.ELEMENT_NODE) 有可能会报错说找不到Node


5.当用DOM操作结点时,有一些空白的字符也有可能被当作文本结点,所以这个一定要注意


6.在DOM树上面[即HTML文档中的结点],1个元素只能有1个父亲;所以移动1个元素到另1个地方的时候,不必在原来的地方执行移除操作,直接在目的地加入就行了


7.getElementById, getElementsByName, getElementsByTagName

7.1 getElementById()


只有document对象能够使用

返回的是1个对象[如果有多个id相同只返回第1个]


7.2 getElementsByName():

只有document对象能够使用

返回的是数组

7.3 getElementsByTagName()

所有的结点都能使用

返回的是数组


	<p id="div_1">
		<input name="abc"/>
		<input name="abc"/>
	</p>
	<input type="button" onclick="countElement();" value="button"/>	
	<script>
	function countElement(){
		var div_1 = document.getElementById("div_1");
		var inputs1 = div_1.getElementsByTagName("input");
		var inputs1_1 = document.getElementsByName("abc");//div等结点没有getElementsByName()这个方法
		alert(inputs1.length); //2
		alert(inputs1_1.length);//2
	}
	</script>

?

7.4 ie和firefox中的getElementsByName的不同