DOM 기초

 

for...of는 배열을 순회할 때 사용

for...in은 객체의 속성을 순회할 때 사용

---

 

Q. elem.children[0].previousSibling은 항상 null일까요?

<div>
  텍스트 노드 앞에 있는 내용
  <p>첫 번째 자식 요소</p>
  <span>다른 자식 요소</span>
</div>

이 경우, elem.children[0]은 <p> 요소를 나타내고, elem.children[0].previousSibling은 텍스트 노드 "텍스트 노드 앞에 있는 내용"을 나타냅니다. 요소 노드 이외의 노드도 존재할 수 있기 때문에 previousSibling을 사용할 때는 주의가 필요합니다.

---

 

✅ console.dir(elem)과 console.log(elem)의 차이

인수가 DOM 요소일 때는 결과가 다릅니다.

• console.log(elem)는 요소의 DOM 트리를 출력합니다.
• console.dir(elem)는 요소를 DOM 객체처럼 취급하여 출력합니다. 따라서 프로퍼티를 확인하기 쉽다는 장점이 있습니다.

document.body를 인수로 넘겨서 그 차이를 직접 확인해보세요.

---

 

노드 타입 확인하는 방법

 -> instansceof 사용하기 또는 nodeType

---

 

'innerHTML+='  사용 시 주의점

 -> 기존 내용을 먼저 삭제하고

 -> 기존 내용과 + 새로운 내용을 합친 = 새로운 내용을 씀

 -> 기존 내용이 완전히 삭제된 후 완전히 새롭게 다시 내용이 쓰여지기 때문에 이미지 등의 리소스가 전부 다시 로딩된다.

 -> 요소 노드에만 사용할 수 있다

 -> 사용자가 입력한 문자열이 HTML 형태로 태그와 함께 저장된다. / 태그의 기능이 적용 되는것

 

그렇다면 이런 리소스 낭비 없이 HTML을 추가하는 방법에는 뭐가 있을까?

✅ 

 

 

* outerHTML은 내용을 수정하지 않는다.

---

 

textcontent 

 -> 요소 내의 텍스트에만 접근 가능하다. / 태그는 그저 문자로서만 들어가는것

 -> 요소 없이 해당 텍스트만 불러온다.

 -> 사용자가 입력한 문자열이 순수 텍스트로만 저장된다. (특수문자, 태그, 일반텍스트 모두 문자열 그대로 저장)

 -> 사용자로부터 입력값을 받아서 처리해야하는 경우 순수 텍스트로만 받아오는 textContent를 사용해야한다.

---

 

data 

 -> 요소가 아닌 노드(텍슽, 주석 노드 등)를 읽어올 때 사용

---

 

1. 여기서 속성는 무엇인가?

2. elem이 의미하는것은?

<input type="text" id="elem" value="value">

<script> 
    alert(elem.type); // "text" 
    alert(elem.id); // "elem" 
    alert(elem.value); // value 
</script>

답: 1. type, id, value / 2. input 안에 있는 id 속성을 가르키는 것.

---

 

모든 속성은 아래의 메서드를 사용해 접근할 수 있습니다.

• elem.hasAttribute(name) – 속성 존재 여부 확인
• elem.getAttribute(name) – 속성값을 가져옴
• elem.setAttribute(name, value) – 속성값을 변경함
• elem.removeAttribute(name) – 속성값을 지움

---

 

<input>

<script>
  let input = document.querySelector('input');

  // 속성 추가 => 프로퍼티 갱신
  input.setAttribute('value', 'text');
  alert(input.value); // text (갱신)

  // 프로퍼티를 변경해도 속성이 갱신되지 않음
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text (갱신 안됨!)
</script>

-> input.value = 'newValue'; 이 부분의 코드는 DOM을 속성을 변경하는 것이고,

     input.setAttribute('value', 'text') 이 부분의 코드는 HTML의 속성을 변경하는 것이기 때문에 getAttribute로 값이 얻어지지 않는다.

---

 

href 속성의 값을 정확하게 얻고 싶다면 getAttribute을 사용하기

---

 

속성 – HTML 안에 쓰임

