document物件中的querySelector方法使用
阿新 • • 發佈:2019-01-01
<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); }