码迷,mamicode.com
首页 > Web开发 > 详细

2015.7.12js-11(DOM基础)

时间:2015-07-12 23:06:10      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

1.childNodes,获取子节点,本身就是一个数组,可以通过下标childNodes[i]来获取某个子节点。

alert(obj.childNodes.length);    //高级浏览器会有空白节点的存在

//循环根据节点的nodeType类型来判断是不是元素节点
for(var i = 0, len = aElement.childNodes.length; i < len; i++){   if(aElement.childNodes[i].nodeType == 1){     aElement.childNode[i].style.background = "red";   } }

 

2.首尾子节点

firstChild,firstElementChild;

lastChild,lastElementChild;

3.兄弟节点

previousSibling,previousElementSibling;

nextSibling,nextElementSibling;

//用if来判断firstChild与firstElementChild来兼容

if(obj.firstElementChild){
  obj.firstElementChild.style.background = "red";
}else{
  obj.firstChild.style.background = "red";
}

 

其他节点同理

//删除空白节点,来兼容firstChild

function cleanWhiteSpace(element){
  for(var i = 0; i < element.chiledNodes.length; i++){
    var node = element.childNodes[i];      //循环当前的子节点
    if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){  
      node.parentNode.removeChild();    //\S匹配任何可见字符,当节点是文本节点与是!/\S/,非可见字符的时候,就删除这些节点
    }
  }
}

 

4.父元素parentNode

//点击当前a标签,查找a标签的父级,然后隐藏

var arrA = document.getElementsByTagName("a");
  for(var i = 0, len = arrA.length; i < len; i++){
    arrA[i].onclick = function(){
      this.parentNode.style.display = "none"
    }
  }

 

5.用className选择元素

//选取class为box的li,将其变色

var aLi = document.getElementsByTagName("li");
for(var i = 0, len = aLi.length; i < len; i++){
  if(aLi[i].className == "box"){
    this.style.background = "red";
  }
}

 

//封装

function getByClass(objParent,targetClass){
  var aResult = [];
  var aElement =objParent.getElementsByTagName("*");
  for(var i = 0, len = aElement.length; i < len; i++){
    if(aElement[i].className == targetClass){
      aResult.push(aElement[i]);
    }
  }
  return aResult;            //返回class为box的数组
}

//调用  var aBox = getByClass(aNav,"box");      //得到class为box的数组

for(var i = 0, len = aBox.length; i < len; i++){
  aBox[i].style.background = "red";
}

 

2015.7.12js-11(DOM基础)

标签:

原文地址:http://www.cnblogs.com/alantao/p/4641708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!