HTML 요소의 선택
| document.getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택함. |
| document.getElementById(아이디) | 해당 아이디의 요소를 선택함. |
| document.getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택함. |
| document.getElementsByName(name속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함. |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함. |
HTML 요소의 생성
| document.createElement(HTML요소) | 지정된 HTML 요소를 생성함. |
| document.write(텍스트) | HTML 출력 스트림을 통해 텍스트를 출력함. |
HTML 태그 이름(tag name)을 이용한 선택
var selected = document.getElementsByTagName("li");
for (var i = 0; i < selected.length; i++) {
selected.item(i).style.color = "blue";
}
아이디(id)를 이용한 선택
See the Pen Untitled by byeolyoon (@byeolyoon) on CodePen.
동일한 아이디를 두번째와 네번째에 줬지만 하나만 적용된다.
id를 이용한 선택은 해당 아이디를 가지고 있는 요소 중 첫 번째 요소 단 하나만을 선택하기 때문
따라서 여러 요소를 선택하고 싶을 때는 태그 이름이나 클래스와 같은 다른 방법 사용!
클래스(class)를 이용한 선택
var selected = document.getElementsByClassName("odd");
for (var i = 0; i < selected.length; i++){
selected.item(i).style.color = "green"
}
이렇게 하면 여러개 선택 가능.
name 속성을 이용한 선택
var selected = document.getElementsByName("first");
for (var i = 0; i < selected.length; i++) {
selected.item(i).style.color = "red";
}
CSS 선택자(selector)를 이용한 선택
querySelectorAll() 메소드를 이용
var selected = document.querySelectorAll("li.odd")
for (var i = 0; i < selected.length; i++) {
selected.item(i).style.color = "red";
}
HTML 객체 집합(object collection)을 이용한 선택
var title = document.title;
document.write(title);DOM 요소의 내용 변경
HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다."
DOM 요소의 스타일 변경
onclick을 사용한 글자색 변경
See the Pen Untitled by byeolyoon (@byeolyoon) on CodePen.
노드의 종류
노드로의 접근
nodeName
document.getElementById("document").innerHTML = document.childNodes[1].nodeName; // HTML 문서의 모든 자식 노드 중에서 두 번째 노드의 이름을 선택
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName // html 노드의 모든 자식 노드 중에서 첫 번재 노드의 이름을 선택
HTML 문서의 첫 번째 자식 노드는 <!DOCTYPE html>이며 두 번째 자식 노드는 <html>
또한, <html>노드의 첫 번째 자식 노드는 <head>이며, 세 번째 자식 노드는 <body>
nodeValue
var HeadingText = document.getElementById("heading").firstChild.nodeValue;
document.getElementById("text1").innerHTML = HeadingText;
document.getElementById("text2").firstChild.nodeValue = HeadingText;
innerHTML 프로퍼티 대신에 firstChild.nodeValue를 사용해도 같은 결과를 얻을 수 있음
nodeType
| 노드 | 프로퍼티 값 |
| 요소 노드(element node) | 1 |
| 속성 노드(attribute node) | 2 |
| 텍스트 노드(text node) | 3 |
| 주석 노드(comment node) | 8 |
| 문서 노드(document node) | 9 |
<h1 id="heading">nodeType 프로퍼티</h1>
<p id="head"></p>
<p id="document"></p>
var HeadingType = document.getElementById("heading").firstChild.nodeType;
document.getElementById("head").innerHTML = HeadingType;
document.getElementById("document").innerHTML = document.nodeType;
heading의 첫번째 자식요소는 텍스트노드이기때문에 3출력
document에 해당하는 부분은 문서노드이므로 9출력
노드 리스트
var listItem = document.getElementById("list").childNodes;
listItem[1].firstChild.nodeValue = "HTML 요소의 내용을 변경했어요"
자식 노드 중 첫 번째 <li>요소를 선택할 때 인덱스로 0이 아닌 1을 사용
HTML DOM에서 각 요소 노드 다음에는 별도의 텍스트 노드가 존재하기 때문
See the Pen Untitled by byeolyoon (@byeolyoon) on CodePen.
var text = document.getElementById("text").firstChild;
function appendText() {
text.insertData(6, " 나른한 ");
}노드의 조작
var text = document.getElementById("text").firstChild;
function appendText() {
text.insertData(6, " 나른한 ");
}
요소 노드의 생성
.createElement() 메소드를 사용하여 새로운 요소 노드를 만들 수 있음
function createNode(){
var elementNode = document.getElementById("text");
var newText = document.createTextNode("새로운 텍스트! ");
elementNode.appendChild(newText);
}
속성 노드의 생성.
createAttribute() 메소드를 사용하여 새로운 속성 노드를 만들 수 있음
function createNode(){
var elementNode = document.getElementById("text");
var newAttribute = document.createAttribute("style");
newAttribute.value = "color:orange";
text.setAttributeNode(newAttribute);
}
removeChild() 메소드
function remove(){
var parent = document.getElementById("list");
var removeItem = document.getElementById("item");
parent.removeChild(removeItem);
}
removeAttribute() 메소드
속성의 이름을 이용하여 특정 속성 노드를 제거
See the Pen Untitled by byeolyoon (@byeolyoon) on CodePen.
cloneNode() 메소드
cloneNode() 메소드는 기존의 존재하는 노드와 똑같은 새로운 노드를 생성
'JavaScript' 카테고리의 다른 글
| 자바스크립트를 이용하여 새로운 텍스트 상자를 추가하는 방법! (0) | 2023.07.13 |
|---|---|
| 자바스크립트 문법 (8) (0) | 2023.07.06 |
| 자바스크립트 문법 (7) (0) | 2023.07.06 |
| 자바스크립트 문법 (6) (0) | 2023.07.05 |
| 자바스크립트 문법 (5) (0) | 2023.07.04 |
