HTML5 실제 전투 및 CSS 선택기 분석 - querySelector()

오늘은 HTML5 관련 지식을 중심으로 새로운 셀렉터를 주제로 소개하겠습니다. 오늘 소개할 선택자는 querySelector() 입니다. jQuery와 JavaScript의 두 가지 작성 방법을 비교하여 공유하겠습니다. HTML5를 배우려는 모든 사람에게 도움이 되기를 바랍니다.

querySelector() 메서드는 CSS 선택기를 수신하고 패턴과 일치하는 첫 번째 요소를 반환합니다. 일치하는 요소가 없으면 null이 반환됩니다. 간단한 예는 다음과 같습니다.

　1) 태그 가져오기

JavaScript 코드

var body = document.querySelector('body');

	body.style.background = "red";

	alert(body)//[object HTMLpElement]

　jQuery 코드

　미리보기 효과

　1. 자바스크립트

　2.jQuery

　2) 아이디 찾기

　HTML 코드

var $body = $("body");

$body.css({
	'background': "red"
});

alert($body) //[object Object]

JavaScript 코드

<p id="box1" class="box">梦龙小站</p>
<section id="box2" class="box">梦龙小站</section>

jQuery 코드

var box1 = document.querySelector('#box1');

	box1.innerHTML = "这是box1";

	alert(box1)//[object HTMLpElement]

미리보기 효과

1. 자바스크립트

2. jQuery

호출( 문서 유형) ) 메소드를 통해 문서 요소 범위 내에서 일치하는 요소를 찾습니다. querySelector() 메서드가 요소 유형을 통해 호출되면 일치하는 요소는 해당 요소의 하위 요소 범위 내에서만 검색됩니다. CSS 선택자는 상황에 따라 간단할 수도 있고 복잡할 수도 있습니다. 지원되지 않는 선택기가 전달되면 querySelector()는 오류를 보고합니다.

HTML5 실제 전투 소개와 CSS 선택자 querySelector() 분석입니다. HTML5는 더 많은 경험이 필요하고 많은 내용이 포함되어 있다는 점을 고려하면 구체적인 지식 포인트를 하나씩 소개하므로 각 기사가 반드시 그리 길지는 않을 것입니다. 이렇게 하면 나중에 검색이 쉬워진다는 점을 모두가 이해할 수 있기를 바랍니다. 여러분의 많은 응원과 사랑 부탁드립니다. HTML5와 관련된 더 많은 컨텐츠를 보시려면 HTML5의 실제 전투와 분석에 대한 Menglong Station 업데이트를 주목해주세요.

위 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!