권위있는 JavaScript 안내서에서 발췌 한 (스타일 선택기를 기반으로 요소를 찾는 jQuery의 궁극적 인 방법은 먼저 GetElementsByTagName (*)을 사용하여 모든 DOM 요소를 얻은 다음 스타일 선택기에 따라 모든 DOM 요소를 필터링하는 것입니다.
오늘 나는 다양한 요소 선택 방법의 속도를 시도했습니다. 기본 방법은 jQuery보다 약 8 배 빠릅니다. IE8은 가장 느립니다. IE9는 IE8보다 약 3 배 빠르며 Chrome은 최고를 수행하고 Firefox를 수행합니다).
문서 요소를 선택하는 방법 :
1. ID (getElementByid) 별 요소 선택
1) 사용 방법 : document.getElementById ( "domid")
여기서 Domid는 선택할 요소의 ID 속성 값입니다.
2) 호환성 : IE8 버전보다 낮은 브라우저는 요소 ID 번호의 경우를 구별하지 않으며 이름 속성과 일치하는 요소를 반환합니다.
2. 이름 별 요소 선택 (getElementsByName)
1) 사용 방법 : document.getElementsByName ( "domname")
여기서 domname은 선택할 요소의 이름 속성 값
2) 설명 : a. 반환 값은 Nodelist 컬렉션입니다 (배열과 다름)
비. ID 속성과 달리 이름 속성은 몇 개의 dom 요소 (양식 양식, 양식 요소, iframe, img)에서만 유효합니다. 형식 데이터의 제출을 용이하게하기 위해 이름 속성이 생성되기 때문입니다.
기음. Form, IMG, Iframe, Applet, Embed, Object Elements, Name 속성 값의 이름을 따서 명명 된 속성에 대한 이름 속성을 설정하는 경우 문서 객체에서 자동으로 작성됩니다. 따라서 해당 DOM 객체는 document.domname을 통해 참조 할 수 있습니다.
3) 호환성 : IE의 ID 속성 값과 일치하는 요소도 함께 돌아갑니다.
3. 태그 이름으로 요소 선택 (getElementsByTagName)
1) 사용 방법 : element.getElementsByTagName ( "tagname")
여기서 요소는 유효한 dom 요소 (문서 포함)입니다.
tagname은 dom 요소의 태그 이름입니다
2) 설명 : a. 반환 값은 Nodelist 컬렉션입니다 (배열과 다름)
비. 이 방법은 방법을 호출하는 요소의 자손 요소 만 선택할 수 있습니다.
기음. 태그 이름은 대소 문자를 사용하지 않습니다
디. tagname이 *인 경우 모든 요소가 선택되었음을 의미합니다 (b. 규칙에 책임이 있음)
이자형. htmldocument는 태그 노드에 액세스하기 위해 일부 바로 가기 속성을 정의합니다. 예를 들어, 문서의 이미지, 양식 및 링크 속성은 <Img>, <form> 및 <a> 태그 요소 수집을 가리키는 반면 Document.body 및 Document.head는 항상 신체 및 헤드 태그를 가리 킵니다 (선언 된 헤드 태그가 표시되지 않으면 브라우저도 문서를 만듭니다.
4. CSS 클래스를 통해 요소 선택 (GetElementsByClassName)
1) 사용 방법 : element.getElementsByClassName ( "ClassNames")
여기서 요소는 유효한 dom 요소 (문서 포함)입니다.
ClassNames는 CSS 클래스 이름의 조합입니다 (여러 클래스 이름은 여러 공간으로 분리 될 수있는 공백으로 분리됩니다).
예를 들어, element.getElementsByClassName ( "class2 class1")은 Class1과 Class2 스타일이 모두 적용되는 요소의 하강 요소에서 요소를 선택합니다 (스타일 이름은 순서를 구분하지 않음).
2) 설명 : a. 반환 값은 Nodelist 컬렉션입니다 (배열과 다름)
비. 이 방법은 방법을 호출하는 요소의 자손 요소 만 선택할 수 있습니다.
3) 호환성 : IE8 이하 브라우저는 getElementsByClassName 메소드를 구현하지 않습니다.
5. CSS 선택기를 통해 요소를 선택하십시오
1) 사용 방법 : Document.querySelectorall ( "선택기")
여기서 선택기는 법적 CSS 선택기입니다
2) 설명 : a. 반환 값은 Nodelist 컬렉션입니다 (배열과 다름)
3) 호환성 : IE8 이하의 브라우저는 CSS2 표준 선택기 구문 만 지원합니다.
JS에서 DOM 요소를 선택하는 간단한 방법은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.