js querySelector()의 기본 사용법(그래픽 튜토리얼)-JS 튜토리얼-php.cn

js querySelector()의 기본 사용법(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-19 14:08:06

원래의

3319명이 탐색했습니다.

querySelector() 메서드는 지정된 선택기와 일치하는 첫 번째 요소만 반환합니다. 모든 요소를 반환해야 하는 경우

querySelector 정의 및 사용

querySelector() 메서드 대신 querySelectorAll() 메서드를 사용하세요. 쿼리Selector() 메서드는 지정된 CSS 선택기와 일치하는 문서의 요소 하나를 반환합니다.
참고: querySelector() 메서드는 지정된 선택기와 일치하는 첫 번째 요소만 반환합니다. 모든 요소를 반환해야 하는 경우 대신 querySelectorAll() 메서드를 사용하세요.

브라우저 지원

표의 숫자는 이 방법을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

Syntaxdocument.querySelector(CSS 선택기)

매개변수 값

매개변수 ~ > > 하나 이상의 일치하는 요소를 지정하는 CSS 선택기입니다. ID, 클래스, 유형, 속성, 속성 값 등을 사용하여 요소를 선택할 수 있습니다. 선택기가 여러 개인 경우 쉼표로 구분하고 일치하는 요소를 반환합니다.

기술 세부정보

DOM 버전: 선택기 레벨 1 문서 개체

반환 값: 지정된 CSS 선택기와 일치하는 첫 번째 요소. 찾을 수 없으면 null을 반환합니다. 잘못된 선택기가 지정되면 SYNTAX_ERR 예외가 발생합니다.

예:

문서에서 id="demo"인 첫 번째 요소 가져오기:

<p id="demo">id="demo" 的 p 元素</p>
<p id="demo">id="demo" 的 p 元素</p>
<p> 点击按钮修改过第一个 id="demo" 的 p元素内容</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>

로그인 후 복사

추가 예제

1 문서에서 첫 번째

요소 가져오기:

<p>这是一个 p 与元素。</p>
<p>这也是一个 p 与元素。</p>
<p>点击按钮修改文档中第一个 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("p").style.backgroundColor = "red";
}
</script>

로그인 후 복사

2. 문서에서 class="example"이 있는 첫 번째 요소:

<h2 class="example">class="example" 的标题</h2>
<p class="example"> class="example" 的段落。</p> 
<p>点击按钮为第一个 class="example" 的元素添加背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector(".example").style.backgroundColor = "red";
}
</script>

로그인 후 복사

3. 문서에서 class="example"이 있는 첫 번째

요소를 가져옵니다.

<h2 class="example">class="example" 的标题</h2>
<p class="example">class="example" 的段落。</p> 
<p>点击按钮为第一个带有 class="example" 的 p 元素添加背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("p.example").style.backgroundColor = "red";
}
</script>

로그인 후 복사

4. 첫 번째 요소:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style>
a[target] {
 background-color: yellow;
}
</style>
</head>
<body>

<p> CSS 选择器 a[target] 确保所有有 target 属性的链接背景颜色为黄色：</p>
<a href="//www.jb51.net">jb51.net</a>
<a href="//www.disney.com" target="_blank">disney.com</a>
<a href="//www.wikipedia.org" target="_top">wikipedia.org</a>
<p>点击按钮为带有 target 属性的链接添加红色背景。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("a[target]").style.border = "10px solid red";
}
</script>
</body>
</html>

로그인 후 복사

5 다음 예에서는 여러 선택기의 사용을 보여줍니다.

두 개의 선택기(

및

)를 선택한다고 가정해 보겠습니다.
다음 코드는 문서의 첫 번째

요소에 배경색을 추가합니다.

<h2> h2 元素</h2>
<h3> h3 元素</h3>
<script>
document.querySelector("h2,h3").style.backgroundColor = "red";
</script>

로그인 후 복사

6. 그러나

요소가 문서의

h3> 요소는 지정된 배경색을 설정합니다.

<h3> h3 元素</h3>
<h2> h2 元素</h2>
<script>
document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

로그인 후 복사

7. 선택한 콘텐츠를 가져와서 URL 점프를 실현하세요

<select id="language-picker">
<option value="cs">Česky</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="jp">日本語</option>
<option value="pl">Polski</option>
<option value="pt">Português</option>
<option value="zh" selected>中国的</option>
</select>
<script>
 var lang = document.querySelector(&#39;#language-picker&#39;);
 lang.addEventListener(&#39;change&#39;, function(e) {
 if (e.target.value === &#39;en&#39;) {
  window.location = &#39;/&#39;;
 } else {
  window.location = &#39;/&#39; + e.target.value;
 }
 });
</script>

로그인 후 복사

위 내용은 앞으로 모든 분들에게 도움이 되기를 바랍니다.