JS_문법 (8)_DOM CRUD 파헤치기 Kassid

728x90

Create Read Update Delete

HTML 찾기

- doucument.getElementById(id명) : id로 찾기

- doucument.getElementsByTagName(태그명) : 태그로 찾기(배열로 반환)

- doucument.getElementsByClassName(클래스명) : 클래스로 찾기(배열로 반환)

- document.querySelector(css 선택자) : css 선택자로 찾기(최초등장 하나만 반환)

- document.querySelectorAll(css 선택자) : css 선택자로 찾기(모든 요소. 배열 형태의 객체(유사배열)로 반환)

(인수로 css 선택자를 전달한다. ' . '(class), ' # '(id), ' * '(all), (tag는 prefix붙이지 않음) 등의 조합)

예시

id명으로 가져오기

console.log(document.getElementById('root'))

>>>
<div id='root'>...</div>

클래스명으로 가져오기 (배열)

console.log(document.getElementsByClassName('el')) //Element's'이면 배열로 반환

>>>
HTMLCollection(17) [div.el, div.el, div.el,
div.el, div.el, div.el, div.el, div.el, div.el,
div.el, div.el, div.el.e_el__dashboard, div.el.e_el__courses,
div.el.e_el__home, div.el.e_el__roadmaps, div.el.e_el__more,
span.el.cart_modal_btn.e_cart_modal_btn.nav-modal-btn]
// 17개 item 가진 배열이라는 뜻

CSS 선택자로 가져오기

console.log(document.querySelectorAll('a.nav'))

>>> //NodeList 라는 객체 반환
NodeList(16) [a.nav, a.nav, a.nav, a.nav,
a.nav.shop, a.nav.shoplive, a.nav, a.nav,
a.nav, a.nav, a.nav, a.nav, a.nav, a.nav, a.nav, a.nav]

HTML 요소 확인 & 수정

선택자를 이용해 가져온 요소 접근

- 요소.innerText : 요소 확인 (내용만)

- 요소.innerHTML : 태그까지 포함

- 요소.attribute : 요소 속성 값

- 요소.style.property : 요소의 CSS 프로퍼티 값

예시

innerText

내용을 반환한다.

element = document.querySelectorAll('li.nav_item')

for (let i=0; i<element.length; i++){
    console.log(element[i].innerText)
}


>>>
메일
카페
블로그
지식iN
쇼핑
쇼핑LIVE
Pay
TV
사전
뉴스
증권
부동산
지도
VIBE
책
웹툰

innerHTML

태그를 반환한다.

element = document.querySelectorAll('li.nav_item')

for (let i=0; i<element.length; i++){
    console.log(element[i].innerHTML)
}

>>>
<a href="https://mail.naver.com/" class="nav" data-clk="svc.mail"><i class="ico_mail"></i>메일</a>

<a href="https://section.cafe.naver.com/" class="nav" data-clk="svc.cafe">카페</a>
<a href="https://section.blog.naver.com/" class="nav" data-clk="svc.blog">블로그</a>
<a href="https://kin.naver.com/" class="nav" data-clk="svc.kin">지식iN</a>
<a href="https://shopping.naver.com/" class="nav shop" data-clk="svc.shopping"><span class="blind">쇼핑</span></a>
<a href="https://shoppinglive.naver.com/home" class="nav shoplive" data-clk="svc.shoppinglive"><span class="blind">쇼핑LIVE</span></a>
<a href="https://order.pay.naver.com/home" class="nav" data-clk="svc.pay">Pay</a>
<a href="https://tv.naver.com/" class="nav" data-clk="svc.tvcast"><i class="ico_tv"></i>TV</a>

<a href="https://dict.naver.com/" class="nav" data-clk="svc.dic">사전</a>
<a href="https://news.naver.com/" class="nav" data-clk="svc.news">뉴스</a>
<a href="https://finance.naver.com/" class="nav" data-clk="svc.stock">증권</a>
<a href="https://land.naver.com/" class="nav" data-clk="svc.land">부동산</a>
<a href="https://map.naver.com/" class="nav" data-clk="svc.map">지도</a>
<a href="https://vibe.naver.com/" class="nav" data-clk="svc.vibe">VIBE</a>
<a href="https://book.naver.com/" class="nav" data-clk="svc.book">책</a>
<a href="https://comic.naver.com/" class="nav" data-clk="svc.webtoon">웹툰</a>

이번에는 새로운 요소를 추가해보자

HTML 요소 생성/추가

document.createElement(태그명) : HTML 요소 생성

document.appendChild(요소) : 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>
        .box1 {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        const newBox1 = document.createElement("div") //div 요소 생성
        newBox1.innerText = "Hello" //문구 추가
        newBox1.setAttribute("class","box1") //box1이라는 이름으로 클래스 설정
        newBox1.style.background = "blueviolet" //background프로퍼티 적용
        document.body.appendChild(newBox1) //요소 추가
    </script>
</body>
</html>

HTML 요소 삭제/대체

document.removeChild(요소) : HTML 요소 삭제

document.replaceChile( 새로운 것, 기존의 것 ) : 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>
        .box1 {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            line-height: 100px;
            text-align: center;
        }
        .box2 {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        const newBox1 = document.createElement("div");
        newBox1.innerText = "Hello";
        newBox1.setAttribute("class","box1");
        newBox1.style.background = "blueviolet";
        
        const newBox2 = document.createElement("div");
        newBox2.innerText = "World";
        newBox2.setAttribute("class","box2");
        newBox2.style.background = "blueviolet";
        
        document.body.appendChild(newBox1);
        document.body.replaceChild(newBox2, newBox1); // 대체하기
    </script>
</body>
</html>

HTML 요소 탐색

element.parentNode : 부모요소

element.nextElementSibling : 현재 요소의 다음 형제 요소

element.previousElementSibling : 현재 요소의 이전 형제 요소

element.children : 자식 요소들(배열로 반환)

저작자표시

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

JS_문법 (10)_대화창 (0)	2022.07.26
JS_문법 (9)_이벤트 (0)	2022.02.24
JS_문법 (7)_DOM / BOM (0)	2022.02.23
JS_문법 (6)_promise 메서드(catch, finally, all, race 등 ) (0)	2022.02.20
JS_문법 (5)_동기/비동기 처리 (0)	2022.02.18

JS_문법 (8)_DOM CRUD 파헤치기

HTML 찾기

예시

HTML 요소 확인 & 수정

예시

HTML 요소 생성/추가

예시

HTML 요소 삭제/대체

예시

HTML 요소 탐색

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

댓글

티스토리툴바

JS_문법 (8)_DOM CRUD 파헤치기

HTML 찾기

예시

HTML 요소 확인 & 수정

예시

HTML 요소 생성/추가

예시

HTML 요소 삭제/대체

예시

HTML 요소 탐색

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바