2022_05_26_JS_4일

const $id=document.getElementById('id');

$id.childNodes; //NodeList 
$id.children; // HTMLCollection
$id.firstChild;
$id.firstElementChild;
$id.lastElementChild;
$id.hasChildNodes();

------------------------------------------
$id.parentNode;
$id.previousElementSibling;
$id.nextElementSibling;

---------------------------------------------

$id.innerHtml+='<li class='ba'>baba</li>';

-------------------------------------------

const $fruits=document.getElementById('fruits');
//1.요소 노드 생성(추가는 따로입니다.)
const $newLi=document.createElement('li');
//2.텍스트 삽입
$newLi.textContent='Banana';
//3.ul에 새로운 li 노드 추가
$fruits.appendChild($newLi);

$fruits.insertBefore($newLi,$fruits.firstElementChild);

const $frag=document.createDocumentFragment();
        
        for(let f of fruitName){
            const $li=document.createElement('li');
            $li.textContent=f;
            $frag.appendChild($li);
        }

        $fruits.appendChild($frag);
-------------------------------------------------------------------


//apple의 사본 생성(얕은 복사 : 자기 자신 노드만 복사 )
    const $shallowClone=$apple.cloneNode();
    console.log($shallowClone);

    $shallowClone.textContent=$apple.textContent;
    $fruits.appendChild($shallowClone);


    //apple의 사본 생성(깊은 복사 : 자기 자신을 포함한 모든 자손 노드를 복제 )
    const $deeppClone=$apple.cloneNode(true);
    $fruits.appendChild($deeppClone);



-----------------------------------------------
$fruits.replaceChild($mango,$fruits.firstElementChild);

$fruits.removeChild($fruits.lastElementChild);