Element 객체는 무엇입니까?

Element 객체는 HTML 페이지의 모든 요소에 대한 속성과 방법을 제공하는 DOM의 표준 사양에서 사용할 수 있습니다.모든 HTML 요소는 HTNLElement 객체이며 이 객체는 Element 객체에 상속됩니다.

       

    var ms = document.getElementById('ms');

    console.log(ms instanceof HTMLDivElement);//true
    console.log(ms instanceof Node);//true
    console.log(ms instanceof Element);//true

    //Element      Node   
    console.log(Element.prototype instanceof Node);//true
    // HTMLButtonElement    HTMLElement
    console.log(HTMLDivElement.prototype instanceof HTMLElement);// true
    // HTMLElement    Element
    console.log(HTMLElement.prototype instanceof Element);//true

페이지 요소 찾기

Element 객체는 HTML 페이지의 모든 지정된 요소인 HTML 페이지의 속성과 방법을 제공합니다. Element 객체는 최상위 요소 내의 모든 지정된 요소를 배치합니다.

getElementByTagName(): 페이지 요소의 요소 이름을 통해 요소 찾기

getElementTbClassName (): 페이지 요소의class 속성 값을 통해 요소를 지정합니다

querySelector(): CSS 선택기를 통해 첫 번째 일치하는 요소 찾기

querySelectorAll(): CSS 선택기를 통해 일치하는 모든 요소 찾기

    
       
    
     


    
   
    
   


    //document    HTML    
    var ms = document.getElementsByTagName('li');
    console.log(ms);

    //Element         
    var novel = document.getElementById('novel');
    var li = novel.getElementsByTagName('li');
    console.log(li);

하위 요소 가져오기

children: 지정한 노드의 모든 하위 요소 가져오기

childElementCount: 톱니바퀴 원소의 모든 하위 원소의 개수 가져오기

firseElementChild: 지정된 노드의 첫 번째 하위 요소 가져오기

lastElementChlid: 지정된 노드의 마지막 하위 요소 가져오기

    
       
    
    
    
     


    var ms = document.getElementById('ms');
    //        -       
    var children = ms.children;
    console.log(children);

    //         
    var childElementCount = ms.childElementCount;
    console.log(childElementCount);

    var firEC = ms.firstElementChild;
    console.log(firEC);
    
    var lasEC = ms.lastElementChild;
    console.log(lasEC);

인접 형제 요소 가져오기

Element 객체의 다음 속성에서 인접한 형제 요소를 가져올 수 있습니다.

previous ElementSibling: 지정한 요소 앞에 있는 인접한 형제 요소 가져오기

nextElementSibling: 지정한 요소 뒤에 있는 인접한 형제 요소 가져오기

    
       
    
    
    
     


    var ms = document.getElementById('bm');
    //          
    var pes = ms.previousElementSibling;
    console.log(pes);

    var nes = ms.nextElementSibling;
    console.log(nes);

Element 객체 속성 작업

getattribute(): 지정한 요소의 속성 값 가져오기

setattribute(): 지정된 요소의 속성 값 설정

removeAttribute(): 지정한 요소의 속성 삭제

hasAttribute(): 지정된 속성이 있는지 판단

    
       
    
    
    
     


    var bm = document.getElementById('bm');
    //          
    var gab = bm.getAttribute('class');
    console.log(gab);
    //    
    bm.setAttribute('name','bmoo');
   //    
    bm.removeAttribute('name');
    //        
    console.log(ms.hasAttribute('name'));

innerHTML 속성

innerHTML 속성은 HTML 페이지에서 요소의 후손을 지정하는 HTML 코드를 나타냅니다.

    
       
    
    
    
     


    var ms = document.getElementById('ms');
    //       HTML  
    var html = ms.innerHTML;
    console.log(html);
    html +='<li>       </li>';
    ms.innerHTML=html