getElementById

var var1 = document.getElementById('root');
// 해당 돔 객체

console.log(var1);

console.log(var1.innerHTML);

var1.innerHTML = '<i>hello soomin</i>';

var text = document.getElementById('root').innerText;
console.log(text);

 

해당 코드는 돔객체를 얻어오는 코드이다. 개인적으로 몇번 사용해 본적 있으나 정확히 무엇을 가져오는 가에 대해 알지 못했고, 이번기회에 감사하게도 조금이나마 알게 되었다.

---

var var1 = document.getElementById('root');
// 해당 돔 객체

console.log(var1);

해당 노드와 자식노드 까지 전부 가져온 것이 보인다. 이 부분에서 굉장히 놀랐다.

 

---

innerHTML 로 해당 dom 에대한 HTML 을 문자열로 받아왔다. 

 

날것의 텍스트 그대로 찍힌다.

<div class="title">
  Hello, goorm!
  </div>
  <div>
    <form>
      <input name="userId">
      <input name="passwd">
      <input type="submit">
    </form>
  </div>
  <a href="#">site link</a>
<script src="./test.js"></script>

---

돔 객체를 가져와 innerHTML 값을 조작한 뒤 확인하면.

var var1 = document.getElementById('root');
// 해당 돔 객체

console.log(var1);

 var1.innerHTML = '<i>hello soomin</i>';

console.log(var1.innerHTML);

dom 객체의 조작이 일어난다.

---

innerText 는 해당 돔 객체에 존재하는 모든 텍스트 값을 리턴한다.

var text = document.getElementById('root').innerText;
console.log(text);

위의 innerHTML 값을 조작한 뒤에 확인했다면 콘솔에는 이런 값이 도출된다.

hello soomin