javascript_javascript 기술의 querySelector 및 querySelectorAll 사용 소개-JS 튜토리얼-php.cn

처음에는 많은 사람들이 jquery의 선택기를 이 두 API와 비교할 것입니다(저도 마찬가지입니다). 유사점과 차이점을 비교하는 것은 괜찮지만, 이로 인해 일부 학생들은 특히 DOM에서 이 API를 호출할 때 브라우저에서 이 두 API의 구현을 오해하게 되었습니다. 요소.
다음은 jsFiddle 예제입니다. 이를 설명하기 위해 사용하겠습니다.
js 코드:

코드 복사 코드 다음과 같습니다:

(function(global) {
global.doc = document;
global.body = doc.getElementsByTagName('body')[0];
global . $ = function(id) {
return doc.getElementById(id);
}
global.Logger = function(id) {
this.logElem = $(id); this .logArr = [];
};
global.Logger.prototype = {
생성자: global.logger,
append: function(comment) {
this.logArr.push( '

' 주석 '

');
},
flush: function() {
this.logElem.innerHTML = this.logArr.join(''); 🎜 >},
clear: function() {
this.logElem.innerHTML = '';
this.logArr = [];
})( this );
(function() {
var logger = new Logger('log');
var items = $('inner').querySelectorAll('#main h4.inside');
logger.append(items.length);
for(var i = 0, len = items.length; i < len; i ) {
logger.append(items[i].innerHTML);
}
logger.flush();
})();
(function(global) {
global.doc = document;
global.body = doc.getElementsByTagName( ' body')[0];
global.$ = function(id) {
return doc.getElementById(id)
}
global.Logger = function(id) {
this .logElem = $(id);
this.logArr = [];
};
global.Logger.prototype = {
생성자: global.logger,
함수( comment ) {
this.logArr.push('

' comment '

')
},
flush: function() {
this.logElem.innerHTML = this.logArr.join('');
},
clear: function() {
this.logElem.innerHTML = '';
this.logArr = []; }
};
})(this);
(function() {
var logger = new Logger('log');
var items = $('inner'). querySelectorAll ('#main h4.inside');
logger.append(items.length)
for(var i = 0, len = items.length; i < len; i ) {
logger .append(items[i].innerHTML);
}
logger.flush()
})()

html 코드:

코드 복사

코드는 다음과 같습니다.

;div id= "inner">

h4 내부 1

h4 내부 2

h4 외부 1 /h4>

h4 외부 2

🎜>

css 코드:

코드 복사

코드는 다음과 같습니다.

#log {

font-size: 10px; } 오해는 $('inner').querySelectorAll('#main h4 구현을 이해하는 데 있습니다. .inside'). 많은 사람들이 처음에는 거의 모든 사람들이 div[id='inner']의 하위 항목에서 직접 검색한다고 생각합니다(저도 마찬가지입니다). 이 #main은 약간 짜증납니다. 실제로 선택기 문자열을 기반으로 전체 문서를 검색한 다음 div[id='inner']에 속하는 하위 노드를 반환합니다. 많은 분들이 궁금해하실 텐데요, 그렇다면 부모 노드를 기준으로 자식 노드를 직접 검색하여 구현해 보는 것은 어떨까요? elem.getElementsByTagName과 마찬가지로 유연한 선택기 문자열을 갖는 것이 내 아이디어입니다. querySelector는 일치하는 첫 번째 요소만 반환하거나, 일치하는 요소가 없으면 null을 반환합니다. querySelectorAll은 일치하는 요소의 컬렉션을 반환합니다. 일치하는 요소가 없으면 빈 노드 목록(노드 배열)을 반환합니다.

반환된 결과는 정적이며 문서 구조에 대한 이후 변경 사항은 이전에 얻은 결과에 영향을 미치지 않습니다.

현재 IE8, ff 및 Chrome은 모두 이 API를 지원합니다(IE8의 선택기 문자열은 css2.1만 지원합니다). 