3 DOM的扩展

3.1父节点parentNode

// html
<ul>
    <li>苹果<a href="#">隐藏</a></li>
    <li>梨子<a href="#">隐藏</a></li>
    <li>香蕉<a href="#">隐藏</a></li>
    <li>菠萝<a href="#">隐藏</a></li>
</ul>

// js
var aTags = document.getElementsByTagName("a");
for(var i =0;i<aTags.length;i++){
      aTags[i].onclick=function () {
          this.parentNode.style.display="none";
          return false;
      }
}

3.2 浏览器兼容性的区别

// html
<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

// 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
<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

// js
<script>
    var test = document.getElementById("test");
    if(document.all){
        test.firstChild.style.background="pink"
    }else{
        test.firstElementChild.style.background="pink"
    }
</script>

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<arguments.length;i++){
            result+=arguments[i];
        }
        return result;
}
alert(sum(2,3))