zoukankan      html  css  js  c++  java
  • 2015.7.12js-11(DOM基础)

    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";
    }
  • 相关阅读:
    Python Excel 合并 去重
    前端 导出为Excel 数据源为table表格 table中的字段7-1变成了7月1号解决
    SpreadJS 基本信息
    Python 模拟向四面八方拖动
    Python 淘宝联盟-佣金设置 批量设置佣金和服务费
    Python 模拟鼠标滚轮 滚动页面
    评审恩仇录——我为什么愿意执行代码评审
    浅谈专有云MQ存储空间的清理机制
    三只松鼠:阿里云数据中台基座上的多渠道、多业态生长
    谈AK管理之基础篇
  • 原文地址:https://www.cnblogs.com/alantao/p/4641708.html
Copyright © 2011-2022 走看看