脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScriptDOM,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一.什么是JavaScript DOM:
JavaScript DOM是Document Object Model for html(HTML 文档对象模型)的缩写。
解释下面几个概念:
A.文档:我们的html页面;
B.文档对象:页面中的元素;
C.文档对象模型:为了能够让程序中的JS去操作页面中的元素而定义的标准。把整个文档看成一棵树,数分枝就是节点,每个节点被定义为DOM节点,同时定义了很多方法来操作这些节点,如getElementById和document.body这些来获取节点的方法
二.DOM节点的常用属性:(后面无括号,且要写成 .XXX 的形式)
1.childNodes:获取子节点列表集合,相当于用getElementsByTagName获取的节点集合
注意:A.不止元素节点是节点,节点类型共有12种。当获取一个父元素的childNodes时要比元素数量多,因为可能还会默认包含文本节点(一般为回车符)
B.用childNodes时会出现不兼容的情况:在IE下不会包含文本节点,在标准浏览器下会获取到包含文本节点的所有子元素节点
2.children:同样是获取子节点列表集合,和childNodes作用对应,但与之不同的是,children可以解决上述的浏览器兼容性问题,原因是,children获取的子节点只包含元素节点
3.nodeType:获取当前元素的节点类型,值为1代表元素节点,2代表属性节点,3代表文本节点
补充——属性节点:就是元素的属性
A.获取元素属性:元素.attributes,例如:
<body> <button id="btn">click</button> <script> alert(document.getElementById('btn').attributes); </script> </body>
B.获取属性的名称:元素.attributes[0].name,例如:
<body> <button id="btn">click</button> <script> alert(document.getElementById('btn').attributes[0].name); </script> </body>
C.获取属性的值:元素.attributes[0].value,例如:
<body> <button id="btn">click</button> <script> alert(document.getElementById('btn').attributes[0].value); </script> </body>
4.firstChild:获取当前元素的第一个子节点:
注:A.获取到的子节点包含文本类型的节点,所以有浏览器兼容性问题。标准浏览器中的有效写法为:firstElementChild
B.因此,解决此问题的兼容写法应该为:
var oFirst = 元素.firstElementChild || 元素.firstChild; if(oFirst){ oFirst.style...//进行节点操作 }
注:上述方法虽然已经是兼容性写法,但仍然会在元素没有子节点时出现问题。最好的办法就是父元素.children[0].style...
5.lastchild:获取当前元素的最后一个子节点,存在兼容性问题,解决方法如下:
var oLast = 元素.lastElementChild || 元素.lastChild; if(oLast){ oLast.style...//进行节点操作 }
6.nextSibling:获取当前元素的下一个兄弟节点,存在存在兼容性问题,解决方法如下:
var oElemt = 元素.nextElementSibling || 元素.nextSibling; if(oElemt){ oElemt.style...//进行节点操作 }
7.previousSibling:获取当前元素的上一个兄弟节点,存在存在兼容性问题,解决方法如下:
var oElemt = 元素.previousElementSibling || 元素.previousSibling; if(oElemt){ oElemt.style...//进行节点操作 }
8.parentNode:获取当前元素的父节点。(父节点只有一个,因此没有兼容性问题)
9.offsetParent:获取离当前最近的一个有定位属性的父元素节点。
注:存在兼容性问题如下:
如果没有距离当前元素有定位属性的父元素节点时:
A.在标准浏览器下,会默认为body
B.在IE7及以下浏览器中,若当前元素没有定位就是body,有定位就是html
10.offsetLeft/offsetTop:获取当前元素到有定位属性的父元素的距离(偏移值)
注:存在兼容性问题如下:
A.在标准浏览器中,只要有定位属性的父级节点,left和top值就是相对于父级元素的距离;而其中如果有定位父级节点而元素本身无定位,在IE7及以下浏览器中指的是到body的距离;
B.如果没有定位父级元素,标准浏览器中是指到body的距离;而IE8及以下指的是到html的距离,而且他们的默认margin值不同,因此一定要提前清除默认样式
11.offsetWidth/offsetHeight:获取的是盒子的宽、高值,无单位,可用于计算
注意:style.width/style.height获取的是元素style属性里的宽高,有单位,无法直接用于计算
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScriptDOM全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScriptDOM所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。