1. DOM 트리의 노드
- 요소 노드 : 모든 HTML 태그를 의미함
- 텍스트 노드: 태그의 텍스트 내용
- 속성 노드: 태그의 속성
- 주석 노드: 주석
2. DOM에 접근하기
- getElementById(id) : id명으로 접근함
- getElementByClassName(class) : 클래스명으로 접근하며 여러요소가 배열 형태로 저장됨
- getElementByTagName(tag) : 태그명으로 접근하며 여러 요소가 배열 형태로 저장됨
- querySelector() : id명이나 선택자를 사용해 접근함
- querySelectorAll() : 클래스명이나 태그명의 선택자를 사용해 접근함. 여러 노드가 노드 리스트 형태로 저장.
- 속성 가져오기 및 수정하기
- getAttribute(속성)
- setAttribute(속성, 값)
- 이벤트 처리하기
- 요소.addEventListener(이벤트, 함수, 캡처 여부)
- 이벤트 버블링 : 이벤트가 자식 -> 부모로 전파되는 현상
(3번째 인자로 False 입력시 버블링됨. *default로 입력 생략 가능)
- 이벤트 캡쳐링 : 이벤트가 부모 -> 자식으로 전파되는 현상 (True 입력시 캡쳐링됨)
- CSS 속성에 접근하기
- document.요소명.style.속성명
3. 텍스트 노드를 사용하는 새로운 요소 추가하기
| 순서 | 메서드 | 설명 |
| 1 | createElement() | 새로운 요소 노드를 만듬 |
| 2 | createTextNode() | 새로운 텍스트 노드 만듬 |
| 3 | appendChild() | 텍스트노드를 요소노드의 자식으로 연결 |
| 4 | appendChild | 요소 노드를 DOM에 연결 |
4. 속성값이 있는 새로운 요소 추가하기
| 순서 | 메서드 | 설명 |
| 1 | createElement() | 새로운 요소 노드를 추가 |
| 2 | createAttribute() | 새로운 속성 노드를 추가 |
| 3 | 속성값 지정하기 | 속성값을 프로퍼티로 지정 |
| 4 | setAttributeNode() | 속성 노드를 요소 노드의 자식으로 연결 |
| 5 | appendChild() | 요소 노드를 DOM에 연결 |
5. 노드 삭제
- parentNode 프로퍼티로 부모 노드를 찾아서 부모 노드에서 삭제함.
부모노드.removeChild(자식노드)
예제) todo list 추가 입력하고, 체크박스 클릭시 알림창 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
u1{
list-style: none;}
</style>
</head>
<body>
<h1>오늘의 할일</h1>
<u1 id="todo-list">
<li>
<input type="checkbox" id="todo1">
<label for="todo1">이벤트 버블링 공부하기</label>
</li>
<li>
<input type="checkbox" id="todo2">
<label for="todo2">소풍가기<label>
</li>
<li>
<input type="checkbox" id="todo3">
<label for="todo3">맛있는거 먹으러 가기<label>
</li>
</u1>
<br>
<label for="todo">할일을 입력하세요.</label>
<input type="text" id="todo-value">
<button id="todoBtn">할일입력</button>
<script>
//할일입력 버튼에 이벤트 걸어주기//
let todoBtn = document.getElementById("todoBtn");
//얻어온 버튼에 이벤트 등록하기
todoBtn.addEventListener('click',inputTodo);
//할일입력 버튼이 눌렸을떄 구현할 부분을 처리하는 함수구현
function inputTodo(){
//할일을 하나 보여주는 UI가 아래처럼 구현되었으므로 아래요소 모두 만들어준다
// <li>
// <input type="checkbox" id="todo3">
// <label for="todo3">맛있는거 먹으러 가기<label>
// </li>
let li = document.createElement('li');
let input = document.createElement('input');
let label = document.createElement('label');
//사용자가 입력한 할일 즉, input에 입력한 값을 얻어온다.
let todoValue = document.getElementById('todo-value').value; //.value는 값이 나옴.
//label안에 들어갈 textnode를 만든다
let labelText = document.createTextNode(todoValue)
//각 엘리먼트가 가져야할 속성들을 추가해준다.
input.setAttribute('type', 'checkbox');
input.setAttribute('id','todo5');
label.setAttribute('for', 'todo5');
//각 엘리먼트들을 잘 조립한다.
label.appendChild(labelText);
li.appendChild(input);
li.appendChild(label);
//li의 부모인 ul을 얻어와서 ul에 붙여준다
let todoList = document.getElementById('todo-list');
todoList.appendChild(li);
}
//input을 모두 감싸고 있는 ul에 이벤트를 등록한다.
let todoList = document.getElementById('todo-list');
todoList.addEventListener('click', function(e){
e.stopPropagation();
// alert(e.target.tagName);
if (e.target.tagName == "INPUT"){
alert('클릭!!')
}
});
// let inputs = document.querySelectorAll('input');
// inputs.forEach(function(inputs){
// inputs.addEventListener('click', function(){
// alert('클릭!!');
// });
// });
// for(let i = 0; i < inputs.length; i++){
// inputs[i].addEventListener('click', function(){
// alert('클릭!!');
// });
// }
</script>
</body>
</html>오늘의 할일
'[Front-End] html+css+javascript' 카테고리의 다른 글
| [HTML+CSS+자바스크립트 웹 표준의 정석] 자바스크립트 (익명함수,선언적함수,가변인자함수,내부함수,자기호출함수,콜백함수,클로저,setTimeout, setInterval, 이벤트) (0) | 2022.06.03 |
|---|---|
| [HTML+CSS+자바스크립트 웹 표준의 정석] 자바스크립트 기본문법 (0) | 2022.06.01 |
| [HTML+CSS+자바스크립트 웹 표준의 정석] CSS - 연결선택자,속성선택자, 가상클래스 (0) | 2022.05.31 |
| [HTML+CSS+자바스크립트 웹 표준의 정석] CSS 다루기 - 기본선택자, 스타일 우선순위, 박스모델, 레이아웃만들기 (0) | 2022.05.31 |
| [HTML+CSS+자바스크립트 웹 표준의 정석] HTML 시작하기 (0) | 2022.05.29 |