[TIL / JavaScript] DOM 요소 조작

14116 단어 JavaScriptTILJavaScript

[JavaScript] DOM 요소 조작

className

• 클래스 속성값 전체를 가져오거나 수정할 수 있다.

elems.forEach(elem => {
  if (elem.className === 'red') {
	  elem.className = 'blue';
  }
});

classList

  • 개별적으로 클래스를 조작할 수 있다.
  • 다양한 메소드를 제공한다.

add()

  • 클래스 속성을 추가한다.

remove()

  • 클래스 속성을 제거한다

toggle()

  • 클래스 속성이 존재할 경우 제거하고, 그렇지 않으면 추가한다.

contains()

  • 클래스 속성의 존재 여부에 따라 boolean 값을 반환한다.

replace()

  • 클래스 속성을 새로운 클래스 속성으로 교체한다.
elems.forEach(elem => {
  if (elem.classList.contains('blue')) {
    elem.classList.replace('blue', 'red');
  }
});

id

  • id 속성을 가져오거나 수정할 수 있다.

getAttribute()

  • id 속성의 값을 문자열로 가져온다.

removeAttribute()

  • id 속성을 제거한다

hasAttribute()

  • id 속성의 존재 여부에 따라 boolean 값을 반환한다.

setAttribute()

  • id 속성과 값을 설정한다.
<!DOCTYPE html>
<html>
  <body>
  <input type="text">
  <script>
  const input = document.querySelector('input[type=text]');

  if (!input.hasAttribute('value')) {
    input.setAttribute('value', 'hello!');
  }
  console.log(input.getAttribute('value')); // hello!

  input.removeAttribute('value');
  console.log(input.hasAttribute('value')); // false
  </script>
  </body>
</html>

HTML 콘텐츠 조작

textContent

  • 요소의 텍스트 콘텐츠를 가져오거나 수정할 수 있다
  • 순수한 텍스트만 지정해야 하며 마크업을 포함시키면 문자열로 인식되어 그대로 출력된다.
<div id="divA">This is <span>some</span> text!</div>

document.getElementById('divA').textContent;
// This is some text!

document.getElementById('divA').textContent = '<h1>different!</h1>';
// <h1>different!</h1>

innerHTML

  • 해당 요소의 모든 자식 요소를 포함하는 콘텐츠를 하나의 문자열로 가져올 수 있다.
  • 마크업을 인식한다.
const ul = document.querySelector('ul');
console.log(ul.innerHTML);
/*
	      <li id="one" class="red">Seoul</li>
        <li id="two" class="red">London</li>
        <li id="three" class="red">Newyork</li>
        <li id="four">Tokyo</li>
*/

요소 생성 및 삭제

createElement()

  • 태그 이름을 인자로 전달하여 요소를 생성한다.
const newElem = document.createElement('li');

createTextNode()

  • 텍스트를 인자로 전달하여 텍스트 노드를 생성한다.
const newText = document.createTextNode('Beijing');

appendChild()

  • 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
// newText를 newElem 자식으로 DOM 트리에 추가한다.
newElem.appendChild(newText);

const container = document.querySelector('ul');

// newElem을 container의 마지막 자식으로 DOM 트리에 추가된다.
container.appendChild(newElem);

removeChild()

  • 인자로 전달한 노드를 DOM 트리에서 제거한다.
const removeElem = document.getElementById('one');

// container의 자식인 removeElem를 DOM 트리에 제거한다.
container.removeChild(removeElem);

Style

  • 특정 요소에 inline 스타일을 지정할 수 있다.
const four = document.getElementById('four');

// inline 스타일 선언을 생성한다.
four.style.color = 'blue';

// font-size와 같이 '-'으로 구분되는 프로퍼티는 카멜케이스로 변환하여 사용한다.
four.style.fontSize = '2em';

P.S.

선택한 DOM 요소를 가지고 어떻게 내가 원하는 대로 내용을 조작할 수 있을지 그 방법을 알게 되었다😀

참고 문서

[LeetCode] 217. Contains Duplicate(Python)
[혼공머신] 심층 신경망(Deep Neural Network)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage