솔미는 성장중

[JS] DOM 본문

JavaScript

[JS] DOM

solming 2023. 7. 31. 18:29
728x90

Node 와 Element

노드 : HTML 요소, 텍스트, 주석 등 모든 것을 의미 //NodeList 

요소 : HTML 요소 의미 //HTMLcollection

<!--HTML-->
<body>
    <div class="parent">
      <!--주석입니당-->
      <div class="child">1</div>
      텍스트1
      <div id="child2" class="child">2</div>
      텍스트2
    </div>
</body>
const parent = document.querySelector('.parent')
console.log(parent.childNodes) //부모 요소의 모든 자식 "노드"확인
//NodeList(7) [text, comment, text, div.child, text, div.child, text]
//0: text (줄바꿈 문자)
//1: comment (주석)
//2: text (줄바꿈 문자)
//3: div.child
//4: text (줄바꿈 문자 & 텍스트1)
//5: div.child
//6: text (줄바꿈 문자 & 텍스트2)
//length: 7
console.log(parent.children) //부모 요소의 모든 자식 "요소"확인
//HTMLCollection(2) [div.child, div.child]
//0: div.child
//1: div.child
//length: 2

📌  HTML 요소를 객체 데이터로 출력하는 방법

console.dir(parent)

📌  요소는 노드에서 상속되어 만들어진 개념이다!

class N {}
class E extends N {}

console.dir(E) //class E
console.dir(N) //class N
console.dir(E.__proto__) //class N. 상속받은 클래스(상위클래스) 확인하는 방법

console.dir(Element) //f Element()
console.dir(Node) //f Node()
console.dir(Element.__proto__) //f Node()

 

검색 & 탐색

📌  document.getElementById()

  • HTML id 속성 값으로 검색한 요소를 반환
  • 여러 요소가 검색되면, 가장 먼저 찾은 요소 반환
  • 검색 결과 없으면 null 반환
  • ()안에 #없이 id이름만

 

📌  document.querySelector()

  • 'CSS 선택자'로 검색한 요소를 하나 반환
  • 여러 요소가 검색되면, 가장 먼저 찾은 요소 반환
  • 검색 결과 없으면 null 반환

 

📌  document.querySelectorAll()

  • 'CSS 선택자'로 검색한 모든 요소를 'NodeList'로 반환 (유사 배열)
  • NodeList 객체는 '.foreach()'를 사용할 수 있다.
const nodeList = document.querySelectorAll('.child')
console.log(nodeList)
//NodeList(2)
//0: div.child
//1: div#child2.child
nodeList.forEach(el => console.log(el.textContent))
//1
//2

유사 배열은 Array.from()을 통해 실제 배열로 바꿔줄 수 있고, 그럼 배열 데이터에서 쓸 수 있는 reverse 메소드 사용 가능.

console.log(Array.from(nodeList).reverse()) //0: div#child2.child  1: div.child

 

📌  N.parentElement 

  • 노드의 부모 요소를 반환
  • '노드'이기 때문에 주석이나 텍스트에서 .parentElement를 해도 동일한 결과가 나온다.
const el = document.querySelector('.child')
console.log(el.parentElement) //<div class="parent">...</div>

 

📌  E.closet()

  • 자신을 포함한 조상 요소 중 'CSS 선택자'와 일치하는, 가장 가까운 요소를 반환
  • 요소를 찾지 못하면 null 반환
const el = document.querySelector('.child')
console.log(el.closet('div')) //<div class="child">1</div> -> 자기자신
console.log(el.closet('body')) //<body></body>
console.log(el.closet('.hello')) //null

 

📌  N.previousSibling / N.nextSiblig 

  • 노드의 이전 형제 / 다음 형제 노드를 반환
const el = document.querySelector('.child')
console.log(el.previousSibling) //#text -> /n이 들어있음. 줄바꿈 표시
console.log(el.nextSibling) //" 텍스트1 "

//참고로 앞에 배웠던 parentElement를 이렇게 활용도 가능하다.
console.log(el.previousSibling.parentElement) //<div class="parent">...</div>

 

📌  E.previousElementSibling / N.nextElementSiblig 

  • 요소의 이전 형제 / 다음 형제 노드를 반환

 

