Javascript
(Javascript) Elements, Tags
JJeongHyun
2023. 1. 16. 11:49
반응형
Elements
- DOM(document)내에서는 정의된 Tag의 내용
- document.getElementById(’name’) —> name을 id선택자로 설정된 element를 가져온다.
- Tag와 element의 차이는 Tag는 태그의 이름 그 자체이고, Element는 객체다.
- HTML 파일에서 Tag(여는 태그와 닫는 태그 및 자식들 까지 모두 포함)에 사용된 내용들을 모두 포함한 것이 Element이다.
Tags
- HTML에서의 요소들의 이름을 뜻
- <html>, <head>, <div>, <p> .... 등등
- 여는 Tag와 닫는 Tage로 사용한다
<html lang="ko">
<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>Document's Elements</title>
<style>
.on {
color: skyblue;
}
.hover {
background-color: black;
}
</style>
</head>
<body>
<div id="solo">solo</div>
<div id="parent">
parent
<div id="child1" class="child">child1</div>
<div id="child2" class="child">child2</div>
<div id="child3" class="child">child3</div>
</div>
<script src="./index.js"></script>
</body>
</html>console.log(document.body.children);
console.log(document.body.childNodes);
console.log(document.getElementById("parent").childNodes);
console.log(document.getElementById("parent").parentElement);
console.log(document.getElementById("child1").parentElement);
console.log(document.getElementById("parent").firstElementChild);
console.log(document.getElementById("parent").lastElementChild);
console.log(document.getElementById("child1").nextElementSibling);
console.log(document.getElementById("child1").previousElementSibling);
console.log(document.getElementsByClassName("child"));