[JavaScript] DOM - 문서 객체 조작하기

박이레·2022년 9월 22일

JavaScript

목록 보기

10/13

　문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용합니다. 이 작업은 매우 재밌습니다. 지루한 언어 공부에 활력을 불어 넣습니다. 저를 위한 하나의 이벤트 같습니다.

querySelector(), querySelectorAll()

querySelector(), querySelectorAll()의 매개변수로는 CSS 선택자를 넣습니다.

CSS 선택자

더 많은 선택자는 공식 문서에..🧷

이름	선택자 형태	설명
태그 선택자	태그	특정 태그를 가진 요소 추출
아이디 선택자	#아이디	특정 id 속성을 가진 요소 추출
클래스 선택자	.클래스	특정 class 속성을 가진 요소 추출
속성 선택자	[속성=값]	특정 속성 값을 가진 요소 추출
후손 선택자	선택자_A 선택자_B	선택자_A 아래에 있는 선택자_B를 선택

querySelector()

querySelector()는 요소를 하나만 추출합니다. <body>에 있는 <h1>이 querySelector()에 의해 지정되고 있습니다.

querySelectorAll() + forEach()

querySelectorAll()은 문서 객체 여러 개를 배열로 읽어들입니다. 따라서 반복을 돌려야 합니다. 대개 forEach()를 사용합니다. <body>에 있는 모든 <h1>이 querySelectorAll()에 의해 지정되고 있습니다.

innerHTML, textContent

innerHTML은 입력된 문자열을 그대로 넣습니다.
textContent은 입력된 문자열을 HTML 형식으로 넣습니다.

textContent vs innerText

vsCode에서 코드를 입력하다보면 innerText와 textContet가 나옵니다. innerText는 IE에서 사용된 속성입니다. 따라서 성능이 좋은 최신의 textContent 속성을 사용하는 것이 좋습니다.

실행 결과

setAttribute(), getAttribute()

setAttribute(), getAttribute()를 사용하면 문서 객체의 속성을 조작할 수 있습니다.

메소드 이름	설명
문서 객체.setAttribute(속성 이름, 값)	특정 속성 값 지정
문서 객체.getAttribute(속성 이름	특정 속성 추출

<script>
  document.addEventListener('DOMContentLoaded', () => {
  const rects = document.querySelector('.a')

  const width = 500		
  const src = `이미지 경로/${width}/250`
  rect.setAttribute('src', src)	// src 속성에 값 지정
//rect.src = src // 간단하게 사용할 수도 있습니다.
  })
</script>
</head>
<body>
  <image class="a">
    </body>