>웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 DOM 요소를 얻는 방법

JavaScript에서 DOM 요소를 얻는 방법

青灯夜游
青灯夜游원래의
2021-04-07 19:14:246190검색

메서드: 1. ID를 통해 가져오기 위해 getElementById 메소드를 사용합니다. 2. 이름 값을 통해 가져오기 위해 getElementsByName 메소드를 사용합니다. 4. 태그 이름을 통해 가져오기 위해 getElementsByTagName 메소드를 사용합니다. 선택기를 통해.

JavaScript에서 DOM 요소를 얻는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

DOM 요소를 가져오는 JS 메서드(8가지 방법)

  • ID로 가져오기(getElementById)
  • 이름 속성으로(getElementsByName)
  • 태그 이름으로(getElementsByTagName)
  • 클래스 이름으로(getElementsByClassName)
  • 패스 선택기는 요소를 가져옵니다(querySelector)
  • 선택기(querySelectorAll)를 통해 요소 집합을 가져옵니다.
  • html을 가져오는 방법(document.documentElement)
  • document.documentElement는 html 태그를 가져오는 데 특별히 사용됩니다.
  • 방법 body 가져오기( document.body)
  • document.body는 특별히 body 태그를 얻는 데 사용됩니다.

1. ID로 가져오기(getElementById)

document.getElementById('id')
  • 컨텍스트는 문서여야 합니다.
  • 매개변수를 전달해야 합니다. 매개변수는 문자열 유형이며 요소의 ID를 얻는 데 사용됩니다.
  • 반환 값은 하나의 요소만 가져오고, 찾을 수 없으면 null을 반환합니다.

2. 이름 속성(getElementsByName)을 통해

document.getElementsByName('name')
  • 컨텐츠
  • 는 매개변수를 전달해야 요소의 이름 속성을 얻을 수 있습니다.
  • 반환값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

[추천 학습: javascript 고급 튜토리얼]

3. 태그 이름(getElementsByTagName)을 통해

JavaScript에서 DOM 요소를 얻는 방법

  • 컨텍스트는 문서일 수도 있고 요소일 수도 있습니다.
  • 매개변수는 요소의 태그 이름 속성을 가져오는 데 사용되며 대소문자를 구분하지 않습니다.
  • 반환 값은 클래스 배열입니다. 찾을 수 없으면 빈 배열이 반환됩니다.

4 클래스 이름(getElementsByClassName)을 통해

var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated
  • 컨텍스트는 문서 또는 요소일 수 있습니다.
  • 매개변수는 요소의 클래스 이름입니다.
  • 반환값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

5. 선택기(querySelector)를 통해 요소 가져오기

document.querySelector('.animated')
  • 컨텍스트는 문서일 수도 있고 요소일 수도 있습니다.
  • 매개변수는 "p .className"과 같은 선택기입니다.
  • 반환 값은 첫 번째 요소만 가져옵니다.

6. 선택기(querySelectorAll)를 통해 요소 집합 가져오기

document.querySelector('.animated')
  • 컨텍스트는 문서 또는 요소일 수 있습니다.
  • 매개변수는 "p .className"과 같은 선택기입니다.
  • 반환 값은 배열과 유사합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 JavaScript에서 DOM 요소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.