querySelector、querySelectorAll选择元素示例



*.important {color:red;}  类名为important

HTML 5增加了一项新功能是自定义数据属性，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，
来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。
关于data-属性选择器
在实际开发时，您可能会发现它很有用，你可以根据自定义的 data- 属性选择相关的元素。例如使用querySelectorAll选择元素：

// 选择所有包含 'data-tea' 属性的元素
document.querySelectorAll('[data-tea]');
 
// 选择所有包含 'data-text-colour' 属性值为red的元素
document.querySelectorAll('[data-text-colour="red"]');

document.querySelector('#myheader') //returns the element with ID="myheader"
document.querySelector('p.description') //returns the P with class="description" element

document.querySelector('#content img:nth-of-type(1)') //returns the 1st image within container "#content"
document.querySelector('#myform input[type="radio"]:checked') //selects the checked radio button within "#myform"

document.querySelector('form[action="feedback.php"]') // references form with action="feedback.php"
document.querySelector('img[src^="http"]') // selects 1st image with src beginning with "http"
document.querySelector('img[src$="blank.gif"]') // selects 1st image with src ending in "blank.gif"

document.querySelector('#biography, #gallery') //returns either element "#biography" or "#gallery", depending on which one is found first within document tree

document.querySelectorAll('.mygroup') //returns all elements with class="mygroup"
document.querySelectorAll('option[selected="selected"]') //returns the default selected option within each SELECT menu
document.querySelectorAll('#mytable tr>td:nth-of-type(1)') //returns the first cell within each table row of "mytable"

document.querySelectorAll('a[src^="http"]') // selects all links with href beginning with "http"
document.querySelectorAll('a[href*="javascriptkit"]') // selects all links with href containing sub string 'javascriptkit'

document.querySelectorAll('#biography, #gallery') //returns both elements "#biography" and "#gallery" (inclusive)