DOM 객체를 작동하는 Js 프로세스

Js 작업DOM 객체의 과정을 요약하자면, 요소를 선택하는 다양한 방법의 속도를 살펴봤습니다. 기본 방법은 jQUERY 블록보다 거의 8배 빠르며, 속도는 IE9의 것입니다.

문서 요소 선택 방법:

1. ID로 요소 선택(getElementById)
1) 사용법: document.getElementById("domId")
여기서 domId는 문서의 id 속성 값입니다. 2) 호환성: IE8보다 낮은
IE 브라우저의 경우 getElementById 메소드 구현은 요소 ID 번호의 대문자와 소문자를 구분하지 않으며 name 속성과 일치하는 요소를 반환합니다.
2. 이름으로 요소 선택(getElementsByName)
1) 사용 방법: document.getElementsByName("domName")
여기서 domName은 선택할 요소의 이름 속성 값입니다.
2) 설명: a. nodeList 컬렉션입니다(Array와 다름). b. ID 속성과 달리 name 속성은 일부 DOM 요소(양식 양식, 양식 요소, iframe, img)에서만 유효합니다. 이는 양식 데이터 제출을 용이하게 하기 위해 name 속성이 생성되었기 때문입니다. ~ ~ 따라서 document.domName을 통해 해당 dom 객체를 참조할 수 있습니다
3) 호환성: IE에서 일치하는 ID 속성 값을 가진 요소도 함께 반환됩니다.

3. 태그 이름으로 요소를 선택합니다(
getElementsByTagName
)
1) 사용 방법: element .getElementsByTagName("tagName") 여기서 element는 유효한 DOM 요소(문서 포함)입니다. tagName은 DOM 요소의 태그 이름입니다. 2) 설명: a. 반환 값은 nodeList 컬렉션입니다. 배열)
메소드는 해당 메소드를 호출하는 요소의 하위 요소만 선택할 수 있습니다. ㅋㅋㅋ ~                                                . 예를 들어 문서의 이미지, 양식 및 링크 속성은 ,

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

4. CSS 클래스(getElementsByClassName)를 통해 요소 선택
1) 사용 방법: element.getElementsByClassName("classNames")
중 요소는 유효한 DOM 요소입니다(문서 포함). l classNames는 Element.GetelementsByClassName("Class2 Class1")과 같은 CSS 클래스 이름의 조합입니다(여러 클래스 사이의 공백은 여러 공백으로 구분될 수 있음). class2 스타일(스타일의 스타일은 구별되지 않음)
2) 설명: a. 반환 값은 nodelist 집합입니다(Array와 다름)
b. 이 방법은 해당 요소의 자손만 선택할 수 있습니다. 메소드를 호출합니다.
3) 호환성: IE8 이하 브라우저는 getElementsByClass
Name 메소드


5를 구현하지 않습니다.
CSS 선택기

를 통해 요소를 선택합니다. 1) 사용 방법: document.querySelectorAll("selector")
여기서 Selector는 합법적입니다. CSS 선택기
2) 설명: a. 반환 값은 nodeList 컬렉션입니다(Array와 다름) 3) 호환성: IE8 이하 브라우저는 CSS2 표준 선택기 구문만 지원합니다.

이 내용을 읽고 나면 방법을 마스터하셨을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:


CSS를 사용하여 이미지 배경의 텍스트 내용을 숨기는 방법

Vue+CSS3을 사용하여 대화형 효과를 만드는 방법

DIV를 높이에 맞게 조정하는 방법

위 내용은 DOM 객체를 작동하는 Js 프로세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!