[TIL-018] 20.08.12

1. Summary(3 Line)

프리코스 13일차(3줄 요약)

- DOM은 너무 어려워

- 날씨도 더운데 컴퓨터 열기 때문에 더위 먹은거 같다..

- Twtittler 함수 작성 시작해야되는데... 손도 못댔다.

 

 

---

2. Today's Todo

• 알고있어야 하는 필수 키워드
  childNode / firstChild / lastChild / nextSibling /  previousSibling / nodeValue / parentNode
• DOM 기본 조작(CRUD)
  1. CREATE (createElement, createTextNode,  createDocumentFragment)
  2. READ (querySelector, querySelectorAll)
  3. UPDATE (innerHTML, innerText, textContent)
      # innerHTML, innerText, textContent 비교
  4. DELETE (remove, removeChild, innerHTML = "";, textContext = "";)
  5. APPEND (append, appendChild)
  6. 아직 노분류()
•  

 

# 알고있어야 하는 필수 키워드

• childNode : 현재 요소의 자식을 배열로 표현한다

• firstChild : 첫 번째 자식 노드

• lastChild : 마지막 자식 노드

• nextSibling : 다음 형제 노드

• previousSibling : 이전 형제 노드

• nodeValue : 해당 요소의 값을 얻음

• parentNode : 해당 요소의 부모 노드

 

# DOM 기본 조작(CRUD)

1. CREATE : createElement / createTextNode / createDocumentFragment

1) document.createElement(tagName);  =>  HTML 태그의 DOM 객체를 생성할 수 있다.

let newDIV = document.createElement("div");
// 위 코드의 결과는 <div></div>

 

2) document.createTextNode("텍스트");  =>  선택한 요소에 텍스트를 추가한다.

let newtext = document.createTextNode(" 동적으로 추가되는 텍스트. ");

let h = document.createElement("H1")                // Create a <h1> element
let t = document.createTextNode("Hello World");     // Create a text node
h.appendChild(t);       							// Append the text to <h1>

 

3) document.createDocumentFragment();  => DocumentFragment를 생성하고, 추가한다.

좀더 설명하자면 가짜 document를 만든다고 한다.

왜 이게 중요하냐면 자바스크립트로 document의 태그를 조작하는 것은 매우 성능이 떨어집니다.

특히 여러 태그를 반복문을 통해 동시에 추가 할때입니다.

이럴 때 미리 가짜 document를 만들어서 여기에 추가를 한 후, 한 번에 document에 추가합니다.

이러면 진짜 document는 한 번만 조작하면 돼서 성능에 부담이 덜합니다.

let docFrag = document.createDocumentFragment(); 

let colors = ['blue', 'red', 'green']; 

colors.forEach(function(color) { 
  let li = document.createElement('li'); 
  li.textContent = color; 
  docFrag.appendChild(li); 
}); 

console.log(docFrag.textContent); // blueredgreen

let div = document.createElement('div');
let text = document.createTextNode('텍스트');
let fragment = document.createDocumentFragment();

div.appendChild(text); // 1) div에 text를 담고,
fragment.appendChild(div); // 2) 그것을 fragment에 담은 후
document.body.appendChild(fragment);// 3) 최종적으로 body에는 fragment를 담았습니다.

// 직접적으로 body에 영향을 주는 것은 fragment를 추가할 때, 단 한 번입니다. 
// 만약 appendChild같은 조작을 많이 해야할 경우, fragment에다가 한 후에 
// 마지막에 fragment를 추가하면 됩니다.

 

 

 

2. READ : querySelector / querySelectorAll

1) document.querySelector('선택자')  =>  CSS 선택자로 요소를 선택하게 해준다.

선택자와 일치하는 첫 번째 자식 요소를 반환

document.querySelector( '.xyz' ) // 클래스 값이 xyz인 첫번째 요소에 접근

let el = document.querySelector(".myclass"); // 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환

// abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 바꾼다.
  <p class="abc">Lorem Ipsum Dolor</p>
  <p class="abc">Lorem Ipsum Dolor</p>
  <p class="abc">Lorem Ipsum Dolor</p>
    
<script>
  document.querySelector( '.abc' ).style.color = 'red';
</script>

 

2) document.querySelectorAll('선택자명')  =>  DOM을 순회하며 선택자에 해당하는 요소들을 리스트 형태로 반환

let x = document.querySelectorAll(".example");

<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p> 

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x, i;
  x = document.querySelectorAll(".example");
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
  }
}
</script>

 

 

 

3. UPDATE : innerHTML / innerText / textContent / classList / setAttribute

1) element.innerHTML  =>  html 태그(<div>, <p> 등)의 내부 문자를 가져올 때 사용합니다

