상투적인 jacascript DOM 노드 획득

선언:이것 은 필자 가 배 운 후에 자신의 이해 와 정리 이다.잘못 되 거나 궁금 한 점 이 있 으 면 지적 해 주세요.저 는 계속 업데이트 하 겠 습 니 다!
getElementById()
obj.getElement ById(id)이 방법 은 인자(이 요소 의 id)를 받 고 찾 으 면 이 요소 의 대상 을 되 돌려 주 며 존재 하지 않 으 면 null 로 되 돌려 줍 니 다.
모든 HTML 요 소 는 id 속성 을 가 질 수 있 습 니 다.문서 에서 이 값 은 유일 해 야 합 니 다.
브 라 우 저 에 여러 id 이름 이 있 으 면 CSS 스타일 은 이 id 이름 의 모든 요소 에 적용 되 지만 자바 script 스 크 립 트 는 이 id 이름 이 처음 나타 난 요소 에 만 적 용 됩 니 다.
getElementsByTagName()
obj.getElementsByTagName(tagName)방법 은 요소 의 태그 이름 을 가 져 오 는 인 자 를 받 고 0 개 이상 의 요 소 를 포함 하 는 클래스 배열 대상 HTML Collection 을 되 돌려 줍 니 다.클래스 배열 대상 의 항목 에 접근 할 수 있 는 괄호 문법 이나 item()방법 을 사용 할 수 있 습 니 다.length 속성 은 대상 의 요소 의 수량 을 표시 합 니 다.
getElementsByName()
obj.getElementsByName(name)방법 은 주어진 name 특성 을 가 진 모든 요 소 를 되 돌려 줍 니 다.
IE9 및 아래 브 라 우 저 는 폼 요소 에 만 getElementsByName()방법 을 사용 할 수 있 습 니 다.
IE9 및 아래 브 라 우 저 에서 getElementsByName()방법 을 사용 해도 id 속성 에 맞 는 요 소 를 되 돌려 줍 니 다.따라서 name 과 id 속성 을 같은 값 으로 설정 하지 마 십시오.
 
getElementsByClassName()
HTML 5 에 getElements ByClassName()방법 이 추가 되 었 습 니 다.
javascript 에서 class 는 보존 글자 이기 때문에 className 속성 을 사용 하여 HTML 의 class 속성 값 을 저장 합 니 다.
obj.getElementsByClassName(classaName)방법 은 하나 이상 의 클래스 이름 을 포함 하 는 문자열 로 지정 한 클래스 가 있 는 모든 요 소 를 가 진 클래스 대상 HTMLCollection 을 되 돌려 줍 니 다.여러 개의 유형 명 이 들 어 왔 을 때 유형 명 의 선후 순 서 는 중요 하지 않다.getElementsByTagName()과 유사 합 니 다.이 방법 은 HTML 문서 대상 document 에 도 사용 할 수 있 고 element 요소 대상 에 도 사용 할 수 있 습 니 다.
IE8 및 아래 브 라 우 저 는 getElementsByClassName()을 지원 하지 않 습 니 다.
class 클래스 이름 을 조작 할 때 className 속성 을 통 해 클래스 이름 을 추가,삭제,교체 해 야 합 니 다.className 은 문자열 이기 때문에 문자열 의 일부분 만 수정 하 더 라 도 매번 전체 문자열 의 값 을 설정 해 야 합 니 다.className 문자열 에서 클래스 이름 을 삭제 하려 면 클래스 이름 을 뜯 어서 원 하지 않 는 것 을 삭제 하고 새 문자열 로 다시 맞 춰 야 합 니 다.
classList
HTML 5 는 모든 요소 에 classList 속성 을 추가 합 니 다.이 classList 속성 은 새로운 집합 유형 인 DOMTokenList 의 인 스 턴 스 입 니 다.자신 이 얼마나 많은 요 소 를 포함 하고 있 는 length 속성 을 표시 하 는 length 속성 이 있 습 니 다.모든 요 소 를 얻 으 려 면 item()방법 을 사용 할 수도 있 고 괄호 법 을 사용 할 수도 있 습 니 다.
IE9 및 이하 브 라 우 저 는 classList 속성 을 지원 하지 않 습 니 다.
classList 는 다음 과 같은 네 가지 방법 이 있 습 니 다.우 리 는 주로 이러한 방법 으로 유형 명 을 조작 합 니 다.classList 속성 이 있 으 면 className 속성 은 거의 쓸모 가 없습니다.
obj.classList.add(value); 주어진 문자열 값 을 목록 에 추가 하고 반환 값 이 없 으 며 값 이 존재 하면 추가 하지 않 습 니 다.
obj.classList.contains(value); 목록 에 주어진 값 이 있 는 지 여 부 를 표시 합 니 다.존재 하면 true 로 돌아 갑 니 다.그렇지 않 으 면 false 로 돌아 갑 니 다.
obj.classList.remove(value); 목록 에서 주어진 문자열 을 삭제 하고 값 을 되 돌려 주지 않 습 니 다.
obj.classList.toggle(value); 목록 에 주어진 값 이 존재 한다 면 삭제 하고 false 로 돌아 갑 니 다.목록 에 주어진 값 이 없 으 면 추가 하고 true 로 돌아 갑 니 다.

