사용되는 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="./main.js"></script>
</head>
<body>
<div class="parent">
<!--주석 1-->
<div id="c1" class="child">사과</div>
<div class="child">바나나</div>
<div class="child">체리</div>
<!--주석 2-->
텍스트 1 텍스트 2
</div>
</body>
</html>요소의 생성
createElement
const divEl = document.createElement('div')
divEl.textContent = 'hello World'
divEl.classList.add('box')
console.log(divEl)- HTML 요소를 메모리상에 생성하여 반환합니다
- 화면에는 적용되지 않지만, 콘솔에는 출력됩니다.
요소의 삽입
prepend, append, appendChild
const parentEl = document.querySelector('.parent')
const divEl = document.createElement('div')
divEl.textContent = 'hello World'
const inputEl = document.createElement('input')
const res1 = parentEl.prepend(divEl)
const res2 = parentEl.append(divEl,'새로운 텍스트')
const res3 = parentEl.appendChild(inputEl).placeholder = '값을 입력하세요'
console.log(res1,res2)
console.log(res3)- prepend
> 하나 이상의 노드를 요소의 첫번째 자식으로 삽입합니다.
- append
> 하나 이상의 노드를 요소의 마지막 자식으로 삽입합니다.
- appendChild
> 하나의 노드를 노드의 마지막 자식으로 삽입하고 삽입한 노드를 반환합니다.
요소의 제거
remove
const el = document.querySelector('.child')
console.log(el)
el.remove()- 요소를 제거합니다.
요소의 확인
contains
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
console.log(parentEl.contains(childEl)) // parent >= child ? true
console.log(document.body.contains(parentEl)) // body >= parent ? true
console.log(document.body.contains(childEl)) // body >= child ? true
console.log(document.body.contains(document.body)) // body >= body ? true
console.log(parentEl.contains(parentEl)) // parent >= parent ? true
console.log(parentEl.contains(document.body)) // parent >= body ? false
console.log(childEl.contains(document.body)) // child >= body ? false- 주어진 노드가 대상 노드를 포함한 후손인지를 확인합니다.
- 대상 노드를 포함하거나 후손인 경우 true, 부모노드이거나 형제노드, 관련없는 경우 false를 반환합니다.
textContent
const el = document.querySelector('.child')
// Get
console.log(el.textContent)
// Set
el.textContent = '오렌지'
console.log(el.textContent)- 노드의 모든 텍스트를 확인(Get) 및 저장(Set)합니다.
innerHTML
console.log(el.innerHTML)
el.innerHTML = '<div class="child" style="font-size: 100px">두리안</div>'
console.log(el.innerHTML)- 요소의 내부 HTML을 확인(GET)하거나 지정(SET)합니다.
dataset
const el = document.querySelector('.child')
const str = 'Hello world'
const num = 123
const obj = {a:1, b:2}
console.log(el.dataset)
el.dataset.helloWorld = str
el.dataset.number = num
el.dataset.object = JSON.stringify(obj)
console.log(el.dataset)
console.log(el.dataset.helloWorld)
console.log(el.dataset.number)
console.log(JSON.parse(el.dataset.number))
console.log(el.dataset.object)
console.log(JSON.parse(el.dataset.object))- 요소의 data- 속성을 확인하거나 저장합니다.
- javascript의 데이터를 특정한 html에 저장할 때 사용합니다.
'자바스크립트' 카테고리의 다른 글
| JavaScript DOM - 크기와 좌표 (0) | 2024.04.22 |
|---|---|
| JavaScript DOM - 생성,조회,수정 (2) (0) | 2024.04.20 |
| JavaScript DOM - 요소(Element)와 노드(Node) (0) | 2024.04.16 |
| JavaScript 표준 내장 객체 - JSON (0) | 2024.04.15 |
| JavaScript 표준 내장 객체 - Object (0) | 2024.04.15 |
