1. 노드리스트
- DOM에 접근할 때 querySelectorAll()메서드를 사용하면 노드를 한꺼번에 여러 개 가져 올 수 있음
- 이때 노드 정보를 여러 개 저장한 것 => 노드리스트
- 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있음
<h1>web Programing</h1>
<ul id="itemlist">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
2. 텍스트 노드를 사용하는 새로운 노드 추가하기
-createElement() 메서드
-요소 노드 만들기
-document.createElement(노드명);
- createTextNode() 메서드
- 텍스트 노드 만들기
- document.createTextNode(텍스트);
-appendChild() 메서드
-자식 노드 연결하기
-부모노드.appendChild(자식노드)
- 링크를 클릭하면 텍스트 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크를 클릭하면 텍스트 표시하기 </title>
</head>
<body>
<div id="container">
<h1>DOM을 공부합시다.</h1>
<a href="#" onclick="addP(); this.onclick='';">더보기</a>
<div id="info"></div>
</div>
<script>
function addP() {
var newP = document.createElement("p"); //p요소 노드 만들기
var txtNode = document.createTextNode("DOM은 document object model의 줄임말 입니다.");
newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);
}
</script>
</body>
</html>
onclick="addP(); this.onclick=' ' ; " -> 링크를 클릭하면 addP()함수가 한 번만 실행되도록
3. 속성값이 있는 새로운 요소 추가하기
- createAttribute() 메서드
- 속성노드 만들기
- document.createAttribute(속성명);
-setAttributeNode()메서드
- 속성 노드 연결하기
- 요소명.setAttributeNode(속성노드);
- 링크를 클릭하면 텍스트와 이미지 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크를 클릭하면 텍스트와 이미지 표시하기 </title>
<style>
#container{
width:500px;
margin:10px auto;
padding:20px;
}
#info {
margin-top:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>DOM을 공부합시다</h1>
<a href="#" onclick="addContents(); this.onclick='';">더 보기</a>
<div id="info"></div>
</div>
<script>
function addContents() {
var newP = document.createElement("p");
var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
newP.appendChild(txtNode);
var newImg = document.createElement("img");
var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";
altNode.value = "돔 트리 예제 이미지";
newImg.setAttributeNode(srcNode);
newImg.setAttributeNode(altNode);
document.getElementById("info").appendChild(newP);
document.getElementById("info").appendChild(newImg);
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 17장 예제 - DOM에서 노드 삭제하기 / 실습 3 (2) | 2023.04.14 |
|---|---|
| 17장 실습 2 (0) | 2023.04.14 |
| 17장 실습 (2) | 2023.04.14 |
| 17장 예제 - DOM에서 이벤트 처리하기 (2) (0) | 2023.04.14 |
| 17장 예제 - DOM에서 이벤트 처리하기 (1) (0) | 2023.04.14 |
