💡 getElementsByTagName(tagname) : 태그이름이 tagname과 일치하는 element 배열 얻기
var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경
}
아이디(id)를 이용한 선택
💡getElementById(id) : 태그의 id 속성이 id과 일치하는 element객체얻기
var selectedItem = document.getElementById("even"); // 아이디가 "even"인 요소를 선택
selectedItem.style.color = "red"; // 선택된 요소의 텍스트 색상을 변경
클래스(class)를 이용한 선택
💡getElementsByClassName(classname) : 태그의 class 속성이 classname과 일치하는 element배열얻기
var selectedItem = document.getElementsByClassName("odd"); // 클래스가 "odd"인 모든 요소를 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경
}
name 속성(attribute)을 이용한 선택
💡getElementsByClassName(name) : 태그의 name 속성이 name과 일치하는 element배열얻기
var selectedItem = document.getElementsByName("first"); // name 속성값이 "first"인 모든 요소를 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경
}
CSS 선택자(selector)를 이용한 선택
💡 querySelectorAll(selector) : selector에 일치하는 모든 element배열얻기
var selectedItem = document.querySelectorAll("li.odd"); // 클래스가 "odd"인 요소 중에서 <li> 요소만을 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경
}
💡querySelector(selector) : selector에 일치하는 첫번째 element객체얻기
var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경
}
HTML 객체 집합(object collection)을 이용한 선택
var title = document.title; // <title> 요소를 선택
document.write(title);
노드 조작하기
노드 생성
createElement(tagName) : element node 생성 createAttribute(text) : text node 생성 createTextNode(node) : text node 생성
function createNode() {
var criteriaNode = document.getElementById("text"); // 아이디가 "text"인 요소를 선택
var newNode = document.createElement("p"); // 새로운 <p> 요소 생성
newNode.innerHTML = "새로운 단락!!";
document.body.insertBefore(newNode, criteriaNode); // 새로운 요소를 기준이 되는 요소 바로 앞에 추가
}
노드 추가
appendChild(node) : 객체에 node를 child로 추가 insertBefore(new, cirterial) : 새로운 노드를 특정 노드 바로 앞에 추가 insertData(offset, newData) : 텍스트 노드의 텍스트 데이터에 새로운 텍스트 추가
function appendNode() {
var parent = document.getElementById("list"); // 아이디가 "list"인 요소를 선택
var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택
parent.appendChild(newItem); // 해당 요소의 맨 마지막 자식 노드로 추가
}
노드 삭제
removeChild(childnode) : 객체의 자식 노드를 제거 removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거
var parent = document.getElementById("list"); // 아이디가 "list"인 요소를 선택
var removedItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택
parent.removeChild(removedItem); // 지정된 요소를 삭제
노드 복제
cloneNode(true) : 특정 노드를 복제
function cloneElement() {
var parent = document.getElementById("list"); // 아이디가 "list"인 요소를 선택
var originItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택
parent.appendChild(originItem.cloneNode(true)); // 해당 노드를 복제하여 리스트의 맨 마지막에 추가
}
노드 값 변경
nodeValue 프로퍼티 이용 setAttribute() : 노드의 속성값을 변경
var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택
function changeText() {
para.firstChild.nodeValue = "텍스트 변경 완료!";
}
노드 교체
replaceChild() : 특정 노드 그 자체를 다른 노드로 교체
var parent = document.getElementById("parent"); // 부모 노드를 선택
var first = document.getElementById("first");
var third = document.getElementById("third");
function changeNode() {
parent.replaceChild(third, first); // first 요소를 삭제하고, third 요소를 삽입
}
객체의 속성 설정
setAttribute(name, value) : 객체의 속성 지정 * 웹 브라우저가 지원하지 않는 태그의 속성도 사용 가능 * . 으로 접근 : 웹 브라우저가 지원하는 속성만 변경 가능 getAttribute(name) : 객체의 속성 값을 가져옴
