深入JavaScript之DOM应用

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

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

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

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

nodeType == 3 -> 文本节点

nodeType == 1 -> 元素节点

childNodes 和 nodeType配合使用

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

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

for (var i=0;i
        

         Salin selepas log masuk
        
       

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

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个必须注意的基础知识

Atas ialah kandungan terperinci 深入JavaScript之DOM应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!