자바스크립트 - 주요노드 프로퍼티

자바스크립트 - 주요노드 프로퍼티

innerHTML

요소 안 HTML을 문자열 형태로 받아올 수 있음

요소 안 HTML을 수정하는 것도 가능함

console.log("===== p 태그 요소 읽기 ====="); console.log(document.querySelector(".in").innerHTML); console.log("===== p 태그 수정 ====="); document.querySelector(".in").innerHTML = "뭘까?"; console.log(document.querySelector(".in").innerHTML);

textContent

요소 내의 텍스트에 접근할 수 있으며 태그는 제외하고 오로지 텍스트만 추출함

사용자의 입력 값을 받아 처리해야 하는 경우 사용자가 입력한 값은 텍스트로 처리되어야 함

예상치 못한 HTML이 침투하는 것을 막기 위해 사용함

// innerHTML, textContent 으로 텍스트 수정하기 document.querySelector(".in1").innerHTML = "강조되는 글입니다."; document.querySelector(".in2").textContent = "강조되는 글입니다."; console.log("===== innerHTML과 textContent 출력의 차이 ====="); console.log("innerHTML"); console.log(document.querySelector(".in1").innerHTML); console.log("textContent"); console.log(document.querySelector(".in2").textContent);

위에와같이 innerHTML 을 이용해 요소를 수정했을때는 HTML 형식으로 들어가서 태그는 안보이고 글만 보이구요

아래는 textContent 이용해 요소를 수정했을때 HTML 형식이 아닌 태그가 텍스트형식으로 들어가는것을 확인할수있다.

hidden

hidden은 요소를 보여줄지 말지 지정할 때 사용함

HTML 안에 쓸 수도 있고 자바스크립트에서도 쓸수 있음

CSS의 style="display:none;" 와 동일함

반갑습니다~

value

input, select > option, textarea의 값에 저장되는 속성값

옵션 textarea 입니다.

728x90

from http://memory-develo.tistory.com/99 by ccl(A) rewrite - 2021-08-02 15:26:16