선택하기

자바스크립트에서 가장 먼저 해야할것이 선택하기 일것입니다.
어떻게 선택하는지 알아봅니다.

아이디 선택하기

window.document.getElementById("item1");

태그(엘리먼트) 선택하기

window.document.getElementsByTagName("div");

클래스 선택하기

window.document.getElementsByClassName("content_data");

부모 선택하기

document.getElementById("item1").parentNode;

자식 선택하기

childNodes 는 텍스트 노드까지 불러오므로 순서를 염두해두어야 한다.

var item = window.document.getElementById("item");
var nodes = item.childNodes;
alert("#item의 자식노드 갯수는 ? " + nodes.length);

형재 선택하기

previousSibling 도 마찬가지로 텍스트 노드를 선택하므로 순서를 염두해두어야 한다.

//  기준이되는 #item를 구한후.
var item    = document.getElementById("item");

// item노드에서 형제노드에 접근하기.
item.previousSibling.previousSibling.style.border = "1px solid #ff0000";        

// ie 는 다르게 선택함으로 아래처럼 한번만 사용한다.
item.previousSibling.style.border = "1px solid #ff0000";

생성, 추가, 복사하기

엘리먼트 생성하기

var p1 = document.createElement("p");

텍스트노드 생성하기

var text1 = document.createTextNode("추가내용1");

html 추가하기

var item = document.getElementById("item");
// 첫번째 영역에 추가하기.
item.innerHTML = "<p style='border:1px solid #ff0000'>추가내용1</p>"+item.innerHTML;

엘리먼트 복사하기

// 복사할 엘리먼트는 먼저 선택한다.  
var p1 = document.createElement("p");        

// p1노드를 그대로 복사.
var p2 = p1.cloneNode(true);

// 복사한 엘리먼트에 textNode를 수정한다.
p2.firstChild.nodeValue="수정";