HTML5 Selectors API 操作

最新推荐文章于 2021-06-30 17:05:43 发布

guchengluoye

最新推荐文章于 2021-06-30 17:05:43 发布

阅读量757

点赞数

(1) Html5之前用来查找元素的js方法

getElementById(): 根据ID值查找并返回元素

getElementsByName(): 根据name值返回所有的元素

getElementsByTagName(): 根据标签名称与指定值相匹配的元素

(2) Html5中引入的方法

querySelector(): 根据指定的选择规则，返回在页面中找到的第一个匹配元素

querySelectorAll(): 根据指定规则返回页面中所有相匹配的元素

(3) selector API指定多个选择规则

var obj =document.querySelector(“.one”,”.two”);

选择文档中类名为one或two的第一个元素

querySelector()选择的是满足规则中任意条件的第一个元素，querySelectorAll()只要满足规则中的任何一个条件都会被返回，多天规则之间用逗号隔开

(4) 示例

[html] view plaincopy

<!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" onclick="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>

文章来源： http://blog.csdn.net/yaoqinzhou1943/article/details/6629677