dom 선택기, 노드 유형

요소 노드 보기

문서는 전체 문서를 나타냅니다

.

document.getElementByID()//요소 id는 i8의 브라우저에서 id의 대소문자를 구분하지 않고name 속성과 일치하는 요소(name = id)

를 되돌려줍니다.

getElementsByTagName ()//태그 이름 123 var div = document.getElementsByTagName('div'); 페이지 안의 모든div를 꺼내서 하나의 클래스 그룹에 넣으면 하나의 클래스를 대표하기 때문에div.style.background = "red"는 오류를 보고할 수 있습니다. 오류를 보고하지 않기 위해 이div를 이렇게 파일로 꺼냅니다.getElementsByTagName('div')[0]; 비록 페이지에div가 하나밖에 없지만, 선택한 것은 영원히 한 그룹이기 때문에 각표를 붙여야 한다.

getElementsByName();//, 일부 탭만 적용될 수 있음을 주의하십시오 (폼, 폼 요소,img,ifame)

getElementsByClassName();//유명 i8과 i8은 단번에 없습니다

querySelector()//css 선택기는 ie7과 ie7 이하 버전에 없음

querySelectorAll()//css 선택기는 ie7과 ie7 이하의 버전에 없습니다

노드 트리 반복

parentNode 부모 노드(맨 위에 있는 parentNode는 #document);

childNodes 서브노드들

firstChild 첫 번째 서브노드

lastChild 마지막 하위 노드

nextSibling 다음 형제 노드previousSibling 앞 형제 노드

노드의 주요 유형: 요소 노드 - 1 속성 노드 - 2 텍스트 노드 - 3 주석 노드 - 8 document - 9 DocumentFragment - 11

     
               1
     
     
     

div.childNodes.length  -->7  
div strong   1         strong     

       123
        
     
     

      

원소 노드 수 기반 스트리밍

parentElement은 현재 요소의 부모 요소 노드를 되돌려줍니다 (i 호환되지 않음)

children은 현재 원소의 원소 서브노드만 되돌려줍니다

nodechildElementCount === node.children.length 현재 원소 노드의 하위 원소 개수

first Element Child가 첫 번째 원소 노드를 되돌려줍니다. - last Element Child가 마지막 원소 노드를 되돌려줍니다

nextElementSibling/previousElementSibling이 되돌아오는 것은 다음/앞의 형제 요소 노드

노드의 네 가지 속성

nodeName 요소의 탭 이름, 대문자로 표시, 읽기 전용

nodeValue Text 노드 또는Comment 노드의 텍스트 내용, 읽기와 쓰기

nodeType 이 노드의 유형, 읽기 전용

attributes Element 노드의 속성 집합 노드의 방법 Node.hasChildNodes();

    123
        
       
      
      
      
      


    var div = document.getElementsByTagName('div')[0];
    function retElementChild(node){
        var arr = [],
            child = node.childNodes,
            len = child.length;
        for (var i = 0; i < len; i++) {
            if(child[i].nodeType === 1){
                arr.push(child[i]);
            }
        }
        return arr;

    }
   console.log(retElementChild(div));


---------------------------------------------



    123
        
       
      
      
      
      


    var div = document.getElementsByTagName('div')[0];
    function retElementChild(node){
        var temp = {
              length : 0,
              push : Array.prototype.push
              splice : Array.prototype.splice
        },
            child = node.childNodes,
            len = child.length;
        for (var i = 0; i < len; i++) {
            if(child[i].nodeType === 1){
                temp.push(child[i]);
            }
        }
        return temp;

    }
   console.log(retElementChild(div));