728x90
<!DOCTYPE html>
<html> <!-- root tag -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- Dom : document Object model
각 태그를 접근하기 위한 object
그 object에 접근하기 위한 함수 -->
<!-- childNodes -->
<h3 id = "intro">h3 tag id intro</h3>
<p id = "demo">p tag id demo</p>
<button type="button" onclick="func()">버튼</button>
<script type="text/javascript">
function func(){
/*
let text = document.getElementById('intro').childNodes[0].nodeValue;
alert(text); */
let text = document.getElementById('demo').childNodes[0].nodeValue;
alert(text);
//노드로 값을 가져온다
}
</script>
모든 자식은 .childNodes 로 찾을 수 있다.
<select id = "car">
<option>benz</option>
<option>bm</option><!-- 3번을 넣어야 출력 -->
<option>volvo</option>
</select>
<button type="button" onclick = "cars()">자동차 선택</button>
<script type="text/javascript">
function cars(){
let carName = document.getElementById('car').childNodes;
alert(carName[3].text);//bm
}
</script><!-- appendChil뒤에추가, insertChild앞에추가
-->
<div id = "div1">
<p id = "p1">첫번째 p태그</p>
<p id = "p2">두번째 p태그</p>
</div>
<button type="button" onclick = "appendfunc()">뒤에추가</button>
<button type="button" onclick = "insertfunc()">앞에추가</button>
<button type="button" onclick = "deletefunc()">삭제</button>
<script type="text/javascript">
function appendfunc(){
let ptag = document.createElement("p");//<p></p>
let textNode = document.createTextNode("새로운태그");// 문자열
ptag.appendChild(textNode);//<p>새로운태그</p>
let element = document.getElementById("div1");
element.appendChild(ptag);
}
function insertfunc(){
let h3tag = document.createElement("h3");
let textNode = document.createTextNode("새로운H3태그");
h3tag.appendChild(textNode);//<p>새로운태그</p>
let element = document.getElementById("div1");
let elementBefore = document.getElementById("p2");
element.insertBefore(h3tag, elementBefore);
}
function deletefunc(){
let element = document.getElementById("div1");
let removeElement = document.getElementById("p2");
element.removeChild(removeElement);
}
</script>
<!-- NodeList 찾기-->
<p>Hello</p>
<p>World</p>
<p>I can do it</p>
<p>Never Change My Mind</p>
<button onclick = "listfunc()">Nodelist</button>
<script type="text/javascript">
function listfunc(){
let nodelist = document.getElementsByTagName("p");
alert(nodelist.length);/* p 태그가 7개 있다 배열*/
nodelist[3].innerHTML = "안녕하세요";//<p>Hello</p>이게 변경
for(i = 0; i < nodelist.length; i++){
nodelist[i].style.backgroundColor = "green";
}
}
</script>
728x90
'JavaScript' 카테고리의 다른 글
| Node.js json data (0) | 2021.07.02 |
|---|---|
| //Javascript// 10진수 -> 2진수, 8진수, 16진수 (0) | 2021.03.06 |
| 36일차//Javascript// onload, onchange (0) | 2021.03.04 |
| 35일차//Javascript// 10진수 ->2,8,16진수 변환 (0) | 2021.03.03 |
| 35일차//Javascript//🎈 과제 5 : button 클릭시 사진변경/ document.getElementById('img').src (0) | 2021.03.03 |
