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

最新推荐文章于 2025-10-28 15:00:00 发布

原创最新推荐文章于 2025-10-28 15:00:00 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #IE #Firefox #浏览器 #Firebug #ViewUI

Javascript&Ajax 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了DOM的基本概念，包括DOM树的构建原理，元素节点与文本节点的区别，以及如何通过getElementById, getElementsByName 和 getElementsByTagName 方法操作DOM。同时，文中还探讨了不同浏览器对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的不同

在ie 中getElementsByName(“test“)的时候返回的居然是id=test的object数组，而使用firefox则返回的是name＝ test的object的数组。按照w3c的规范应该是firefox的实现是正确的，只是不解ie为什么要实现成为id＝test的方式...

8. 有时候写1个JS方法，然后调用的时候看firebug说找不到这个函数，但是名字检查正确无误，也只是报这个错而已；后来发现原来是方法里面有错误，但是这个错误前面的alert()也不会被调用...

还有1次最郁闷的，还是JS函数不能调用，吸收了上面的经验，后来发现，我要调用的function的名字,叫做createElement()；跟document的一样。。。所以无效。。。

又来了1次无敌郁闷的，还是JS函数不能调用，吸收了上面2个经验，后来发现，原来是<script type="text/javascript"/>中，双引号变成中文的双引号了！！！

	<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.getElementByTagName("input"); //少写了s，出错导致函数无法被调用..
		var inputs1_1 = document.getElementsByName("abc");
		alert(inputs1.length); 
		alert(inputs1_1.length);
	}
	</script>

9.window对象

window.frames ：数组对象，对应于所有帧对象<frameset>或者<iframe>所对应的 window对象！

window.parent和window.top的区别：

window.top：最顶层的祖先窗口

window.parent ：装载子窗口的窗口[即父窗口]

document.URL：返回当前文档的 URL。很好用的一个属性啊！