Dom : Document Object Model
각 Tag를 접근하기 위한 Object
그 Object를 접근하기 위한 함수
<html> <!-- root tag -->
<head> <!-- html child nod -->
<body> <!-- html child nod -->
<!-- childNodes -->
<!-- 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() {
//Dom을 이용해 해당 id의 글을 가져옴
//let text = document.getElementById("intro").childNodes[0].nodeValue;
//alert(text);
let text = document.getElementById("demo").childNodes[0].nodeValue;
alert(text);
}
</script>
<br><br>
<select id="car">
<option>Benz</option>
<option>BMW</option>
<option>Volvo</option>
</select>
<button type="button" onclick="myfunc()">선택</button>
<script type="text/javascript">
function myfunc() {
let carname = document.getElementById("car").childNodes;//tag<>숫자대로 0~n
// alert(carname[1].text);//Benz
alert(carname[3].text);//BMW
}
</script>
<!-- appendChild (뒤에 추가), insertChild(앞에 추가) -->
<!-- appendChild (뒤에 추가), 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() {
//태그명을 추가
//element는 태그 지칭
let ptag = document.createElement('p'); //<p></p>
let textNode = document.createTextNode("새로운 태그");//문자열
ptag.appendChild(textNode); //<p>새로운 태그</p> 가 완성됨
let element = document.getElementById("div1");
element.appendChild(ptag);//div1에 ptag를 넣어줌 (뒷쪽에서 완성됨)
}
function insertfunc() {
let h3tag = document.createElement("h3");
let textNode = document.createTextNode("새로운 h3태그");
h3tag.appendChild(textNode);
let element = document.getElementById("div1");
//앞에 추가시에는 어느 앞에 추가할지 명시필요
let eleBefore = document.getElementById("p2");
//(무엇을, 어디앞에)
element.insertBefore(h3tag, eleBefore);
}
function deletefunc() {
let element = document.getElementById("div1");
let removeEle = document.getElementById("p2");//p2 삭제
element.removeChild(removeEle);
}
</script>
<!-- NodeList -->
p태그던 h태그던 리스트로 묶어 불러 글자변경 및 색상수정 등의 유지보수를 함
<p>Hello</p>
<p>World</p>
<p>I can do it</p>
<p>Never Change My Mind</p>
<button type="button" onclick="listFunc()">NodeList</button>
<script type="text/javascript">
function listFunc() {
let nodelist = document.getElementsByTagName("p");//html의 p태그가 모두 배열로 넘어옴
//alert(nodelist.length);
//글자변경
nodelist[3].innerHTML = "안녕하세요";//hello자리
//p태그 컬러넣기
for (i = 0; i < nodelist.length; i++) {
nodelist[i].style.backgroundColor = "#00ff00";
}
}
</script>
'Java Script' 카테고리의 다른 글
| 자동으로 스크롤바 내려가게 하기 (0) | 2020.07.10 |
|---|---|
| 마우스 이펙트 (0) | 2020.07.10 |
| 문자열 아스키코드값으로 받기 (0) | 2020.07.10 |
| select에서 옵션을 변경할 경우 알림창 설정하기 (0) | 2020.07.10 |
| 숫자가 아닌 문자가 포함되어 있습니다 (0) | 2020.07.10 |
