1. 程式人生 > >document物件中的querySelector方法使用

document物件中的querySelector方法使用

<div id="box">
	    <div class="box">0</div>
	    <div class="box">1</div>
	    <div class="box">2</div>
	    <div class="box">3</div>
	    <div class="box">4</div>
	  </div>

/**
	     * document.querySelector 這個document物件的querySelector是HTML5API新定義的方法
	     * 如果是id選擇器傳放一個引數“#id”,如果是class的選擇器則傳入一個".class"
	     * id選擇器返回這個節點元素物件
	     * class選擇器返回document節點或id節點元素物件中的第一個元素。
	     */
	    var boxId = document.querySelector("#box");
	    var boxClass = boxId.querySelector(".box");
	    var arr = [];
	    if ( boxClass instanceof Array ) {
  	    for (var i = 0, len = boxClass.length; i < len; i++) {
  	       alert(boxClass[i].innerHTML);
  	    }
	    } else if ( boxClass instanceof Object ) {
	       alert(nextSibling(boxClass).innerHTML);
	    } 
	    
	    function nextSibling(curvObj) {
	      
	      /**
	       * 1 元素節點 
	       * 2屬性
	       * 3文字
	       * 8註釋
	       * 9document
	       */ 
	      var currentNode = curvObj.nextSibling;
	      
        if ( currentNode.nodeType == 1 ) {
          return currentNode;
        }
   
        return nextSibling(currentNode);
	    }