📌  E.children 

  • 요소의 모든 자식 요소 반환
  • HTMLCollection으로 반환, 객체 데이터 (유사배열)

 

📌  E.firstElementChild / E.lastElementChild 

  • 요소의 첫 번째 자식 / 마지막 자식 요소를 반환

 

생성 & 조회 & 수정

 

기본 HTML

<body>
    <div class="parent">
      <div class="child">1</div>
      <div class="child">2</div>
    </div>
</body>

 

 

📌  E.prepend() / E.append() 

  • 노드를 요소의 첫 번째 / 마지막 자식으로 삽입

JS

const parentEl = document.querySelector('.parent')

const el = document.createElement('div')
el.textContent = 'Hello!'

parentEl.prepend(new Comment(' 주석 '))
parentEl.append(el, 'Text!')

수정된 HTML

<body>
    <div class="parent">
    <!--주석-->
      <div class="child">1</div>
      <div class="child">2</div>
      <div>Hello!</div>
      Text!
    </div>
</body>

화면

1
2
Hello!
Text!

 

 

📌  E.remove() 

  • 요소를 제거
  • ex) el.remove()

 

📌  E.insertAdjacentElement() 

  • '대상 요소'의 지정한 위치에 '새로운 요소'를 삽입
  • 대상요소.insertAdjacentElement(위치, 새로운요소)
  • 위치:
    beforebegin: 대상 요소 이전 형제
    afterbegin: 대상 요소 내부 앞쪽
    beforeend: 대상 요소 내부 뒤쪽
    afterend: 대상 요소 다음 형제

JS

const childEl = document.querySelector('.child')

const newEl = document.createElement('span')
newEl.textContent = 'Hello World!'

childEl.insertAdjacentElement('beforebegin', newEl)

 

📌  N.insertBefore() 

  • '부모 노드'의 자식인 '참조 노드'의 이전 형제로 노드를 삽입
  • 부모노드.insertBefore(노드, 참조노드)

JS

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const newEl = document.createElement('span')
newEl.textContent = 'Hello World!'

childEl.insertBefore(newEl, childEl)
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const newEl = document.createElement('span')
newEl.textContent = 'Hello World!'

childEl.insertBefore(newEl, childEl)

수정된 HTML

<body>
    <div class="parent">
      <span>Hello World!</span>
      <div class="child">1</div>
      <div class="child">2</div>
    </div>
</body>

 

📌  N.contains() 

  • '주어진 노드'가 '노드' 자신을 포함해서 후손인지 확인
  • 노드.contains(주어진노드)

JS

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

console.log(parentEl.contains(childEl)) //true
console.log(parentEl.contains(parentEl)) //true
console.log(documnet.body.contains(parentEl)) //true. body태그는 queryselector로 찾을 필요 없음.
console.log(parentEl.contains(documnet.body)) //false

 

📌  N.textContent 

  • 노드의 모든 텍스트를 얻거나 변경한다. (말 그래도 글자를 삽입!!!)

JS

const childEl = document.querySelector('.child')
childEl.textContent = '7'
console.log(childEl.textContent) //7

 

📌  E.innerHTML 

  • 요소의 모든 HTML 내용을 하나의 문자로 얻거나, 새로운 HTML을 지정한다. (HTML 구조로 변환해서삽입!!!!)

JS

const el = document.querySelector('.parent')
console.log(el.innerHTML)
//<div class="child">1</div>
//<div class="child">2</div>

el.innerHTML = '<span style="color:blue;">Hello World!</span>'
//앞서 child클래스를 가진 두 개의 자식이 사라지고 화면엔 파란색 Hello World!가 남는다.

//같은 내용 다른 표현 (백틱 사용) <-- 추천
el.innerHTML = /*html*/ `
<div style="border:4px solid;">
  <span style="color:red;">Hello!</span>
  <span style="color:red;">Hello!</span>
</div>
`

 

📌  E.dataset

  • 요소의 각 'data-' 속성 값을 얻거나 지정

JS

const childEl = document.querySelector('.child')
const str = 'Hello world!'
const obj = {a:1, b:2}

//저장하기
el.dataset.helloWorld = str
el.dataset.object = JSOn.stringify(obj) //JSON 문자화

