알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

HTMLElement 본문

Web /웹브라우저 객체 API

HTMLElement

백곳 2017. 8. 30. 15:23

HTMLElement 


javascript or Jquery 를 사용할때에 선택한 html 속성에 대해 정확히 알아야 제어를 할수가 있습니다. 


www.w3.org  html 표준을 만드는 단체에서 그 속성을 서술해 놨고 우리는 찾아서 사용하기만 하면됩니다. 


자 일단 예제 코드를 보면서 이해도를 높이도록 하겠습니다. 

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="active">JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    console.log(li.constructor.name);
    var lis = document.getElementsByTagName('li');
    console.log(lis.constructor.name);
</script>
</body>
</html>


이제 크롬으로 실행을 시켜 결과값을 보겠습니다. 


위와 같이 2가지 타입이 로그로 나오는군요 .

HTMLLIElement

HTMLCollection

속성을 보는 페이지를 링크 시켜 놨습니다. 


이중에 1개만더 좀더 상세한 예제를 보겠습니다. 


<!DOCTYPE html>
<html>
<body>
<a id="anchor" href="http://opentutorials.org">opentutorials</a>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="list">JavaScript</li>
</ul>
<input type="button" id="button" value="button" />
<script>
    var target = document.getElementById('list');
    console.log(target.constructor.name);
 
    var target = document.getElementById('anchor');
    console.log(target.constructor.name);
 
    var target = document.getElementById('button');
    console.log(target.constructor.name);
 
</script>
</body>
</html>


결과값은 




그럼 홈페이지 속성 보겠습니다 .

interface HTMLLIElement : HTMLElement {

           attribute DOMString       type;

           attribute long            value;

};


interface HTMLAnchorElement : HTMLElement {

           attribute DOMString       accessKey;

           attribute DOMString       charset;

           attribute DOMString       coords;

           attribute DOMString       href;

           attribute DOMString       hreflang;

           attribute DOMString       name;

           attribute DOMString       rel;

           attribute DOMString       rev;

           attribute DOMString       shape;

           attribute long            tabIndex;

           attribute DOMString       target;

           attribute DOMString       type;

  void               blur();

  void               focus();

};


모두 HTMLElement 을 상속 받습니다. 

interface HTMLElement : Element {

           attribute DOMString       id;

           attribute DOMString       title;

           attribute DOMString       lang;

           attribute DOMString       dir;

           attribute DOMString       className;

};


위의 속성들을 보고 알맞게 선택자에 대한 속성 컨트롤을 할수가 있습니다. 


그리고 위와 같은 상속 관계를 트리 구조로 표한한 것을 DOM tree 하고 합니다..


DOM tree


(출처)


'Web > 웹브라우저 객체 API' 카테고리의 다른 글

javascript+django(csrf) 통신하기  (0) 2017.08.30
HTMLCollection  (0) 2017.08.30
DOM 제어대상 찾기  (0) 2017.08.21
[javascript] 창제어  (0) 2017.08.19
[DOM,BOM,javascript] 객체 제어 하기  (0) 2017.08.19
공유하기 링크
'Web /웹브라우저 객체 API' Related Articles more
Comments