<div class="test abc"></div>
  <script>
   var oTest = document.getElementsByClassName('test')[0];
   var oTestAbc = document.getElementsByClassName('test abc')[0];
   var oAbc = document.getElementsByClassName('abc')[0];
   console.log(oTest === oTestAbc);//true
   console.log(oAbc === oTestAbc);//true
   console.log(oAbc === oTest);//true
   
   console.log(oTest.classList);//["test", "abc", value: "test abc"] 
   console.log(oTest.classList[0]);//"test" 
   console.log(typeof oTest.classList[0]);//"string" 
   console.log(oTest.classList.item(0));//"test" 
   
   //add()              ，     ，      ，    ;
   oTest.classList.add('def');
   console.log(oTest.classList);//["test", "abc", "def", value: "test abc def"] 
   
   //contains()             ，       true，    false;
   console.log(oTest.classList.contains('def'));//true
   console.log(oTest.classList.contains('abcde'));//false
   
   //remove()            ，     ；
   oTest.classList.remove('abc');
   console.log(oTest.classList);//["test", "def", value: "test def"]
   
   //toggle()             ，      false；           ，       true;
   console.log(oTest.classList.toggle('hello'));//true
   console.log(oTest.classList);//["test", "def", "hello", value: "test def hello"]
   console.log(oTest.classList.toggle('test'));//false
   console.log(oTest.classList);//["def", "hello", value: "def hello"]
  </script>

선택 기 API
HTML 5 는 query Selector(),query Selector All(),matches Selector()등 3 가지 방법 을 확장 하여 CSS 선택 기 를 통 해 DOM 문 서 를 조회 하여 요 소 를 인용 하 는 기능 을 네 이 티 브 API 로 바 꾸 었 으 며,분석 과 트 리 조회 작업 은 브 라 우 저 내부 에서 컴 파일 된 코드 를 통 해 이 루어 져 성능 을 크게 개선 하 였 다.
obj.query Selector(selector)방법 은 CSS 선택 자 를 받 아 이 모드 와 일치 하 는 첫 번 째 요 소 를 되 돌려 줍 니 다.일치 하 는 요 소 를 찾 지 못 하면 null 로 되 돌려 줍 니 다.이 방법 은 문서 document 형식 에 도 사용 할 수 있 고 요소 element 형식 에 도 사용 할 수 있 습 니 다.IE7 및 이하 지원 되 지 않 습 니 다.
obj.query Selector All(selector)은 CSS 선택 자 를 받 아 클래스 배열 대상 을 되 돌려 줍 니 다.일치 하 는 요소 가 없 으 면 null 이 아 닌 빈 클래스 배열 대상 을 되 돌려 줍 니 다.IE7 및 이하 지원 하지 않 음;
obj.matches Selector(selector)방법 은 CSS 선택 문자 인 자 를 받 습 니 다.이 선택 문자 와 요소 가 일치 하면 true 로 돌아 갑 니 다.그렇지 않 으 면 false 로 돌아 갑 니 다.
object.matches Selector(selector)는 호환성 문제 가 있 습 니 다.IE9+브 라 우 저 는 msMatches Selector()방법 을 지원 합 니 다.fireforx 는 mozMatches Selector()방법 을 지원 합 니 다.safari 와 chrome 은 webkitMatches Selector()방법 을 지원 합 니 다.

