JavaScript2_요소 노드 프로퍼티

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div id="content">
    <h2 id="title-1">Cat-1</h1>
    <ul id="list-1">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
    <h2 id="title-2">Cat-2</h1>
    <ul id="list-2">
      <li>Sphynx</li>
      <li>Munchkin</li>
      <li>Persian</li>
      <li>Norwegian Forset</li>
      <li>Turkish Angora</li>
      <li>Bombay</li>
      <li>Selkirk Rex</li>
      <li>Munchkin</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

const myTag = document.querySelector('#list-1');

//textContent: HTMl을 제외한 텍스트만 가져옴. 새롭게 할당해서 요소 안의 값을 수정할 수 있음. 특수문자도 텍스트로 출력함.
console.log(myTag.textContent);

// innerHTML: 요소 안에 있는 HTML 자체를 문자열로 리턴해줌.
//주의해야할 점은 줄바꿈이나 들여쓰기 같은 부분도 모두 포함됨.
console.log(myTag.innerHTML);

// outerHTML: 해당 문자열을 포함한 전체 HTML코드를 문자열로 리턴함.
//주의해야할 점은 줄바꿈이나 들여쓰기 같은 부분도 모두 포함됨.
//ul태그가 시작되는 부분부터 ul태그가 끝나는 지점까지.
//outerHTML은 해당 요소 자체를 가리키는 특성 때문에 요소 자체가 새로운 요소로 교체되는 결과.
//outerHTML에 값을 할당하게 되면 처음 선택한 요소는 사라진다!!!!!
console.log(myTag.outerHTML);

✍️요소 노드의 프로퍼티들을 한 번 더 복습

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div id="content">
    <h2 id="title-1">Cat-1</h1>
    <ul id="list-1">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
    <h2 id="title-2">Cat-2</h1>
    <ul id="list-2">
      <li>Sphynx</li>
      <li>Munchkin</li>
      <li>Persian</li>
      <li>Norwegian Forset</li>
      <li>Turkish Angora</li>
      <li>Bombay</li>
      <li>Selkirk Rex</li>
      <li>Munchkin</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

1. element.innerHTML

🔹요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다.
(내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

❗요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용됩니다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용해야해요!)

const myTag = document.querySelector('#list-1');

// innerHTML
console.log(myTag.innerHTML);
myTag.innerHTML = '<li>Exotic</li>';
console.log(myTag.innerHTML);