• JavaScript DOM(문서 객체 모델)
    • DOM 구조
    • DOM 요소 접근
    • DOM 요소 추가


JavaScript DOM(문서 객체 모델:Document Object Model)


  • index.html을 켜서 개발자 도구에 들어가서 Element를 확인한다.
  • 그럼 아래와 같이 코드를 확인할 수 있는데 개발자도구 console을 활용하여 값을 변경해볼 것이다.!
  • 편의상 입력을 >로 표기하고, 출력은 <으로 표기한다.


size_main

size_main


  • 콘솔에서 querySelector를 이용해 id를 불러와서 배경색을 바꿔주면 변경이 되는 것을 확인할 수 있다.
> document.querySelector("#jsMode").style.backgroundColor = 'pink'
< "pink"

size_main


  • input부분을 화면에서 숨기고싶으면 style.visibility을 이용하여 숨겨준다.
> document.querySelector("input").style.visibility = 'hidden'
< "hidden"

size_main


  • 웹문서를 직접 수정하지않고 자바스크립트를 이용하여 수정했다.
  • 이것이 가능한 이유는 document를 사용하면 자바스크립트에서 웹문서의 소스를 전부 인식할 수 있기 때문.
  • document는 수많은 DOM 요소 중 하나이다.
  • 콘솔에 document를 입력하면 웹문서의 소스를 그대로 불러온다.

size_main


DOM구조

  • DOM은 웹 문서의 요소를 부모요소, 자식요소로 구분한다.(트리구조)
<body> - 부모요소
	<h1>title</h1> - 자식요소
	<p>content</p> - 자식요소
</body>
  • 위의 코드는 아래와 같이 그림으로 표현할 수 있다.

size_main


  • DOM 트리는 웹문서의 HTML 요소만 표현하는것이 아니라, HTML요소가 품고있는 텍스트, 이미지도 자식으로 간주하여 DOM 트리에 표현한다.

size_main


[[정리]]

  • 웹 문서의 태그는 요소(Element)노드로 표현
  • 태그가 품고있는 텍스트는 해당 요소 노드의 자식노드인 텍스트노드(Text node)로 표현
  • 태그의 속성은 모두 해당 요소 노드의 자식인 속성(Attribute) 노드로 표현
  • 주석은 주석노드(Comment node)로 표현


DOM 요소 접근

  • getElementByID()
    • DOM 요소를 id선택자로 접근하는 함수

size_main

> document.getElementById("jsMode")
< <button id=​"jsMode">​Fill​</button>​


  • getElementsByClassName()
    • DOM 요소를 class값으로 찾아내는 함수
    • id 선택자와 다르게 웹 문서안에서 여러번 사용할 수 있음
    • 2개 이상의 웹 요소에 접근

size_main

  • 배열의 인덱스를 사용하여 원하는 요소를 가져올 수 있다. size_main


  • getElementByTagName()
    • DOM 요소를 태그 이름으로 찾아내는 함숱
    • 여기서 태그란 <h1>, <p>와 같은 것을 뜻한다.
  • title 태그를 가져오는 예제 size_main

size_main


  • querySeletor(), querySeletorAll()
    • DOM 요소를 다양한 방법으로 찾아주는 함수
    • id 값 앞에는 #을 붙이고, class 값 앞에는 .을 붙인다.
    • 태그 값은 기호없이 태그이름만 사용하면 된다.
    • querySeletor() 함수와 함께 class 선택자나 태그 이름을 사용할 때는 여러 요소 중 첫번째 요소에만 접근할 수 있다.

size_main

  • querySeletor를 사용하게되면 HTMLCollection이 아니라 NodeList라고 표기되는데, 이것은 여러개의 노드를 모아놓은 것으로 배열과 비슷하다고 생각하면 된다.


자바스크립트에서 웹 요소정도만 변경한다면 getElementByID(), getElementsByClassName(), getElementByTagName()를 사용하고, 웹 요소 뿐만 아니라 텍스트나 속성 변경, 텍스트 추가의 경우에는 querySeletor(), querySeletorAll() 함수를 사용한다.


DOM에 새로운 요소 추가하기

  • createElement() : 새 요소 노드를 만든다.
  • createTextNode() : 텍스트 내용이 있을 경우, 텍스트 노드를 만든다.
    • appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가한다.
  • createAttribute() : 요소에 속성이 있을 경우 속성 노드를 만든다.
  • setAttributeNode() : 속성 노드를 요소 노드에 연결한다.
    • appendChild() : 새로 만든 요소 노드를 부모 노드에 추가한다.


  • h1 태그를 만들어 title 변수에 할당
  • Painting Board라는 텍스트 노드를 만들어 newText 변수에 할당
  • Painting Board 텍스트 노드를 h1 태그에 자식노드로 추가한 뒤, body에 추가한다.
  • class를 만들어 makeClass 변수에 할당
  • makeClass.value에 “jsClass” 값을 할당
  • setAttributeNode를 이용하여 클래스를 title변수에 할당한다.


size_main

size_main


참고