<aside> 💡 목차
</aside>
문서객체.textContent
문서객체.innerHTML
document.addEventListener('DOMContentLoaded', () => {
const a = document.querySelector('#textContent');
const b = document.querySelector('#innerHtml');
a.textContent = '<h2>textContent 속성</h2>';
b.innerHTML = '<h2>textContent 속성</h2>';
});
+) JS에서 글자 조작 시에는 문서 구조는 HTML이 담당 따라서 문서구조를 직접 생성하는 innerHTML 보다, 기능적인 텍스트만 첨부하는 textContent를 사용하는 것을 권장
문서객체.setAttribute(속성이름, 값)
문서객체.getAttribute(속성이름)
document.addEventListener('DOMContentLoaded', () => {
const cats = document.querySelectorAll('.cats');
cats.forEach((cat, index) => {
const width = (index + 1) * 50;
// 이미지 너비와 높이를 직접 설정
cat.style.width = width + 'px';
cat.style.height = '250px';
const source = `./cat01.jpg`;
const alter = '고양이 이미지';
// cat.setAttribute('src', source);
// cat.setAttribute('alt', alter);
cat.src = source;
cat.alt = alter;
});
});
※ setAttribute 메서드를 사용하여 src와 alt를 설정할 수도 있지만 src속성과 alt속성을 직접적으로 이용하여 사용할 수도 있다