23.02.20 (노드찾기, 노드 중간 삽입, 노드복사, 노드이동)

😀자식(자손), 부모, 형제(이전,이후)  노드 찾기

onload = () => {

	let content = document.querySelector("#content");
    
    // 문서에서 자식(자손)노드를 찾는 방법
    let child = content.childNodes;

    // 노드의 부모 노드를 찾아 보자
    let parent = content.parentNode;
    
    parent.style.border = "3px solid blue";
    
    // 현재 노드에서 이전 형제 노드를 찾는 방법
    let previous = content.previousElementSibling;
    
    // 현재 노드에서 이후 형제 노드를 찾는 방법
    let next = content.nextElementSibling;

}

주의 ) childNodes    

 

 

 

😀중간 노드 삽입 / 노드복사

onload = () => {
		
		let page = document.querySelector("#sample_page");
		
        	// page의 첫번째 자식노드
		let first = page.firstChild;
		
		let p_element = document.createElement("p");
		
		let p_text = document.createTextNode("추가내용1");
		
		p_element.appendChild(p_text);
		
		p_element.style.border = "3px solid red";
		
		// 형식) 부모노드.insertBefore(삽입할 노드, 기준점노드)
		page.insertBefore(p_element, first);
		
		//p_element 노드를 복사하는 방법
		let p2_element = p_element.cloneNode(true);
		
		page.appendChild(p2_element);
	}

 

😀노드이동

// 1. 이동시킬 노드를 우선적으로 찾아야 한다.
		let header = document.querySelector("#header");
		
		// 2. 이동될 노드를 찾아야 한다.
		let content = document.getElementById("content");
		
		// 3. header노드를 content노드의 자식 노드로 변경해 보자.
		content.appendChild(header);