프로퍼티 – DOM 객체 안에 쓰임

---

 

div 요소를 생성하는데에서 끝나는게 아니라 body.append와 같은 삽입 메서드를 사용해서 DOM 화면에 추가시켜줘야한다.

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

  document.body.append(div);
</script>

 

---

node.append(노드나 문자열) – 노드나 문자열을 node 끝에 삽입합니다.

node.prepend(노드나 문자열) – 노드나 문자열을 node 맨 앞에 삽입합니다.

node.before(노드나 문자열) –- 노드나 문자열을 node 이전에 삽입합니다.

node.after(노드나 문자열) –- 노드나 문자열을 node 다음에 삽입합니다.

node.replaceWith(노드나 문자열) –- node를 새로운 노드나 문자열로 대체합니다.

 

예시)

<ol id="ol">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  ol.before('before'); // <ol> 앞에 문자열 'before'를 삽입함
  ol.after('after'); // <ol> 뒤에 문자열 'after를 삽입함

  let liFirst = document.createElement('li');
  liFirst.innerHTML = 'prepend';
  ol.prepend(liFirst); // <ol>의 첫 항목으로 liFirst를 삽입함

  let liLast = document.createElement('li');
  liLast.innerHTML = 'append';
  ol.append(liLast); // <ol>의 마지막 항목으로 liLast를 삽입함
</script>

 

최종 결과)

before
<ol id="ol">
  <li>prepend</li>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>append</li>
</ol>
after

---

 

Q. ul 안에 li 만들기

<ul id="ul"></ul>

<script>
function getListContent() {
  let result = [];

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    result.push(li);
  }

  return result;
}

ul.append(...getListContent()); // append 메서드와 ...(전개 구문)은 궁합이 잘 맞습니다.
</script>

 

 

---

 

✅ 요약

노드 생성 메서드:

• document.createElement(tag) – 태그 이름을 사용해 새로운 요소를 만듦
• document.createTextNode(value) – 텍스트 노드를 만듦(잘 쓰이지 않음)
• elem.cloneNode(deep) – 요소를 복제함. deep==true일 경우 모든 자손 요소도 복제됨

노드 삽입, 삭제 메서드:

• node.append(노드나 문자열) – node 끝에 노드를 삽입
• node.prepend(노드나 문자열) – node 맨 앞에 노드를 삽입
• node.before(노드나 문자열) –- node 이전에 노드를 삽입
• node.after(노드나 문자열) –- node 다음에 노드를 삽입
• node.replaceWith(노드나 문자열) –- node를 대체
• node.remove() –- node를 제거

문자열을 삽입, 삭제할 땐 문자열을 ‘그대로’ 넣으면 됩니다.

‘구식’ 메서드:

• parent.appendChild(node)
• parent.insertBefore(node, nextSibling)
• parent.removeChild(node)
• parent.replaceChild(newElem, node)

이 메서드들은 전부 node를 반환합니다.

html에 HTML을 넣으면 메서드 elem.insertAdjacentHTML(where, html)은 where 값에 따라 특정 위치에 HTML을 삽입함

• "beforebegin" – elem 바로 앞에 html을 삽입
• "afterbegin" – elem의 첫 번째 자식 요소 바로 앞에 html을 삽입
• "beforeend" – elem의 마지막 자식 요소 바로 다음에 html을 삽입
• "afterend" – elem 바로 다음에 html을 삽입

문자열이나 요소 삽입에 쓰이는 유사 메서드 elem.insertAdjacentText와 elem.insertAdjacentElement도 있는데, 잘 쓰이지는 않음

페이지 로딩이 끝나기 전에 HTML을 삽입해주는 메서드:

• document.write(html)

문서 로딩이 끝난 상태에서 이 메서드를 호출하면 문서 내용이 지워짐. 오래된 스크립트에서 볼 수 있음

---

 

문서 어딘가에 HTML을 추가해야 할 때는 insertAdjacentHTML이 최고의 선택입니다.

<ul id="ul">
  <li id="one">1</li>
  <li id="two">4</li>
</ul>

 

-> one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');

one li 바로 아래로 들어간다.