<div id="wrapper">
   <ul class="box">
    <li class="no1">   </li>
    <li class="no2">   </li>
    <li class="no3">   </li>
    <li class="no4">   </li>
    <li class="no5">   </li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiNo1 = oWrapper.querySelector('.no1');
   //obj.querySelector(selector)       CSS   ，              ，
   var oLiFirst = oWrapper.querySelector('li');
   var oFirstLi = oWrapper.querySelector('ul > li');
   console.log(oLiNo1 === oLiFirst);//true
   console.log(oLiNo1 === oFirstLi);//true
   console.log(oLiFirst === oFirstLi);//true
   console.log(oLiNo1.innerHTML , oLiFirst.innerHTML , oFirstLi.innerHTML);//           
   
   //obj.querySelectorAll(selector)     CSS   ，         
   var oWrapperAll = document.querySelectorAll('#wrapper');
   console.log(oWrapperAll);//[div#wrapper]
   console.log(oWrapperAll[0] === oWrapper);//true
   
   var oWrapperArray = oWrapperAll[0];
   var oLiFirstAll = oWrapperArray.querySelectorAll('li');
   var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0];
   console.log(oLiFirstArrayNo1 === oLiNo1);//true
   console.log(oLiFirstAll[1].innerHTML);//   
   
//   console.log(oWrapperArray.matchesSelector('#wrapper'));
   //TypeError: oWrapperArray.matchesSelector is not a function
   
   console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true
   //obj.matchesSelector(selector)       ，
   //IE9+      msMatchesSelector()   ，
   //firefox    mozMatchesSelector()   ，
   //safari   chrome   webkitMatchesSelector()   。
  </script>

선택 기 API 를 사용 할 때 주의해 야 할 것 은:
query Selector All()방법 으로 얻 은 클래스 배열 대상 은 비 동적 실시 간 이 므 로 길이 등의 실제 값 을 계산 하려 면 다시 가 져 오 는 것 이 좋 습 니 다.물론 예전 의 getElement ById()같은 것 은 이런 문제 가 없 었 다.
selector 클래스 방법 이 요소 에서 호출 될 때 지정 한 선택 기 는 전체 문서 에서 일치 한 다음 결과 집합 을 걸 러 내 서 지정 한 요소 의 후대 요소 만 포함 하도록 합 니 다.이것 은 일반적인 요소 가 아 닌 선택 기 문자열 에 요 소 를 포함 할 수 있 는 조상 을 의미 하기 때문에 일반적인 요소 에 어 긋 나 는 것 으로 보인다.따라서 후대 선택 기 가 나타 나 면 이 문 제 를 방지 하기 위해 매개 변수 에 현재 요소 의 선택 기 를 명시 적 으로 추가 할 수 있 습 니 다.

<div id="wrapper">
   <ul class="box">
    <li class="no1">   </li>
    <li class="no2">   </li>
    <li class="no3">   </li>
    <li class="no4">   </li>
    <li class="no5">   </li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiLast = oUl.querySelector('li:last-of-type');
   var oLiAll = oUl.querySelectorAll('ul > li');
   console.log(oLiLast.innerHTML);//   
   console.log(oLiAll.length);//5
   
   var newLi = document.createElement('li');
   newLi.innerHTML = '   Li，     ';
   oUl.appendChild(newLi);
   //querySelectorAll()                  ；
   console.log(oLiLast.innerHTML);//   
   console.log(oLiAll.length);//5
   console.log(oUl.querySelector('li:last-of-type').innerHTML);//   Li，     
   console.log(oUl.querySelectorAll('ul > li').length);//6
  </script>
  
  
  
  <div class="wrapper">
   <div class="test1"></div>
   <div class="test2"></div>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('.wrapper');
   //selector           ，                  ，        ，               。
   //          ，                               
   console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2]
   //           oWrapper       ，div    div，        ，           
   
   //         ，       ，                   
   console.log(oWrapper.querySelectorAll('.wrapper div div'));//[]
   console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2]
  </script>

이상 의 이 상투적인 jacascript DOM 노드 획득 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.