728x90
반응형
SMALL
1. document 객체
- 웹 페이지 자체(body)를 의미하는 객체
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document객체로 부터 시작
2. 프로퍼티
- getElementById(): 해당 아이디의 요소를 선택(요소하나만 접근).
주로 많이 사용! - getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택(배열로 반환)
- getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택(배열로 반환)
- getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택(배열로 반환)
- querySelectorAll(): css 선택자로 선택되는 요소를 모두 선택(배열로 반환)
- querySelector(): css 선택자로 선택되는 요소를 선택
3. 문서 객체 모델(Document Object Model)
- DOM 이라고 함
- HTML 문서 또는 XML 문서 등을 접근하기 위한 일종의 인터페이스 역할
- 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
✅ 문서객체모델 예제 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델1</title>
</head>
<body>
<h2>문서 객체 모델1</h2>
<ul>
<li name="markup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">jQuery</li>
<li class="backend">Apache</li>
<li class="backend">Nginex</li>
<li id="nodejs" class="js">Node.js</li>
<li id="react" class="js">React</li>
</ul>
<script>
// tag
const tagName = document.getElementsByTagName('li')
console.log(tagName.length)
for(let i=0; i<tagName.length; i++){
console.log(tagName[i])
tagName[i].style.color = 'salmon'
}
console.log('-------------')
//class
const className = document.getElementsByClassName('js')
for(let i=0; i<className.length; i++){
console.log(className[i])
className[i].style.color = 'gray'
}
console.log('-------------')
//id
const id = document.getElementById('javascript')
console.log(id)
id.style.color = 'greenyellow';
console.log('-------------')
//name
const name = document.getElementsByName('markup')
for(let i=0; i<name.length; i++){
console.log(name[i])
name[i].style.color = 'violet'
}
console.log('-------------')
//li tag 내 클래스가 backend인 요소
const qs = document.querySelectorAll('li.backend')
for(let i=0; i<qs.length; i++){
console.log(qs[i])
qs[i].style.color = 'green'
}
console.log('-------------')
</script>
</body>
</html>
✅ 문서객체모델 예제 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델2</title>
<script>
// 이 문서를 전체적으로 읽어 로드된 후 해당 함수를 실행하는 이벤트
window.onload = function(){
const gnb = document.getElementById('gnb')
console.log(gnb)
console.log(gnb.parentNode) //div
// console.log(gnb.children) // 객체 전체를 가져옴
console.log(gnb.children[0]) //ul
console.log(gnb.children[1]) // undefined(nav 태그 안 자식 ul 1개)
console.log(gnb.children[0].children[0]) //내용1
console.log(gnb.children[0].children[0].nextElementSibling) // 내용2
console.log(gnb.children[0].firstChild) // #text, 요소 노드 외 다른 것들도 포함(띄어씀)
console.log(gnb.children[0].firstElementChild) // 내용1
}
</script>
</head>
<body>
<h2>문서 객체 모델2</h2>
<div>
<nav id="gnb">
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</nav>
</div>
</body>
</html>
📍 노드 알아보기 ⬇️⬇️⬇️
[JavaScript] 노드(node)란? & 노드 종류와 관계, 노드 생성/추가/제거/복제하기!
1. 노드(node)란❓ HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장 2. 노드 종류 문서노드: 문서 전체를 나타내는 노드 요소노드: HTML 요소는 요소노드, 속성노드를 가질 수 있음 속성노드: 속
coding-yesung.tistory.com
MDN: Document
https://developer.mozilla.org/ko/docs/Web/API/Document
Document - Web API | MDN
Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. DOM 트리는 <body>와 <table> 및 여러 다른 요소를 포함합니다. Document는 페이지
developer.mozilla.org
MDN: DOM
https://developer.mozilla.org/ko/docs/Glossary/DOM
DOM - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
DOM (Document Object Model) 은 HTML 또는 XML document와 상호작용하고 표현하는 API입니다. DOM은 browser에서 로드되며, 노드 트리(각 노드는 document의 부분을 나타냅니다)로 표현하는 document 모델입니다(예, el
developer.mozilla.org
728x90
반응형
LIST
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 정규 표현식으로 특정 패턴의 문자열 생성하기! (0) | 2023.04.12 |
|---|---|
| [JavaScript] 노드(node)란? & 노드 종류와 관계, 노드 생성/추가/제거/복제하기! (0) | 2023.04.12 |
| [JavaScript] 객체 - 8️⃣ navigator 객체 & geolocation (0) | 2023.04.12 |
| [JavaScript] 객체 - 7️⃣ history 객체 & history 객체 함수 (0) | 2023.04.12 |
| [JavaScript] 객체 - 6️⃣Location 객체 & Location객체 함수 (0) | 2023.04.12 |
