HTML5中類jQuery選擇器querySelector和querySelectorAll的使用


支持的瀏覽IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+

1.querySelector()方法接收一個選擇符,返回第一個匹配的第一個元素,如果沒有返回null

eg:var body = document.querySelector('body');

  var myDiv = document.querySelector('#myDiv');

  var selected = document.querySelector('.selected');

  var img = document.body.querySelector('img .button');

 

2.querySelectorAll()方法返回的一個NodeList的實例。

eg: var ems = document.getElementById('myDiv').querySelectorAll('em');

  var strongs = document.querySelectorAll('p strong');

 

3.matchesSelector(),Eelement類型新增的方法。接收css 選擇符,如果調用元素與該選擇符匹配,返回true,否則返回false

目前除IE6-IE8,Firefox/Chrome/Safari/Opera/IE 的最新版本均已實現,但方法都帶上了各自的前綴.

function matchesSelector(element,selector){

  if(element.matchesSelector){

    return element.matchesSelector(selector);

  }else if(element.msMatchesSelector){

    return element.msMatchesSelector(selector);

  }else if(element.mozMatchesSelector){

    return element.mozMatchesSelector(selector);

  }else if(element.webkitMatchesSelector){

    return element.webkitMatchesSelector(selector);

  }else{

  }

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM