[자바스크립트] 잡다한거

바디에다 요소 추가하고 거기다가 내용 쓰기

 

<script>
    var element = document.createElement('div');
    element.id = 'testqq';
    document.body.appendChild(element); // element를 body에 추가
    var el = document.getElementById('testqq');
    el.textContent = 'hahah sibar';
    console.log(el);
</script>

const carrot = document
    .querySelector('section > ul > li');
carrot.textContent = '제주당근';


document
    .querySelector('section ul')
    .lastElementChild.classname  = 'soldout organic';

const $carrot = document
    .querySelector('section > ul > li');


$carrot.textContent = '제주당근';

$carrot.firstChild.nodeValue = '친환경유전자조작당근';

 

$carrot.firstChild.nodeValue와 $carrot.textContent는 양자 모두 DOM (Document Object Model) 요소의 텍스트 내용을 참조하는 방법이지만, 그 참조하는 범위와 동작 방식에 차이가 있습니다.

$carrot.firstChild.nodeValue : $carrot 요소의 첫 번째 자식 노드의 값을 반환합니다. 만약 첫 번째 자식 노드가 텍스트 노드라면, 이 텍스트 노드의 텍스트를 반환합니다. 만약 첫 번째 자식 노드가 요소 노드라면, nodeValue는 null을 반환합니다. 즉, 이 방법은 첫 번째 자식 노드가 텍스트인 경우에만 사용할 수 있습니다.

$carrot.textContent : $carrot 요소의 모든 자식 노드들의 텍스트 내용을 반환합니다. 이 방법은 모든 텍스트 노드의 텍스트를 모아서 반환하므로, 요소 안의 전체 텍스트 내용을 얻을 수 있습니다.

따라서 이 두 방법의 주요 차이점은 다음과 같습니다:

firstChild.nodeValue는 첫 번째 자식 노드의 텍스트만을 참조하며, 첫 번째 자식 노드가 요소 노드인 경우에는 null을 반환합니다.
textContent는 모든 자식 노드의 텍스트를 참조하며, 텍스트 노드와 요소 노드가 섞여 있는 경우에도 모든 텍스트를 반환합니다.

 

 

 

물론입니다. HTML 구조를 이용해서 예를 들어봅시다.

html
Copy code
<section>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <div>
    <ul>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
</section>
위의 HTML에서 querySelector('section > ul > li')는 section의 직접적인 자식인 ul 요소를 찾고, 그 ul의 직접적인 자식인 li 요소를 선택합니다. 따라서 "Item 1"과 "Item 2"가 해당됩니다.

하지만 querySelector('section ul li')는 section 내의 모든 ul 요소를 찾고, 그 ul 내의 모든 li 요소를 선택합니다. 따라서 "Item 1", "Item 2", "Item 3", "Item 4" 모두가 해당됩니다.

querySelector 메소드는 일치하는 첫 번째 요소만을 반환하므로, querySelector('section > ul > li')는 "Item 1"을 반환하고, querySelector('section ul li')는 역시 "Item 1"을 반환합니다. 하지만 선택 범위를 확인하기 위해 querySelectorAll을 사용하면, 위에서 설명한 대로 각각 다른 요소 집합이 반환됩니다.

$onion.classList.replace('hidden', 'organic');

 

// 대괄호 접근자로는 CSS 속성명 그대로 사용 가능 $onion.style['font-size'] = '2em';

 

// 💡 마침표 접근자를 쓰면 camel case 사용 $onion.style.fontSize = '1em';

 

 

 

const onionCompStyle = window.getComputedStyle($onion); onionCompStyle;

 

 

 

onionCompStyle.fontSize;

 

 

 

 

 

 

 

 

removeChild - Node의 기능
인자로 주어진 자식 노드를 제거 - 자식 노드이어야 동작
👉 MDN 문서 보기
 
 


⭐ 자식 요소 모두 지우기
⚠️ 아래 방법은 비추천
요소들을 삭제하지만, 이벤트 핸들러가 걸려 있을 경우 이들은 메모리에 남음

 

 

$ul.appendChild($tomato);

['상추', '가지', '브로콜리'].forEach(itm => {
    $el = document.createElement('li');
    $el.textContent = itm;
    $ul.appendChild($el);
});


const $newSec = document.createElement('section');
const $newUl = document.createElement('ul');
$newSec.appendChild($newUl);

[
    { name: '소고기', classes: []},
    { name: '돼지고기', classes: ['soldout']},
    { name: '닭고기', classes: []},
    { name: '오리고기', classes: ['soldout', 'organic']},
    { name: '양', classes: ['organic']}
]
    .forEach(itm => {
        $el = document.createElement('li');
        $el.textContent = itm.name;
        $el.classList.add(...itm.classes)

        $newUl.appendChild($el);
    });

document.querySelector('body')
    .append($newSec);