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";
    }
  • 相关阅读:
    神经网络学习之----单层感知器
    神经网络学习之----神经网络发展史
    神经网络学习之----神经网络概述
    C语言几种常见的字符串输入
    基于单链表实现集合的交集、并集、差集的运算
    关于单链表的一些基本操作
    输入20个整数存放到一个单向链表中,并顺序逆序输出
    《你的灯亮着吗》阅读笔记
    场景调研
    站立会议总结09
  • 原文地址:https://www.cnblogs.com/alantao/p/4641708.html
Copyright © 2011-2022 走看看