javascript_javascript 기술의 querySelector 및 querySelectorAll 사용 소개
- WBOY원래의
- 2016-05-16 17:58:151263검색
처음에는 많은 사람들이 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 코드:
코드 복사
코드는 다음과 같습니다. 목록 항목 1 목록 항목 2 ;/li>
h4 외부 1 /h4>
#log {
;div id= "inner">
h4 외부 1 /h4>
h4 외부 2
🎜>
css 코드:
코드 복사
코드는 다음과 같습니다.
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만 지원합니다).
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.