DOM? (Document Object Model)
각 tag를 접근하기 위한 object, 그 object를 접근하기 위한 함수들
Document = 문서 -> 문서안의 tag에 접근하도록 만들어진 Object
Object = 객체
문서 객체 모델
DOM은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(Structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕니다.
DOM은 구조화된 nodes와 property와 method를 갖고 있는 object로 문서를 표현한다.
getElementById() - id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환
getElementsByClass() - class 속성을 사용하여 접근 하며, class 속성은 동일한 class명이 존재할 수 있기 때문에 배열로 반환된다.
getElementsByName() - name 속성을 사용하여 접근 하며, name 속성은 동일한 name명이 존재할 수 있기 때문에 배열로 반환된다.
getElementsByTagName() - document 안에 있는 tag명으로 직접 접근하며, 배열로 반환된다.
childNodes
주어진 요소의 자식 노드 배열을 반환
<select id="cars">
<option>Benz</option>
<option>BMW</option>
<option>volvo</option>
</select>
<button type="button" onclick="cars()">선택</button>
<!--
<select id="cars"> 0
1 <option>Benz</option> 2
3 <option>BMW</option> 4
5 <option>volvo</option> 7
</select>
-->appendChild, insertBefore, removeChild
document.createElemnet('tag')
해당 'tag' 생성
documnet.createTextNode('문자')
해당 'tag'안에 들어갈 문자
'tag'.id, 'tag'.className 을 통해서 id와 class를 설정할 수 있다.
document.getElementById('id')
해당 하는 id값 객체를 가져온다.
element.appendChild('tag')
해당 하는 id값 객체를 이용해서 설정한 'tag'를 맨 뒤에 추가한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
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() {
let ptag = document.createElement('p'); //<p></p> 추가 (태그생성)
let textNode = document.createTextNode('새로운 p tag'); //ptag안에 들어갈 문자
//새로운 ptag에 id와 클래스를 추가
ptag.id = 'newid'; //id를 추가할때
ptag.className = 'newcls' //cls를 추가할때
ptag.appendChild(textNode); //<p id="newid" class="newcls">새로운 p tag</p> 추가!
//이걸 div에 추가하려면?
let element = document.getElementById('div1')
element.appendChild(ptag); //맨 뒤에 추가
}
function insertfunc() {
let h3tag = document.createElement('h3'); //h3 태그 만들기
let textNode = document.createTextNode('h3 태그를 추가');
h3tag.appendChild(textNode); //<h3>h3 태그를 추가</h3>
let element = document.getElementById('div1');
let elementBefore = document.getElementById('p2'); //id가=p2 요소 앞에
element.insertBefore(h3tag, elementBefore);
//앞에다 추가하는 경우 어디 앞에 라고 지정해줘야 한다.
}
function deletefunc() {
let element = document.getElementById('div1');
let removeElement = document.getElementById("p2"); //어떤 id 태그를 삭제할지?
element.removeChild(removeElement); //삭제
}
</script>
</body>
</html>첫번째 p태그
두번째 p태그
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [JavaScript] 문자열을 XML파일로 변환하기 (String / XML parsing) (0) | 2021.06.08 |
|---|---|
| [JavaScript] getElements.ByTagName()를 사용한 nodeList 실습 (0) | 2021.06.08 |
| [JavaScript]이벤트 리스너(event listener) (0) | 2021.06.07 |
| [JavaScript] 페이지 이동 ( location.replace(), location.href, <form action="">과 차이점 ) (0) | 2021.06.07 |
| [JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') ) (0) | 2021.06.07 |