JS를 사용하여 DOM 요소를 선택하는 간단한 방법

JSDOM 요소를 선택하는 간단한 방법 이 문서에서는 js지식을 학습하는 데 사용할 수 있는 jsdom 선택 방법을 요약합니다~~

문서 요소 선택 방법:

1 , ID로 요소 선택(getElementById)

1) 사용 방법: document.getElementById("domId")
여기서 domId는 선택할 요소의 id 속성 값입니다.

2) 호환성: IE browser의 IE8 버전은 대소문자를 구분하지 않고 getElementById 메소드를 구현하고 name 속성과 일치하는 요소를 반환합니다.

2. 이름으로 요소 선택(getElementsByName)

1) 사용 방법: document.getElementsByName("domName")
여기서 domName은 선택할 요소의 이름 속성 값입니다.

2 ) 설명: a. 반환 값은 nodeList 컬렉션입니다(Array와 다름)

b. ID 속성과 달리 name 속성은 일부 DOM 요소(양식 양식, 양식 요소, iframe, img)에서만 유효합니다. 이는 양식 데이터 제출을 용이하게 하기 위해 name 속성이 생성되었기 때문입니다.

c. form, img, iframe, applet, embed 및 object 요소에 대한 name 속성을 설정할 때 name 속성 값에 따라 이름이 지정된 속성이 Document 개체에 자동으로 생성됩니다. 따라서 해당 dom 개체는 document.domName

3) 호환성: IE에서 일치하는 ID 속성 값을 가진 요소도 함께 반환됩니다.

3. 태그 이름으로 요소를 선택합니다. getElementsByTagName)

1) 사용법: element.getElementsByTagName("tagName")

여기서 element는 유효한 DOM 요소(문서 포함)입니다.

tagName은 DOM 요소의 태그 이름입니다

2) 설명 : a. 반환 값은 nodeList 컬렉션입니다(Array와 다름)

b. 이 메서드는 이 메서드를 호출하는 요소의 하위 요소만 선택할 수 있습니다.
c.tagName은 대소문자를 구분하지 않습니다.
d. tagName이 *이면 모든 요소를 ​​선택한다는 의미입니다(규칙 b 적용).
e.HTMLDocument는 태그 노드에 액세스하기 위한 일부 바로가기 속성을 정의합니다. 예를 들어 문서의 이미지, 양식 및 링크 속성은 ,

, 태그 요소 컬렉션을 가리키는 반면 document.body 및 document.head는 항상 본문과 헤드를 가리킵니다. 태그(head 선언이 태그로 표시되지 않으면 브라우저는 document.head 속성도 생성합니다)

4. CSS 클래스(getElementsByClassName)를 통해 요소 선택

1) 사용 방법: element.getElementsByClassName( "classNames")

그 중 요소는 유효한 DOM 요소(문서 포함)입니다.
classNames는 CSS 클래스 이름의 조합입니다(여러 클래스 이름은 공백으로 구분되며 여러 공백으로 구분할 수 있음). getElementsByClassName("class2 class1")은 요소에 class1 및 class2 스타일이 모두 적용된 요소의 하위 항목을 선택합니다(스타일 이름은 순서가 없습니다).


2) 설명: 반환 값은 nodeList 컬렉션입니다( Array와 다름)

b. 이 메서드는 선택적으로만 호출할 수 있습니다. 이 메서드가 사용하는 요소의 하위 요소입니다.

3) 호환성: IE8 이하 브라우저는 getElementsByClass

Name 메소드

5를 구현하지 않습니다. CSS 선택기
1) 사용법: document.querySelectorAll("selector" )

그 중 selector는 합법적인 CSS 선택자입니다

2) 설명: a. 반환 값은 nodeList 컬렉션입니다(Array와 다름)

3) 호환성: IE8 이하 버전에서 탐색 도구는 CSS2만 지원합니다. 표준 선택기 구문

위는 js 운영 DOM의 다양한 방법입니다. 자세한 내용은

PHP 중국어 웹사이트

~

에서 검색하세요. 관련 권장 사항:

js 작업 배열 튜토리얼에 대한 자세한 설명

js 작업 DOM 객체 인스턴스에 대한 자세한 설명

JS 작업 DOM의 몇 가지 일반적인 방법에 대한 간략한 분석

위 내용은 JS를 사용하여 DOM 요소를 선택하는 간단한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!