<div id="test">사과</div> 
<script> 
  document.querySelector("#test").innerHTML = "<h1>수박</h1>"; 
</script>

// document에서 id가 'test'인 선택자를 찾아 그 요소에 "<h1>태그로 감싼 '수박'을 출력한다.
// 결과값 예시) 안녕하세요 <span>ㅎㅎ</span>

 

2) node.innerText  =>  innerText는 태그(<h1>)또한 문자로 인식하여 출력하는것을 확인할 수 있습니다.

<div id="test">사과</div>
<script>
  document.querySelector("#test").innerText = "<h1>복숭아</h1>";
</script>

// document에서 id가 'test'인 선택자를 찾아 그 요소에 "<h1>복숭아</h1>" 를 있는 그대로 출력한다.
// 결과값 예시) 안녕하세요 ㅎㅎ

 

3) element.textContent = '내용' =>  모든 자식 텍스트 노드를 가져온다. 텍스트를 엘리먼트에 추가할 경우 쓰인다. 

<p id="demo" onclick="myFunction()">Click me to change my textual content.</p>

<script>
function myFunction() {
  document.getElementById("demo").textContent = "Paragraph changed!";
}
</script>
// Click me to change my textual content. => Paragraph changed! 로 바꾼다.

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myList").textContent;
  document.getElementById("demo").innerHTML = x;
}
</script>

// Coffee
// Tea

// Try it(버튼)
// Coffee Tea

 

# innerHTML vs innerText 차이

- innerHTML은 보안에 취약하므로 잘 쓰지 않는다.

- innerHTML은 태그를 적용하여, 즉 html로 인식하여 리턴한다.

- innerText는 있는 그대로 출력한다.

 

# innerText  vs textContent차이

- textContent가 브라우저 호환성이 조금 더 높고, 가볍다고 한다.

- innerText에 CSS가 반영된다.

- textContent는 태그를 문자로 인식하여 가져온다.

- innerText는 불필요한 공백을 제거하고 텍스트로 반환하지만,

textContent는 모든 텍스트를 그대로 가져온다.

 

<p> Hi   Webisfree.com   Web   Development   </p>
// # innerText를 사용한 경우
var msg = document.querySelector('p').innerText;
console.log(msg);

Hi Webisfree.com Web Development // 출력 결과

// # textContent를 사용한 경우
var msg = document.querySelector('p').textContent;
console.log(msg);

   Hi   Webisfree.com   Web   Development   // 출력 결과

 

4) element.classList  =>  해당 Element의 클래스목록에 접근하는 간편한 방법

  [1] add : Element에 클래스를 추가

  Ex) element.classList.add('open')

 

  [2] remove : Element에 클래스를 제거

  Ex) element.classList.remove('open')

 

  [3] length : <div> 요소에있는 클래스 이름 수를 확인

  Ex) document.getElementById("myDIV").classList.length;

 

  [3] item : Element에 클래스에서 0번째 항목을 찾아온다.

  Ex) element.classList.item(0)

 

  [4] toggle : Element에 클래스가 존재하면 제거하고 없으면 추가

  Ex) element.classList.toggle('open')

 

  [5] contains : Element에 클래스가 존재하는지 확인 (값은 true / false)

  Ex) element.classList.contains('open')

 

  [6] replace : Element에 클래스(open)를 새로운 클래스(close)로 교체

  Ex) element.classList.replace('open', 'close')

 

5) element.setAttribute(attribute_name, attribute_value)  =>  지정된 요소의 속성 값을 설정한다.

속성이 이미 있으면 값이 업데이트, 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가된다.

<button>Hello World</button>

var b = document.querySelector("button"); 

b.setAttribute("name", "helloButton"); 
b.setAttribute("disabled", "");

document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )
// id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 
// 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용

<p><a id="abc" href="#">CODING FACTORY</a></p>

document.getElementById('abc').setAttribute('href', 'https://www.codingfactory.net');
// id 값이 abc인 요소의 href 속성값을 변경

 

 

4. DELETE(remove / removeChild / innerHTML = ""; / textContent = "";)

1) childNode.remove()  =>  메소드는 이를 포함하는 트리로부터 객체를 제거합니다.

<div id="div-01">div-01 입니다</div>
<div id="div-02">div-02 입니다</div>
<div id="div-03">div-03 입니다</div>

var el = document.getElementById('div-02');
el.remove(); // id가 'div-02' 인 div를 제거합니다

 

<p id="demo">Click the button, and this paragraph will be removed from the DOM.</p>

// 문서에서 선택한 요소를 제거한다.
let myobj = document.getElementById("demo");
myobj.remove();

 

