Jade_o.o
[javascript] JavaScript DOM - 요소 다루기, 요소 선택, 요소 추가 본문
요소 선택
1) getElementById : id 속성값으료 요소를 선택 (요소 하나만 선택)
2) getElementsByClassName : class 속성값으로 요소 선택, for문으로도 출력 가능
=> HTMLCollection 형태 - 배열과 비슷한 상태, 태그 요소를 포함하고 있음
3) getElementsByTagName : 태그 이름으로 요소 선택
=> HTMLCollection 형태 - 배열과 비슷한 상태, 태그 요소를 포함하고 있음
4) getElementsByName : name 속성값으로 요소를 선택
=> NodeList 형태 - 배열과 비슷한 형태
5) querySelector : 선택자를 이용해서 요소 선택
=> css 선택자와 동일하게 (클래스: . / id: # / 태그: 태그이름 등등..)
6) querySelectorAll : 선택자를 이용해서 요소 전체선택
=> NodeList 형태 - 배열과 비슷한 형태
태그의 내부 내용을 변경
- innerText : 문자열을 넣음 & 공백 문자를 제거
- innerHTML : HTML 요소를 넣음
- textContent : 문자열을 넣는거 & 공백 문자를 반환
HTMLCollection vs NodeList
1.
- HTMLCollection 객체는 태그 요소만 포함
- NodeList 객체는 태그와 텍스트 노드 등을 모두 포함한다.
2.
- HTMLCollection 객체는 자식 요소 노드에 접근할 때,
인덱스 방식과 namedItem 메소드 방식 모두 사용 가능
- NodeList 객체는 인덱스로만 접근 가능한다.
3.
- HTMLCollection은 동적이고, NodeList는 정적이다.
- HTMLCollection 객체는 DOM을 다루면서 새로운 요소가 추가 됐을때
추가 된 요소도 가져올 수 있다.
- NodeList 객체는 새로 추가된 요소를 가져올 수 없다.
4.
- HTMLCollection : 실제 배열x, 배열과 유사한 객체
- NodeList : 배열 형태로 사용 가능, NodeList만의 메서드(forEach 등)가 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<div class = "container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<input type="text" name="userName">
<input type="text" name="userName">
<div id = "parent">
Text
<div id="two">div 두번째 Text</div>
<div>div 세번째 Text</div>
</div>
</body>
</html>전체 html 코드
요소 선택 1 - getElementById : id 속성값으료 요소를 선택 (요소 하나만 선택)
// 1. getElementById : id 속성값으료 요소를 선택 (요소 하나만 선택)
let dom1 = document.getElementById('green') //''안에 선택자 이름 없이 아이디만 가져옴
console.log(dom1) // <div class="box" id="green">1</div>
요소 선택 2 - getElementByClassName : class 속성값으로 요소 선택, for문으로도 출력 가능
- HTMLCollection 형태 - 배열과 비슷한 상태, 태그 요소를 포함하고 있음
// 2. getElementsByClassName : class 속성값으로 요소 선택, for문으로도 출력 가능
// HTMLCollection 형태 - 배열과 비슷한 상태, 태그 요소를 포함하고 있음
let dom2 = document.getElementsByClassName('box'); //''안에 선택자 이름 없이 클래스명만 작성
console.log('dom2 : ', dom2);
for(let i = 0; i < dom2.length; i++){
console.log(dom2[i]);
}
요소 선택 3 - getElementsByTagName : 태그 이름으로 요소 선택
- HTMLCollection 형태 - 배열과 비슷한 상태, 태그 요소를 포함하고 있음
// 3. getElementsByTagName : 태그 이름으로 요소 선택
// HTMLCollection 형태
let dom3 = document.getElementsByTagName('div');
console.log('dom3 : ', dom3);
요소 선택 4 - getElementsByName : name 속성값으로 요소를 선택
- NodeList 형태 - 배열과 비슷한 형태
// 4. getElementsByName : name 속성값으로 요소를 선택
// NodeList 형태 - 배열과 비슷한 형태
let dom4 = document.getElementsByName('userName');
console.log('dom4 : ', dom4)
요소 선택 5 - querySelector : 선택자를 이용해서 요소 선택
- css 선택자와 동일하게 (클래스: . / id: # / 태그: 태그이름 등등..)
// 5. querySelector : 선택자를 이용해서 요소 선택
// css 선택자와 동일하게 (클래스: . / id: # / 태그: 태그이름 등등..)
let dom5 = document.querySelector('#red');
console.log('dom5 : ', dom5);
요소 선택 6 - querySelectorAll : 선택자를 이용해서 요소 전체선택
- NodeList 형태 - 배열과 비슷한 형태
// 6.querySelectorAll : 선택자를 이용해서 요소 전체선택
// NodeList 형태
let dom6 = document.querySelectorAll('div')
console.log('dom6 : ', dom6);
태그의 내부 내용을 변경
- innerText : 문자열을 넣음 & 공백 문자를 제거
- innerHTML : HTML 요소를 넣음
- textContent : 문자열을 넣는거 & 공백 문자를 반환
let two = document.getElementById('two');
//two.innerHTML = '<strong>강조</strong>';
//two.innerHTML = '강조';
//two.innerText = ' textContent<strong>강조</strong>. @ *'
two.textContent = ' textContent<strong>강조</strong>. @ *'
console.log(two.innerText);
console.log(two.textContent);
부모 요소 선택 : parentChildren, parentChildren.namedItem(''), parentChildrenNodes
// 부모 요소 선택
let parent = document.getElementById('parent')
let parentChildren = parent.children;
let parentChildrenNodes = parent.childNodes;
console.log('childeren : ', parentChildren);
console.log('childeren : ', parentChildren.namedItem('two'));
console.log('childNodes : ', parentChildrenNodes);
자식 요소 추가
// 자식 추가
// 추가할 부모 선택 => 추가할 자식 만들고 => 자식 붙여주기
let child1 = document.createElement('div'); // <div></div>
child1.innerText = '네번째 Text';
parent.appendChild(child1);'JavaScript' 카테고리의 다른 글
| [javascript] JavaScript DOM - 다른 노드 접근하기 (0) | 2024.01.17 |
|---|---|
| [javascript] JavaScript DOM - 클래스 관련 메소드, 속성 변경 메소드 (0) | 2024.01.17 |
| [javascript] JavaScript 공부 정리14 - 이벤트 addEventListener (0) | 2024.01.16 |
| [javascript] JavaScript 공부 정리13 - 요소 선택, 요소 다루기, 요소 추가, 요소 삭제 (0) | 2024.01.16 |
| [javascript] JavaScript 공부 정리12 - DOM(Document Object Model) (1) | 2024.01.16 |
