JavaScript - 3.子节点 + 兼容 + 循环控制

3 DOM的扩展

3.1父节点parentNode

// html

    
苹果隐藏
    
梨子隐藏
    
香蕉隐藏
    
菠萝隐藏


// js
var aTags = document.getElementsByTagName("a");
for(var i =0;i

3.2 浏览器兼容性的区别

// html

    
1
    
2
    
3


// js
var test = document.getElementById("test");
alert(test.childNodes.length);  //chrome下结果为7,IE9以下结果为3
//在chrome下将空的文本节点,也算在内容
var test = document.getElementById("test");
var childs =test.childNodes;
for(key in childs){
   if(childs[key].nodeType==1){
        childs[key].style.background="red";
    }
}

子节点
◆ childNodes  // 所有节点,包含空文本节点,IE9 以下不包含文本节点
◆ children    // 所有子元素. IE都支持
◆ firstChild  // 第一个子节点 , 包含空文本 , IE9以下为元素节点不包括空文本节点
◆ firstElementChild  //  第一个子元素, IE9以下不支持
◆ lastChild  // 最后一个子节点 , 包含空文本, IE9以下为元素节点不包括空文本节点
◆ lastElementChild  // 最后一个子元素, IE9以下不支持

兄弟节点
◆ nextSibling // 下一个兄弟节点 , 包含空文本 , IE9 以下不包含空文本节点
◆ nextElementSibling  // 下一个兄弟元素 , IE9以下不支持
◆ previousSibling // 上一个兄弟节点 , 包含空文本 , IE9 以下不包含空文本节点
◆ previousElementSibling  // 上一个兄弟元素 , IE9以下不支持

3.3 用 document.all 解决浏览器兼容性问题

// 语法 ( document.all 为IE提供的方法,当在IE下运行时)
if(document.all){
    //IE下
}else{
    //其他浏览器下
}

// html

    
1
    
2
    
3


// js

3.4 获取元素的位置信息

offsetParent  //获取给了定位元素的父级
offsetLeft      //返回元素的水平偏移位置。
offsetTop      //返回元素的垂直偏移位置。
offsetWidth  //返回元素的宽度
offsetHeight //返回元素的高度

javascript 的 offset、client、scroll 使用方法详解

3.5 控制语句的 中断(break) 和 跳过(continue) 方法

◆ break  //中断循环
for(var i=0;i<6;i++){
        console.log(i);
        if(i==5){
            break;
        }
    }
◆ continue  //跳过继续循环
for(var i=0;i<6;i++){
        if(i==2){
            continue
        }
        console.log(i);
    }

3.6 函数的传参( 不定参arguments )

// 参数的个数可变,参数以数组形式写入
// 对传入的参数求和
function sum(){
        var result=0;
        for(var i = 0;i