//사용하기
console.log(el.dataset.helloWorld) //Hello world!
console.log(el.dataset.object) //{"a":1, "b":2} <-문자
console.log(JSON.parse(el.dataset.object)) //{a:1, b:2} <-객체 즉, JS에서 객체 데이터로 사용할 수 있게 변환

수정된 HTML

<body>
    <div class="parent">
      <div class="child" data-hello-world="Hello world!" data-object="{"a":1,"b":2}">1</div>
      <div class="child">2</div>
    </div>
</body>

 

📌  E.tagName 

  • 요소의 태그 이름 반환

JS

const childEl = document.querySelector('.child')
console.log(childEl.tagName) //DIV

 

📌  E.id 

  • 요소의 'id' 속성 값을 얻거나 지정

JS

const childEl = document.querySelector('.child')
console.log(el.id) //id 속성 값을 얻는 방법
el.id = 'child1' //id 속성 값을 지정하는 방법
console.log(el.id) //child1

 

📌  E.className 

  • 요소의 'class' 속성 값을 얻거나 지정
  • 주로 값을 얻어 확인하는 용도로만 씀. (지정할 땐 classList가 더 편리함)

JS

const childEl = document.querySelector('.child')
console.log(el.className) //class 속성 값을 얻는 방법
el.className = 'child1 active' //class 속성 값을 지정하는 방법 (2개의 클래스 name 추가)
console.log(el.className) //child child1 active

 

📌  E.classList 

  • 요소의 'class' 속성 값을 제어
  • .add() : 새로운 값을 추가
    .remove() : 기존 값을 제거
    .toggle() : 값을 토글
    .contains() : 값을 확인

JS 예시

el.classList.add('active')

el.classList.toggle('active') //토글 메소드-> active클래스 없으면 만들고, 있으면 없애고.

 

📌  E.style 

  • 요소의 'sytle' 속성(인라인 스타일)의 CSS 속성 값을 얻거나 지정
  • 인라인 스타일이여서 우선 순위가 높으니 사용 시 주의하자.

JS 

const el = document.querySelector('.child')
console.log(el.style) //CSS로 지정할수있는 다양한 속성 값들이 객체 데이터로 출력됨.

//개별 지정하는 방법
el.style.width = '500px'
el.style.position = 'absolute'

//*********** 한번에 지정하는 방법 *************
Object.assign(el.style,{
  width: '500px',
  position: 'absolute'
})

 

📌  window.getComputedStyle() 

  • 요소에 적용된 스타일 객체를 반환
  • 즉, CSS 또는 style태그 내에서 적용시킨 스타일을 불러오는 것.

JS 예시

const el = document.querySelector('.child')
const styles = window.getComputedStyle(el)

console.log(styles.width) //500px
console.log(styles.position) //absolute

 

📌  E.getAttribute()  와  E.setAttribute()

  • 요소에서 특정 속성 값을 얻거나 지정
  • Attribute : HTML 속성을 지정할 때 지칭
    Property: CSS, JS에서 속성을 지정할 때 지칭
  • el.setAttribute(지정하고자하는 HTML속성, 실제 지정할 값)

JS

const el = document.querySelector('.child')

el.setAttribute('title','HelloHello')
console.log(el.getAttribute('title')) //HelloHello

 

📌  E.hasAttribute()  와  E.removeAttribute()

  • 요소에서 특정 속성 값을 확인하거나 제거
  • el.setAttribute(지정하고자하는 HTML속성, 실제 지정할 값)

JS

const el = document.querySelector('.child')

console.log(el.hasAttribute('class')) //class속성이 있으니 true

el.removeAttribute('class')
console.log(el.hasAttribute('class')) //class 속성이 사라져서 false

console.log(el) //<div>1</div> <- class속성이 사라진 모습!

 

728x90

'JavaScript' 카테고리의 다른 글

[JS] DOM : 크기 & 좌표 구하기  (0) 2023.08.02
[JS] 불변성  (0) 2023.07.31
[JS] fetch()  (0) 2023.07.31
[JS] 동기/비동기 (콜백 패턴, promise, Async & Await, Resolve, Reject, 에러 핸들링, 반복문에서의 비동기)  (0) 2023.07.31
[JS] 모듈  (0) 2023.07.23
'JavaScript' Related Articles more