DOM API querySelector與querySelectorAll的用法

DOM API querySelector與querySelectorAll的用法:  http://www.qttc.net/201309371.html

querySelectorAll與querySelector的區別是querySelectorAll找出所有匹配的節點並返回數組，querySelector找到一個后就返回節點對象。

找出所有標簽 document.querySelectorAll("*")

找出head下所有的標簽 document.head.querySelectorAll("*")

 

找出body標簽下的第一個div標簽

 

document.body.querySelectorAll("div")[0]

 

document.body.querySelector("div")

找出所有class=box的標簽 document.querySelectorAll(".box")

找出所有class=box的div標簽 document.querySelectorAll("div.box")

找出所有id=lost的標簽 document.querySelectorAll("#lost")

找出所有p標簽並且id=lost的標簽 document.querySelectorAll("p#lost")

找出所有name=qttc的標簽 document.querySelectorAll("*[name=qttc]")

 

找出所有存在name屬性的標簽 document.querySelectorAll("*[name]")

 

document.querySelectorAll("p.hot[name]")

 

document.querySelectorAll("p[class=hot][name]")

 

在 document 中選取 class 為 test 的 div 的子元素 p 的第一個子元素 

document.querySelector("div.test>p:first-child");

document.querySelectorAll("div.test>p:first-child")[0];

使用 querySelectorAll 給所有 class 為 emphasis 的元素加粗顯示

varemphasisText = document.querySelectorAll(".emphasis");

for( vari = 0 , j = emphasisText.length ; i < j ; i++ )

{

         emphasisText[i].style.fontWeight = "bold";

}

    document.querySelector('button').addEventListener('click', function(){  
        logger.updateCount();  
    });