DOM 문서객체모델
웹브라우저에서 사용하려고 만든 언어
-> 현재는 다양한 사용처와 플랫폼을 지원함
window 호스트환경
1) DOM(Document Object Model)
웹페이지 내의 모든 콘텐츠를 객체로 나타내줌
- DOM 접근
<html> -> document.documentElement
<body> -> document.body
<head> -> document.head
document.querySelector('')
document.querySelectorAll('')
- 노드 탐색하기
childNodes - 자식노드 탐색
childeren - 자식요소노드 탐색 (선택한 요소의 자식 요소노드 접근)
firstChild - 자식노드중 첫번째 자식노드
lastChild - 자식노드중 마지막 자식노드
firstElementChild - 선택한 요소의 자식요소노드중 첫번째 요소노드 접근
lastElementChild - 선택한 요소의 자식요소노드중 마지막 요소노드 접근
nodeName - 노드의 이름을 나타냄 (text 노드는 #text / 요소노드는 태그명 / 주석노드는 #comment)
parentElement - 선택한 요소의 부모 요소노드 접근
previousElementSibling - 선택한 요소의 이전 요소노드 접근
nextElementSibling - 선택한 요소의 다음 요소노드 접근
더보기
노드
텍스트노드
요소노드
주석노드
elem.nodeType
- 선택한 요소의 내용 조작
innerHTML = '<h1>안녕하세요</h1>'
textContent = '<h1>안녕하세요</h1>'
- 요소 생성하기
① 요소노드 생성하기
document.createElement(tag)
② 텍스트노드 생성하기
document.createTextNode('안녕하세요')
- 요소 추가하기
① node.append - 노드나 문자열을 node 끝에 추가합니다.
② node.prepend - 노드나 문자열을 node 맨 앞에 추가합니다.
③ node.before - 노드나 문자열을 ndoe 이전에 추가합니다.
④ node.after - 노드나 문자열을 node 다음에 추가합니다.
⑤ node.insertAdjacentHTML(where, html) 원하는 위치에 html을 추가합니다.
'beforebegin' node의 바로 앞에 html을 추가
'afterbegin' node의 첫번째 자식요소 앞에 html을 추가
'beforeend' node의 마지막 자식요소 다음에 html을 추가
'afterend' node의 바로 다음에 html을 추가
- 이전 요소 추가하기 메소드
node.appendChild(추가할 요소) 마지막 자식으로 추가
node.insertBefore(추가할 요소, nextSibling)
- 요소 복제하기
elem.cloneNode(true)
- 요소 삭제하기
elem.remove()
childNodes.html
<!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>Document</title>
</head>
<body>
<div id="header">상단</div>
<div>본문
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
<p>
<input type="text" id="input">
<button onclick="inputCheck()">확인</button>
</p>
</div>
<div>하단</div>
<script>
// document.body
for(let i = 0; i< document.body.childNodes.length; i++) {
console.log(document.body.childNodes[i]);
}
console.log(document.body.children);
console.log(document.body.childNodes);
console.log(document.body.firstChild);
console.log(document.body.firstElementChild);
console.log(document.body.lastChild);
console.log(document.body.lastElementChild);
console.log(document.body.firstElementChild.nodeType);
console.log(document.body.firstChild.nodeName);
console.log(document.body.firstElementChild.nodeName);
console.log(document.body.childNodes[1].nodeName);
let lis = document.querySelectorAll('li');
let list2= document.getElementsByTagName('li');
console.log(lis);
console.log(list2);
document.querySelector('#header').innerHTML = '<h1>안녕하세요</h1>';
document.querySelector('#header').textContent = '<h1>안녕하세요</h1>';
// header.innerHTML = '안녕하세요'; // 이 형태는 잘 안씀
header.hidden = true;
function inputCheck(){
console.log(document.querySelector('input').value);
}
</script>
</body>
</html>
createElement.html
<!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>Document</title>
</head>
<body>
<div id="wrap"></div>
<ol id="ol">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<div id="insert">
insert DIV입니다.
</div>
<script>
// let nDiv = document.createElement('div');
// nDiv.innerHTML = '<h1>안녕하세요</h1>';
// wrap.append(nDiv);
wrap.innerHTML = '<div><h1>안녕하세요요요</h1></div>';
let nP = document.createElement('p');
let nLi1 = document.createElement('li');
let nLi2 = document.createElement('li');
nP.innerHTML = '이전이전이전';
nLi1.innerHTML = '추가한 li1';
nLi2.innerHTML = '추가한 li2';
ol.before(nP);
ol.after('이후');
// ol.append('마지막에 추가');
ol.append(nLi1);
// ol.prepend('처음에 추가');
ol.prepend(nLi2);
insert.insertAdjacentHTML('beforebegin','<p>beforebegin입니다.</p>');
insert.insertAdjacentHTML('afterbegin','<h2>afterbegin입니다.</h2>');
insert.insertAdjacentHTML('beforeend','<h3>beforeend입니다.</h3>');
insert.insertAdjacentHTML('afterend','<p>afterend입니다.</p>');
</script>
</body>
</html>
clonenode.html
<!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>Document</title>
</head>
<body>
<div id="samplediv">
<h2>안녕하세요 금요일입니다.</h2>
</div>
<script>
let div2 = document.querySelector('#samplediv').cloneNode(true);
div2.querySelector('h2').innerHTML = '안녕히가세요';
// document.querySelector('#samplediv').after(div2);
document.querySelector('#samplediv').insertAdjacentElement('beforeend',div2);
</script>
</body>
</html>
removeNode.html
<!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>Document</title>
</head>
<body>
<script>
let nDiv = document.createElement('div');
nDiv.innerHTML = '<strong>안녕하세요</strong>중요메시지를 확인하셨습니다.'
document.body.append(nDiv);
// setTimeout(함수, 시간)
setTimeout(() => nDiv.remove() ,3000)
</script>
</body>
</html>
todolist.html
<!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>Document</title>
<style>
* {padding:0; margin:0; box-sizing: border-box;}
#wrap {
width: 50%;
margin: 0 auto;
}
#top {
background: linear-gradient(to right, coral, royalblue);
width: 100%;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#top h1 {
color: #fff;
}
#content {
display: flex;
justify-content: center;
align-items: center;
}
#input_list {
width: 65%;
height: 40px;
border-radius: 25px;
border: none;
margin-top: 5px;
margin-right: 15px;
outline: none;
padding-left: 30px;
}
#add_list {
background: #fff;
width: 30px;
height: 30px;
line-height: 22px;
font-weight: bolder;
font-size: 40px;
border-radius: 25px;
margin-top: 5px;
color: royalblue;
cursor: pointer;
}
li {
list-style: none;
padding: 15px 60px;
background-color: #ddd;
font-size: 18px;
display: flex;
justify-content: space-between;
}
span {
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<h1>To do list</h1>
<div id="content">
<input type="text" id="input_list">
<div id="add_list" onclick="add_list()">+</div>
</div>
</div>
<div id="bottom">
<ul>
</ul>
</div>
</div>
<script>
function add_list() {
let li_content = document.querySelector('#input_list').value;
let ul_content = document.querySelector('ul');
let nli = document.createElement('li');
let nspan = document.createElement('span');
ul_content.append(nli);
nli.innerHTML=li_content;
nli.append(nspan);
nspan.innerHTML='X';
nspan.addEventListener('click', function() {
nli.remove();
})
}
</script>
</body>
</html>
todolist_t.html
<!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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Document</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
#wrap {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
#todoheader {
color: #fff;
padding: 30px 0;
text-align: center;
/* linear-grdient(방향, 색상1, 색상2, 색상3, ...) */
background-image: linear-gradient(-20deg, #dcb0ed 0%, #99c99c 100%);
height: 150px;
}
#todoheader input {
border: none;
width: 60%;
height: 40px;
border-radius: 20px;
background-color: #fff;
padding-left: 30px;
outline: none;
}
#todoheader button {
border: none;
/* outline: none; */
font-size: 40px;
background: transparent; /* transparent: 투명 */
}
#todoheader button i {
font-size: 40px;
color: #fff;
}
#insertBtn {
height: 40px;
vertical-align: middle;
}
#listUl li {
background: #eee;
line-height: 40px;
padding-left: 20%;
padding-right: 20%;
position: relative;
}
#listUl li span {
float: right;
}
#listUl li.check {
text-decoration: line-through;
background: #ddd;
}
#listUl li.check::before {
content: "";
display: block;
width: 30px;
height: 15px;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
transform: rotate(320deg);
position: absolute;
left: 16%;
top: 5px;
}
</style>
<script defer src="todoScript.js"></script>
</head>
<body>
<div id="wrap">
<div id="todoheader">
<h1>to do list</h1>
<div>
<input type="text" id="todoInput">
<button id="insertBtn"><i class="material-icons">add_circle</i></button>
</div>
</div>
<div id="todolist">
<ul id="listUl"></ul>
</div>
</div>
</body>
</html>
todoScript.js
// 변수 선언 btn input ul
let btn = document.querySelector('#insertBtn');
let input = document.querySelector('#todoInput');
let ul = document.querySelector('#listUl');
btn.addEventListener('click', addList)
// btn 클릭시 실행되는 함수
// input의 value가 있는 지 확인, 없으면 return, 있으면 그 값을
// li에 넣어주고 li를 ul에 추가
function addList() {
if(!input.value) return;
let li = document.createElement('li');
li.innerHTML=`${input.value}<span>X</span>`
ul.append(li);
input.value = '';
removeEvent();
}
// x를 클릭했을 때 실행되는 함수
// 클릭한 x의 부모요소를 삭제하기
function removeEvent(){
let spans = document.querySelectorAll('#listUl span')
spans.forEach(span => span.addEventListener('click', function(){
this.parentElement.remove();
}))
}
// ul을 클릭하면 클릭한 대상이 li면 check 클래스를 지정
// check 클래스가 있으면 제거
ul.addEventListener('click', function(e){
console.log(e);
if(e.target.nodeName === 'LI') e.target.classList.toggle('check');
})
leftmenu_t.html
<!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>Document</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
li { list-style: none; }
@keyframes fadeIn {
0%{ opacity: 0.4; }
100%{ opacity: 1; }
}
#header {
background-color: pink;
text-align: center;
color: #fff;
position: relative;
height: 60px;
}
#header #toggle {
position: absolute;
width: 60px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
left: 0;
}
#header #toggle span {
width: 60%;
height: 4px;
background-color: #fff;
margin: 4px 0;
}
#blackbg {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
display: none;
animation: fadeIn 1s;
}
#blackbg.on {
display: block;
}
#leftMenu {
position: absolute;
width: 260px;
height: 100vh;
background-color: #fff;
top: 0;
left: -260px;
transition: 0.5s;
}
#leftMenu.on {
left: 0;
}
#leftMenu > div {
height: 60px;
border-bottom: 1px solid #ccc;
}
#leftMenu > div span{
float: right;
display: block;
width: 80px;
height: 100%;
background-color: tomato;
color: #fff;
text-align: center;
line-height: 60px;
}
#leftMenu > ul > li {
border-bottom: 1px solid #ccc;
line-height: 40px;
height: 40px;
overflow: hidden;
transition: 0.5s;
}
#leftMenu > ul > li.on {
height: 165px;
}
#leftMenu > ul > li li {
line-height: 30px;
padding-left: 20px;
border-top: 1px solid #ccc;
background-color: #eee;
}
</style>
</head>
<body>
<div id="header">
<div id="toggle">
<span></span><span></span><span></span>
</div>
<h1>Logo</h1>
</div>
<div id="blackbg"></div>
<div id="leftMenu">
<div>
<span id="menuClose">메뉴닫기</span>
</div>
<ul>
<li>
<a href="#">회사소개</a>
<!-- ul>(li>a{서브메뉴$})*4 -->
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">투자정보</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">홍보센터</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">인재채용</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">교육신청</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
</ul>
</div>
<script>
let toggleBtn = document.querySelector('#toggle');
let leftClose = document.querySelector('#menuClose');
let lis = document.querySelectorAll('#leftMenu > ul > li');
toggleBtn.addEventListener('click', function() {
// #black에 on클래스 붙이기
// #leftMenu에 on클래스 붙이기
document.querySelector('#blackbg').classList.add('on');
document.querySelector('#leftMenu').classList.add('on');
})
leftClose.addEventListener('click', function(){
// #black에 on클래스 제거
// #leftMenu에 on클래스 제거
document.querySelector('#blackbg').classList.remove('on');
document.querySelector('#leftMenu').classList.remove('on');
})
console.log(lis);
lis.forEach((li, index) => {
li.addEventListener('click', function(){
li.classList.toggle('on');
lis.forEach((li, index2) => {
if(index != index2) {
li.classList.remove('on');
}
})
})
})
</script>
</body>
</html>
li_append_ex.html
<!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>Document</title>
</head>
<body>
<h1>Create a list</h1>
<ul>
</ul>
<script>
do {
input= prompt('내용을 입력하세요');
let _ul = document.querySelector('ul');
let nli = document.createElement('li');
nli.innerHTML = input;
_ul.append(nli);
} while (input != null)
let _ul = document.querySelector('ul');
let lli = _ul.lastElementChild;
lli.remove();
</script>
</body>
</html>
li_append_t_ex.html
<!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>Document</title>
</head>
<body>
<h1>Create a list</h1>
<script>
let ul = document.createElement('ul');
document.body.append(ul);
while(true) {
let data = prompt('리스트 내용을 입력하세요'); // 내용 입력
console.log(data);
if(!data) {
break;
}
let li = document.createElement('li'); // li 만들기
li.innerHTML=data; // li 내용에 data 넣기
ul.append(li) // ul에 마지막 자식요소로 li 추가하기
}
</script>
</body>
</html>
li_append_ex2.html
<!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>Document</title>
</head>
<body>
<ul id="ul">
<li id="one">1</li>
<li id="two">4</li>
</ul>
<script>
one.insertAdjacentHTML('afterend','<li>2</li>');
two.insertAdjacentHTML('beforebegin','<li>3</li>')
</script>
</body>
</html>
li_append_t_ex2.html
<!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>Document</title>
</head>
<body>
<ul id="ul">
<li id="one">1</li>
<li id="two">4</li>
</ul>
<script>
let lione = document.querySelector('#one');
lione.insertAdjacentHTML('afterend','<li>3</li><li>4</li>');
</script>
</body>
</html>
더보기
2) BOM(Browser Object Model)
문서 이외에 다른 것을 제어하기 위해 브라우저가 제공하는 추가 객체를 나타내줌
3) Javascript
'Stack > JavaScript' 카테고리의 다른 글
| [JS] Scroll (2) | 2022.05.16 |
|---|---|
| [JS] 타자게임 (0) | 2022.05.16 |
| [JS] String Method (0) | 2022.05.12 |
| [JS] 함수 2 (0) | 2022.05.12 |
| [JS] this / 동기 비동기 (0) | 2022.05.10 |