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对象能够使用
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。很好用的一个属性啊!
?
?
?
?
?
?
?
?
?