HTML manipulation

- innerHTML: 모든 자식 요소와 텍스트 컨텐츠 접근 가능, 보안에 취약함

<p id="userName">User Kim</p>
<script>
  var ele = document.getElementById('useName');  // get a node
  console.log(ele);  // <p id="userName">User Kim</p>

  var ele = document.getElementById('useName').innerHTML;  // get a text in a node
  console.log(ele);  // User Kim
</script>

<!---------------------------------------------------------------------------------->
<p id="userName">Mr.<span>User Kim</span></p>
<script>
  var ele = document.getElementById('useName');  // get a node
  console.log(ele);  // <p id="userName"><span>Mr.</span>User Kim</p>

  var ele = document.getElementById('useName').innerHTML;  // get a text in a node
  console.log(ele);  // <span>Mr.</span>User Kim

  var ele = document.querySelector('#userName span').innerHTML;
  console.log(ele)  // Mr.
</script>

- textContent: 특정요소의 컨텐츠에만 접근

<p id="userName">
  <span>Mr.</span>
  User Kim
</p>
<script>
  var ele = document.getElementById("userName").textContent;
  console.log(ele);  
  // Mr.
  // User Kim
  
  var ele = document.getElementById("userName").innerText;
  console.log(ele);  
  // Mr. User Kim
</script>  

- create element and content

  : createElement, createTextNode, appendChild

<p id="userName">Click</p>
<p id="res"></p>
<script>
  function creatName(){
    var ele = document.createElement("span");
    var cont = document.createTextNode("Mr. User Kim");
    document.getElementById("res").innerHTML = ele.appendChild(cont).textContent;
  }
  var user = document.getElementById("userName");
  user.addEventListener('click', createName, false);

click
Mr. User Kim   // <span>Mr. User Kim</span>

- access to class

  : className

<p id="person" class="family">Home</p>

<script>
  var ele = document.getElementById("person");
  console.log(ele.className)  // family
  
  ele.className += " friend";  // Add class
  console.log(ele.className);  // family friend
  
  console.log(ele);  // <p id="person" class="family friend>clas</p>
</script>

- Attribute

  : hasAttribute(), getAttribute(), setAttribute(), removeAttribute()

<p id="person" class="family">Home</p>
<a href="" target="_blank" id="contact">Click</a>
<script>
  var ele = document.getElementById("person");
  
  /* hasAttribute()  check attribute */
  if(ele.hasAttribute("class")){
    ele.className += " friend";  // Add a class
    
    /* getAttribute() */
    console.log(ele.getAttribute("class"));  // return attribute's value, family friend
  }else{
    console.log("no class");  // display "no class"
  }
  
  /* setAttribute() */
  var con = document.getElementById("contact");
  con.setAttribute("href", "https://www.google.com");  // setAttribute(attribute, value)
  
  /* removeAttribute() */
  var con = document.getElementById("contact");
  con.removeAttribute("target");  // removeAttribute(attribute)
</script>

- Style update

  : classList, style

/* classList */
/* add(), remove(), contains(), toggle(), replace() */

<a id="person" class="">Home</a>
<input type="button" value="confirm" id="bbt">

<style>
  .textcolor{
    background-color:yellow;
  }
  .textborder{
    border:3px solid red;
  }
  .textpadding{
    padding: 10px;
  }
  .textnewcolor{
    background-color:blue;
  }
</style>

<script>
  var ele = document.getElementById("person");
  ele.className = "textcolor";  // className
  ele.classList.add("textborder");  // add()
  
  /* style */
  ele.style.float = "right";
  ele.style.marginRight = "40px";

  function testUpdate(){
    ele.classList.toggle("textpadding");  // toggle()
    ele.classList.replace("textcolor", "textnewcolor");  // replace()
    ele.classList.remove("textborder");  // remove()
  
    var attCheck = ele.classList.contains("textcolor");  // contains()
    if(attCheck) console.log("Yes");
    else console.log("No");                              // No
  }

  var bb = document.getElementById("bbt");
  bb.addEventListener('click', testUpdate, false);
</script>