자바스크립트 선택,복사,생성,추가하기
- 퍼블리셔/javascript
- 2014. 6. 9. 06:00
선택하기
자바스크립트에서 가장 먼저 해야할것이 선택하기 일것입니다.
어떻게 선택하는지 알아봅니다.
아이디 선택하기
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="수정";