javascript代码实例教程-JavaScriptDOM
脚本宝典收集整理的这篇文章主要介绍了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，请注明来意。
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件