Manipulating Elements
DOM을 이용하여 선택한 요소들을 필요에 따라 수정하거나 삭제할 수도 있습니다.
<div class="container">
<h1>I am a Heading</h1>
<p>I am a Paragraph</p>
<ul>
<li class="item">
<p>I am a Paragraph</p>
</li>
<li class="item">
<p>I am a Paragraph</p>
</li>
<li class="item">
<p>I am a Paragraph</p>
</li>
</ul>
<button id="special-button">I am a Button</button>
</div>
위와 같은 HTML 문서가 있고,
h1 요소의 텍스트를 변경하고 싶은 상황이라고 생각해보세요.앞선 단계에서 학습했던 방식 중 하나를 이용하여
h1 요소를 선택한 후, 해당 요소의 텍스트를 수정해보겠습니다.const $heading = document.querySelector("h1");
$heading.textContent = "I am a NEW Heading";
위의 예제처럼
textContent란 속성을 이용하여 h1 요소의 텍스트 내용을 수정할 수 있습니다.구글링한 정보나 MDN에서 찾은 정보를 바로 적용하기 어렵다면 jsbin.com 등의 웹 에디터에서 간단하게 테스트해보세요.
아래 나열된 속성이나 메소드는 자주 사용되는 것들이니 반드시 숙지해보시기 바랍니다.
Last modified 4mo ago