(1) Html5之前用来查找元素的js方法
(2) Html5中引入的方法getElementById(): 根据ID值查找并返回元素
getElementsByName(): 根据name值返回所有的元素
getElementsByTagName(): 根据标签名称与指定值相匹配的元素
(3) selector API指定多个选择规则querySelector(): 根据指定的选择规则,返回在页面中找到的第一个匹配元素
querySelectorAll(): 根据指定规则返回页面中所有相匹配的元素
(4) 示例var obj =document.querySelector(“.one”,”.two”);
选择文档中类名为one或two的第一个元素
querySelector()选择的是满足规则中任意条件的第一个元素,querySelectorAll()只要满足规则中的任何一个条件都会被返回,多天规则之间用逗号隔开
<!DOCTYPE html> <html> <body> <section> <table> <tr> <td>A1</td> <td>B1</td> <td class="one">C1</td> </tr> <tr> <td class="two">A2</td> <td>B2</td> <td>C2</td> </tr> <tr> <td class="one">A3</td> <td class="two">B3</td> <td class="one">C3</td> </tr> </table> <button type="button" id="findBtn" οnclick="find()" autofocus>Find</button> </section> <script type="text/javascript"> function find(){ var findObj1 = document.querySelector("tr td"); alert("findObj1 = " + findObj1.innerHTML); //findObj1 = A1 var findObj2 = document.querySelectorAll("table tr td"); alert("table length = " + findObj2.length); //table length = 9 var findObj3 = document.querySelector(".one",".two"); alert("findObj3 = " + findObj3.innerHTML); //findObj3 = C1 var findObj4 = document.querySelectorAll(".two",".one"); alert("findObj4.length = " + findObj4.length); //findObj4.length = 2 for(var i=0; i<findObj4.length; i++){ alert("findObj4 = " + findObj4[i].innerHTML); //A2,B3 } } </script> </body> </html>