내용과 속성 바꾸기

찾았으면 바꿉니다

앞 단원에서 찾은 요소는 객체입니다(3.6). 속성을 읽고 쓰면 화면이 그 자리에서 바뀝니다.

• textContent — 그 안의 글자입니다.
• innerHTML — 그 안의 마크업입니다. 주의가 필요합니다.
• getAttribute · setAttribute — 태그에 적는 속성입니다.

글자 바꾸기

실행한 뒤 미리보기 탭을 열어 보세요. 화면의 글자가 바뀌어 있습니다.

const title = document.querySelector("#title");

console.log(title.textContent);

title.textContent = "바뀐 제목";

console.log(title.textContent);

읽는 것과 쓰는 것이 같은 이름입니다. = 의 왼쪽에 두면 쓰기, 오른쪽에 두면 읽기입니다.

textContent 와 innerHTML 의 차이

const a = document.querySelector("#a");
const b = document.querySelector("#b");

a.textContent = "<b>굵게</b>";
b.innerHTML = "<b>굵게</b>";

console.log(a.textContent);
console.log(b.textContent);

미리보기를 열어 보면 위는 태그가 글자 그대로 보이고, 아래는 태그로 읽혀 굵게 보입니다.

사용자가 입력한 값에는 innerHTML 을 사용하지 않습니다. 입력한 글에 태그가 섞여 있으면 그것이 그대로 살아나기 때문입니다. 글자를 넣을 때는 언제나 textContent 입니다.

속성 읽고 쓰기

const link = document.querySelector("#link");
const photo = document.querySelector("#photo");

console.log(link.getAttribute("href"));

link.setAttribute("href", "/new");
console.log(link.getAttribute("href"));

console.log(photo.getAttribute("alt"));
console.log(photo.hasAttribute("title"));

자주 쓰는 속성은 점으로도 읽고 씁니다 — input.value, img.src. 다만 값이 다듬어져 나오는 것이 있어 적은 그대로가 필요하면 getAttribute 를 사용합니다.

data- 속성

이름을 data- 로 시작하면 마음대로 만들어 붙일 수 있습니다. 화면에 보이지 않는 값을 요소에 붙여 둘 때 사용합니다.

const buy = document.querySelector("#buy");

console.log(buy.dataset.productId);
console.log(buy.dataset.price);
console.log(typeof buy.dataset.price);

data-product-id 는 dataset.productId 로 읽습니다. 하이픈이 사라지고 다음 글자가 대문자가 됩니다. 값은 언제나 글자이므로 계산에 쓰려면 Number 로 바꿔야 합니다(1.4).

처음에 자주 걸리는 것

box.innerHTML = 입력값;      // 위험합니다
box.textContent = 입력값;    // 이렇게 적습니다

직접 해보기

이 단원의 정리