ホームページ > 記事 > ウェブフロントエンド > セレクター API_html/css_WEB-ITnose
セレクター API_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:52:50997ブラウズ
HTML5 では、DOM から要素をより便利に選択するために、Web API に
document.querySelectordocument.querySelectorAll
という 2 つのメソッドが新たに導入されており、その機能は jQuery のセレクターに似ています。これにより、ネイティブ JavaScript コードの記述がはるかに簡単になります。
querySelector
このメソッドは、条件を満たす 1 つの要素を返します。パラメーターによって提供される CSS セレクターを使用して、深さ優先および事前順序トラバーサルの原則に従って DOM 内を検索し、条件を満たす最初の要素を返します。
querySelectorAll
このメソッドは、条件を満たすすべての要素を返します。結果は、nodeList コレクションです。検索ルールは前に説明したものと同じです。
<!DOCTYPE html><html> <body> <h3> h3 元素</h3> <h2> h2 元素</h2> <script> //querySelector会给所有元素的第一个元素加上样式 document.querySelector("h2, h3").style.backgroundColor = "red"; </script> </body></html> <!DOCTYPE html><html> <body> <h2> h2 元素</h2> <h3> h3 元素</h3> <script> //querySelectorAll获取所有元素，返回一个list集合 var o2 = document.querySelectorAll("h2, h3"); for(var i in o2){ o2[i].style.backgroundColor = "red"; } </script> </body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。