티스토리 뷰

HTML & CSS

DOM

Aairon 2018. 11. 29. 23:53
반응형

* nodeName 

 - 노드가 요소 노드 인 경우 nodeName 특성은 태그 이름을 리턴합니다.

 - 노드가 속성 노드 인 경우, nodeName 특성은 속성의 이름을 리턴합니다.

 - 다른 노드 유형의 경우 nodeName 등록 정보는 다른 노드 유형에 대해 다른 이름을 리턴합니다.


*className

 - 클래스 이름을 리턴


*innerHTML

 - 태그안의 내용을 리턴

 - html에 값을 넣을 때도 사용


* attrubutes

 - element들을 하나하나 분석해 볼 수 있음


* children

 - 태그의 자식 태그(하위 태그)

 - 유사 배열로 리턴 됨


*childNodes

 - 공백을 포함함

 - 태그의 앞 / 태그 / 태그의 뒤 / 태그 ....


  <div>

  여기에 글을 쓰고

  <span> 여기도 글을 씀 </span>   

   </div>


div.children.length // 1

div.childNodes.length // 3

 


* getElementsByTagName


* getElementById

 - document.getElementById('id')


* getElementsByClassName

 - document.getElementsByClassName('class')

 - 배열의 형태로 리턴


* querySelector / querySelectorAll

 - document.querySelector('#id')

 - document.querySelector('.class') / class 중 첫번째 리턴

 - document.querySelectorAll('.class') / 배열의 형태로 리턴


* event handler

 

<html> 

  <button id="btn">버튼</button>


<js>

  var el = document.getElementId('btn');


  el.onclick = event;


  function event() {

    console.log('클릭');

  }



반응형

'HTML & CSS' 카테고리의 다른 글

문자 인코딩 차이점 ( EUC-KR, UTF-8)  (0) 2019.10.11
viewport 속성  (0) 2019.08.10
css 공부 노트  (0) 2019.07.09
HTML 문서의 정보  (0) 2019.05.28
html 태그 문법  (0) 2018.08.02
댓글