HTML5 Selectors API 操作

最新推荐文章于 2021-06-03 06:14:05 发布

yaoqinzhou1943

最新推荐文章于 2021-06-03 06:14:05 发布

阅读量1.8k

点赞数

分类专栏： HTML5 文章标签： html5 api class button table function

本文链接：https://blog.csdn.net/collection4u/article/details/6629677

版权

HTML5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

(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) 示例

<!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>

yaoqinzhou1943

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Selectors API 操作

(1) Html5之前用来查找元素的js方法getElementById(): 根据ID值查找并返回元素getElementsByName(): 根据name值返回所有的元素getElementsByTagName(): 根据标签名称与指定值相匹配的元素(2) Html
复制链接

扫一扫

专栏目录