querySelector系列方法相比 getElementsBy 系列方法有什么區別?


  • querySelector 和  querySelectorAll 相比下面這些方法有什么區別?

getElementsByTagName

getElementsByClassName

getElementsByName

  • 1. W3C 標准

querySelectorAll 屬於 W3C 中的 Selectors API 規范 。而 getElementsBy 系列則屬於 W3C 的 DOM 規范

  • 2. 瀏覽器兼容

querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。

getElementsBy 系列,以最遲添加到規范中的 getElementsByClassName 為例,IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已經支持該方法了。

  • 3. 接收參數

querySelectorAll 方法接收的參數是一個 CSS 選擇符。而 getElementsBy 系列接收的參數只能是單一的className、tagName 和 name。代碼如下

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')0].getElementsByClassName('c');

需要注意的是,querySelectorAll 所接收的參數是必須嚴格符合 CSS 選擇符規范的。

  • 4. 返回值

=querySelectorAll 返回的是一個 Static Node List,而 getElementsBy 系列的返回的是一個 Live Node List。

		var qq1 = document.getElementsByClassName("qq");
		var qq2 = document.querySelectorAll(".qq");
		console.log(qq1);
		console.log(qq2);

看瀏覽器的返回結果

HTMLCollection [ <div.qq>, <div.qq>, <div.qq>, <div.qq> ]
NodeList [ <div.qq>, <div.qq>, <div.qq>, <div.qq> ]

NodeList 對象會包含文檔中的所有節點,如 Element、Text 和 Comment 等。

HTMLCollection 對象只會包含文檔中的 Element 節點。

所以在現代瀏覽器中,querySelectorAll 的返回值是一個靜態的 NodeList 對象,而 getElementsBy 系列的返回值實際上是一個 HTMLCollection 對象 。

  • 5.在舉個例子
		var qq1 = document.getElementsByClassName("qq");
		var qq2 = document.querySelectorAll(".qq");
                console.log(qq1);
                console.log(qq2);   
		for(var i = 0; i < qq1.length; i++) {
			qq1[i].onclick = function() {
				this.parentNode.removeChild(this);
				console.log(qq1);
			}
		}

把qq1內容點擊刪除之后,結果如左邊的圖,再把上面代碼for循環里面的qq1改成qq2,連續點擊刪除之后結果如右邊的圖

Nodelist雖然html中的元素在瀏覽器界面刪除了,但是在數組中還是存在這幾個元素;

HTMLCollection,元素刪除,數組也刪除。

所以在現代瀏覽器中,querySelectorAll 的返回值是一個靜態的 NodeList 對象,而 getElementsBy 系列的返回值實際上是一個 HTMLCollection 對象 。

在一般情況中他們兩個是差不多的,但是如果你需要多次復雜操作取到的數組的話他們兩個會有所區別。

我也是在前幾天遇到的情況,后來查資料才知道他們有這種區別。希望對大家所幫助,不對的地方希望大神指點!!

 

 

 

 

 


免責聲明!

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



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