2) node.removeChild()  =>  DOM에서 자식 노드를 제거하고 제거 된 노드를 반환

 

Ex1) 상위 노드를 알 때 지정된 요소를 제거

<div id="top">
  <div id="nested"></div>
</div>

let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);

 

Ex2) 목록에서 첫 번째 <li> 요소를 제거합니다.

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

let list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);

 

Ex3) 목록에 자식 노드가 있는지 확인한다.  있다면 첫 번째 자식 노드 (인덱스 0)를 제거

let list = document.getElementById("myList");

if (list.hasChildNodes()) {
  list.removeChild(list.childNodes[0]);
}

 

Ex4) 목록의 모든 자식 노드를 제거합니다.

let list = document.getElementById("myList");

if (list.hasChildNodes()) {
  list.removeChild(list.childNodes[0]);
}

 

Ex5) 부모 노드를 지정하지 않고 id = "myLI"인 <li> 요소를 부모 요소에서 제거합니다.

<ul id="myList">
  <li>Coffee</li>
  <li id="myLI">Tea</li>
  <li>Milk</li>
</ul>

let item = document.getElementById("myLI");
item.parentNode.removeChild(item);

 

# remove vs removeChild 비교

- remove()는 Internet Exploer에는 지원 X / 부모 엘리먼트 불필요 / 

- remove()는 노드를 메모리에서 삭제하고 종료 But, removeChild()는 노드를 삭제하는 것이 아니라

해당 노드는 그대로 존재하며, 부모-자식관계를 끊어놓은 것이고, 최종적으로 관계를 끊은 해당 노드의 참조를 반환

 

3) document.body.innerHTML = "";

 

4) document.body.textContent = "";

 

5. APPEND (append, appendChild)

1) parentnode.append()  =>  parentNode의 마지막 자식 뒤에 Node 객체 또는 DOMString 객체를 삽입

Ex1) 요소(element) 추가하기

let parent = document.createElement("div");
let p = document.createElement("p");
parent.append(p);

console.log(parent.childNodes); 

 

Ex2) 문자(text) 추가하기

let parent = document.createElement("div");
parent.append("Some text");

console.log(parent.textContent); // "Some text"

 

Ex3) 요소(element)와 문자(text) 함께 추가하기

let parent = document.createElement("div");
let p = document.createElement("p");
parent.append("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

 

2) node.appendChild(aChild);  =>  자식 노드의 마지막에 노드가 삽입된다.

let aChild = element.appendChild(aChild);

// // 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입
var p = document.createElement("p");
document.body.appendChild(p);

  let parent = document.getElementById("list");  // 아이디가 "list"인 요소를 선택함.
  let newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
  parent.appendChild(newItem);                   // 해당 요소의 맨 마지막 자식 노드로 추가함.

 

# append() 와 appendChild()의 차이점

- append() DOMString 객체 추가 가능 / appendChild() 오직 Node 객체만 가능

- append() 반환값 없음 / appendChild() 반환값 있음

- append() 여러 개 노드와 문자 추가 가능 / appendChild() 오직 노드 하나만 추가 가능

- append() 익스플로러 미지원 / appendChild() 익스플로러 지원

 

 

let li = document.createElement('li');
li.append('무지');

let targetul = document.getElementById('friends');
targetul.append(li);

let li = document.createElement('li');
let litext = document.createTextNode('무지');

li.appendChild(litext);

let targetul = document.getElementById('friends');
targetul.appendChild(li);

 

 

6. 그 외(아직분류안됨) (append, appendChild)

1) document.getElementById('id명')  =>  id로부터 요소를 선택합니다. 결과는 단수

<p id="para">어떤 글</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>

function changeColor(newColor) {
  let elem = document.getElementById('para');
  elem.style.color = newColor;
}

 

<p id="demo">Click the button to change the text in this paragraph.</p>

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

 

2) document.getElementsByName('name')  => name으로부터 요소를 선택합니다. 결과는 복수

<p id="demo">Click the button to change the text in this paragraph.</p>

function myFunction() {
  var x = document.getElementsByName("fname")[0].tagName;
  document.getElementById("demo").innerHTML = x;
}

3) document.getElementsByTagName('태그명')  =>  tag name으로부터 요소를 선택합니다. 결과는 복수

 

4) document.getElementsByClassName('class명')  =>  class로부터 요소를 선택합니다. 결과는 복수

5) element.attributes()  => 주어진 요소의 속성 모음을 반환

6) element.getAttribute(name)  =>  속성값을 가져옴

7) element.removeAttribute(name)  =>  속성값을 제거함

8) element.hasAttribute(name)  =>  속성의 존재 확인

9) insertBefore(newNode, targetNode)

10) hasChildNodes()