Javascript - DOM, 요소 접근, 데이터 입출력

DOM(Document Object Model)

문서의 모든 요소를 객체 형식으로 표현하는 방법으로,
문서 내 특정 요소에 접근하는 방법을 제공한다.

innerHTML()

자바스크립트에서 요소 전체를 읽어들이거나 변경하는 속성
이 때 태그 + 속성 + 내용을 모두 포함한다.

     <button onclick="getInnerHTML()">innerHTML로 읽어오기</button>
        
     <p id="test" class="box">
         테스트입니다. <br>
         <b>안녕하세요?</b>
     </p>

function getInnerHTML(){
    console.log(document.getElementById("test").innerHTML);
}

콘솔에는  

테스트입니다. <br>
<b>안녕하세요?</b>

처럼 태그를 포함한 모든 요소가 나온다.

innerTEXT()

스크립트에 작성된 내용만을 읽어들이거나 변경하는 속성
내용 입력 시 태그, 속성은 무시하며 대입할 때는 모두 문자열로 해석한다.

     <button onclick="getInnerTEXT()">innerTEXT로 읽어오기</button>
        
     <p id="test" class="box">
         테스트입니다. <br>
         <b>안녕하세요?</b>
     </p>

function getInnerTEXT(){
    console.log(document.getElementById("test").innerTEXT);
}

콘솔에는  

테스트입니다.
안녕하세요?

와 같이 문자열 내용만을 읽어오게 된다.

이를 통해 (=) 대입 연산자를 적당하게 사용하면 코드 내부를 변경하여 스타일을 주는 등 활용할 수 있다.

DOM을 이용한 요소 접근

1. id 속성값으로 접근

document.getElementById("id속성값");

2. class 속성값으로 접근

document.getElementsByClassName("Class 속성값");

3. name 속성값으로 접근

document.getElementsByName("name 속성값");

4. tag name 속성값으로 접근

5. CSS 선택자로 접근

document.getElementsByTagName("태그명");

각 접근법을 통해 요소에 접근해서 함수에 이용하는 듯 활용할 수 있다.