深入JavaScript之DOM应用

这次给大家带来深入javascript之dom应用，使用javascript之dom应用的注意事项有哪些，下面就是实战案例，一起来看一下。

什么是DOM :
document ,节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫元素,DOM时,管叫节点;

浏览器支持情况
IE:10% Chrome:60% FF:99% 支持

DOM节点
childNodes:子节点    
nodeType:节点的类型

nodeType == 3 -> 文本节点

立即学习“Java免费学习笔记（深入）”；

nodeType == 1 -> 元素节点

childNodes 和 nodeType配合使用

    
    
    

    

    

    

    

    
abcdefg //文本节点abcdefg //元素节点

获取子节点
children:他只包括元素,不包含文本,兼容所有浏览器
故上面的例子可以这样写,简单粗暴!!!

for (var i=0;i
parentNode:父节点
例子：点击链接，隐藏整个li
parentNode示例:

    
    
    

    
11111隐藏
    
22222隐藏
    
33333隐藏
    
44444隐藏
offsetParent
 例子：获取元素在页面上的实际位置
 主要用作定位时,获取元素的实际父节点.
示例一:给第二个div2设置绝对定位,给div2的父节点div1什么也不设置,那么div2的offsetParent为body.
                        
     
 
  
示例二:给第二个div2设置绝对定位,给div2的父节点div1设置相对定位,那么div2的offsetParent为div1.
                        
     
 
  
2.DOM节点(2)
首尾子节点
有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
   //IE6-8    //oUl.firstChild.style.background='red';    //高级浏览器    //oUl.firstElementChild.style.background='red';
使用示例

    
1
    
2
    
3
兄弟节点 (使用同上)
有兼容性问题
nextSibling、nextElementSibling

							

								
								

									ZOOM 相册插件
									
jQuery 最令人印象深刻的应用之一就是对图片的处理，它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果。ZOOM 是一款全屏效果的 jQuery 图片切换展示插件，支持键盘前后按键切换，支持移动设备。
								
								下载 
							
						
previousSibling、previousElementSibling
3.操纵元素属性
元素属性操作
第一种：oDiv.style.display='block';
第二种：oDiv.style['display']='block';
第三种：Dom方式: oDiv2.setAttribute('display','none');
DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
4.用className选择元素
如何用className选择元素
选出所有元素
通过className条件筛选
初级用法

    
    
    

    

    

    

    

    

    

    
封装成函数
高级用法
   
    
       

          

          

          

          

          

         

         

       
5.创建、插入和删除元素
创建DOM元素
createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点
注意:appendChild(节点) 有两个作用:
(一)如果这个元素是通过createElement(标签名)创建出来的,那么它可以直接添加到新的父级;
(二).如果这个元素有父级, 那么1.先把元素从原有父级上删除;2.再添加到新的父级.
例子：为ul插入li

    
    
    
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
深入JavaScript之基础应用

JS的8个必须注意的基础知识