집 > 기사 > 웹 프론트엔드 > 당신을 위한 js 선택기의 종합 분석(기본 튜토리얼)

당신을 위한 js 선택기의 종합 분석(기본 튜토리얼)

亚连원래의: 2018-05-21 09:25:591294검색

이제 js 선택기에 대한 종합적인 분석을 가져오겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

네 가지 기본 JS 선택자가 있습니다: getElementById, getElementsByName, getElementsByTagName 및 getElementsByClassName 아래에서는 이 네 가지 선택자의 사용법을 하나씩 소개합니다.

1.getElementById(ID로 요소 가져오기)

Usage: document.getElementById("Id"); Id는 가져올 요소의 id 속성 값입니다.

2.getElementsByName(이름 속성으로 요소 가져오기)

Usage: document.getElementsByName("Name"); Name은 가져올 요소의 이름 속성 값입니다. 이 방법은 일반적으로 다음과 같은 경우에 양식 데이터를 제출하는 데 적합합니다. 요소는 form, img, iframe, applet, embed, object이며, name 속성을 설정할 때 name 속성 값의 이름을 딴 속성이 Document 객체에 자동으로 생성됩니다. 따라서 document.domName

3.getElementsByTagName(요소 이름으로 요소 가져오기)

Usage: document.getElementsByTagName(TagName)을 통해 해당 DOM 개체를 참조할 수 있습니다. TagName은 * 모든 요소를 가져오는 것을 의미할 때 문서를 DOM 요소로 대체할 수도 있지만 이 방법으로 DOM 요소 뒤에 있는 요소의 하위 집합만 얻을 수 있습니다.

4.getElementsByClassName(CSS 클래스를 통해 요소 가져오기)

Usage: document.getElementsByClassName(ClassName)은 가져올 요소의 CSS 클래스 이름입니다. 동시에 각 CSS 클래스는 공백으로 구분됩니다. 예를 들어 document.getElementsByClassName("class2 class1")은 class1 및 class2 스타일의 요소를 가져오며 DOM 요소 뒤에 있는 요소의 하위 집합만 가져올 수 있도록 문서를 DOM 요소로 대체할 수도 있습니다.

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
<p>我是通过标签获取</p>
<p id="box">我是通过id获取</p>
<p class="box1">我是通过class获取</p>
<form action="" name="box2">
  我是通过name获取
</form>
</body>
<script type="text/javascript">
  var p = document.getElementsByTagName("p");
  var box = document.getElementById("box");
  var box1 = document.getElementsByClassName("box1");
  var box2 = document.getElementsByName("box2");
</script>
</html>

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

당신을 위한 js 선택기의 종합 분석(기본 튜토리얼)

관련 기사