안톨리니의 일상

티스토리 뷰

HTTP, JS

[WEB] DOM(Document Object Model)

안톨리니 2022. 8. 9. 19:04

Reference

모던 자바스크립트 Deep Dive
W3Schools
나무위키
mdn web docs_

웹사이트의 화면에 보이는 모든 요소들은

객체로 이루어져 있습니다.

객체는 하나의 퍼즐 조각이라고 할 수 있으며

여러 객체들이 모여 최종적으로 우리에게 보이는 아름다운 화면을 만들어 냅니다.

브라우저의 렌더링 엔진을 거치기 전 우리에게 보이는 화면은

복잡한 HTML코드로 이루어져 있습니다.

<!DOCTYPE html>


    <html class="html__responsive " lang="en">

    <head>

        <title>Newest Questions - Stack Overflow</title>
        <link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196">
        <link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a">
        <link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"> 
        <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
        <meta property="og:type" content= "website" />
        <meta property="og:url" content="https://stackoverflow.com/questions"/>
        <meta property="og:site_name" content="Stack Overflow" />
        <meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded" />
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:domain" content="stackoverflow.com"/>
        <meta name="twitter:title" property="og:title" itemprop="name" content="Newest Questions" />
        <meta name="twitter:description" property="og:description" itemprop="description" content="Stack Overflow | The World&#x2019;s Largest Online Community for Developers" />
    <script id="webpack-public-path" type="text/uri-list">https://cdn.sstatic.net/</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script async src="https://cdn.sstatic.net/Js/third-party/npm/@stackoverflow/stacks/dist/js/stacks.min.js?v=6cc27826a5fd"></script>
    <script src="https://cdn.sstatic.net/Js/stub.en.js?v=e6d116cd69f1"></script>


    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=3bbf3c79def9">
    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=82b6630996ff">
    .....
    .....
    .....

브라우저는 이러한 코드를 위에서부터 아래로 파싱 하여

코드에 있는 태그, 어트리뷰트, 텍스트 등등을

하나의 노드(객체)로 분리하기 시작합니다.

태그들은 요소 노드, 속성 값은 어트리뷰트 노드, 내용(텍스트)은 텍스트 노드로

하나하나의 객체로 만들어지며 HTML은 중첩 관계로 이루어져 있기 때문에

자연적으로 상속관계가 형성됩니다.

한 가지 간단한 예시를 들자면

<body>시작 태그와 닫는 </body>태그(부모) 사이에는

<table>, <td>, <tr>.. 등등 여러 요소 태그들(자식)이 있고

각각의 요소 태그마다 속성 값을 가지거나 텍스트 값을 가진 요소 태그들이 있습니다.

해당 값들이 요소든 텍스트든 상관없이

DOM Tree를 보면 알 수 있듯이 각각 하나의 독립적인 객체처럼 박스에 담겨있습니다.

박스를 노드라고 하고

해당 박스에 담긴 값이 태그, 어트리뷰트, 텍스트 등등

타입에 따라 요소 노드, 어트리뷰트 노드, 텍스트 노드로 불립니다.

(이 외에도 더 많은 타입이 있습니다.)

그리고 각 요소 노드에게 어트리뷰트와 텍스트가 있다면

해당 요소 노드가 직접적으로 소유하고 있는 오직 하나의 선으로 연결된 형태로 표현(자식)되고

계층구조인 HTML문서를 통해 Tree자료 구조로 상속관계를 표현합니다.

필자는 위에서 노드들은 전부 다 객체라고 설명했습니다.

그렇다면 당연히 각각 노드들에겐 타입이 존재할 것이고

그 타입에 해당하는 속성들을 가지고 있을 것이라고 유추할 수 있습니다.

실제로 노드들은 브라우저 환경에서 제공하는 호스트 객체이고

결국은 자바스크립트 객체이기 때문에 프로토타입에 의한 상속 구조를 갖습니다.

모든 노드들은 Object, EventTarget, Node를 상속받으며

어트리뷰트 노드 같은 경우는 Attr, 텍스트 노드는 CharacterData,

요소 노드의 경우에는 요소 노드가 어떤 태그인지에 따라 다양한 프로토타입을 갖게 됩니다.

그렇기 때문에 각 노드들마다 동일하게 상속받은 프로토타입으로부터(Object, EventTarget, Node)얻은 공통 속성, 메서드

그리고 각 개별적인 프로토타입(Text, HTMLDocument, HTMLMetaElement...)으로 얻는

고유한 속성과 메서드를 통해 각 요소 노드에 타입에 따라 디테일하게 세분화된 구조가 됩니다.

간단하게 말하면 노드로써 행동할 수 있는 공통적인 부분들은

(※ 다른 노드들을 탐색하는 기능이라던지 노드의 정보를 알 수 있는 기능 등등)

차별적으로 주어져서는 안되며

모든 노드들이 당연히 노드이기 때문에 가져야 하는 특성들입니다.

하지만 반대로 각 노드들의 종류에 따라 세부적으로 따지면 타입에 따라 고유하게 가져야하는 특성들이 있습니다.

그런 부분들을 상속을 통해 공통된 기능들은 프로토타입 체인의 상위에 그리고

개별적인 고유한 기능들은 각 프로토타입 최하위에 구현하여

해당 객체가 프로토타입 체인을 통해 사용 가능하게 하는 구조입니다.

이렇게 DOM이 제공하는 프로퍼티와 메서드들은 DOM API라고 할 수 있습니다.

DOM API를 통해 결국은 자바스크립트 코드로 노드들에 접근해

해당 노드가 가진 속성을 바꾸는 등의 동작으로

기존에 있던 노드를 수정하거나 추가/삭제하여 웹페이지를 동적으로 조작할 수 있게 만듭니다.

그렇다면 기존에 있던 노드를 수정하는 등의 동작을 하려면

당연하게도 가장 먼저 해당 노드에 접근을 해야 합니다.

노드에 접근하는 방법에 대해 알아봅시다.

노드에 접근하기

문서 노드인 document의 다양한 메서드들을 통해 특정 노드에 접근할 수 있습니다.

먼저 태그의 어트리뷰트 id값을 통해 노드를 취득하는

getElementById입니다.

See the Pen getElementById by Antoliny0919 (@antoliny0919) on CodePen.

위 예제에서 볼 수 있듯이

document.getElementById함수의 인자로 특정 태그의 id어트리뷰트 값('chicken')을 전달했고

해당 노드의 스타일 속성의 색상을 오렌지로 변경하니

해당 노드의 텍스트 문서만 오렌지색이 된 걸 확인할 수 있습니다.

참고로 HTML에서 id어트리뷰트는 유일한 값이지만

그저 약속일뿐이기에

의도적으로 id어트리뷰트의 값이 같은 여러 개의 노드들이 존재할 수 있습니다.

그럴 때 getElementById함수를 사용해서 접근하면

해당 값을 가진 가장 상단에 있는 노드가 선택됩니다.

See the Pen getElementByIdPrecedence by Antoliny0919 (@antoliny0919) on CodePen.

다음으로 노드를 취득할 수 있는 메서드는

getElementsByClassName입니다.

메서드명 그대로 노드의 class 어트리뷰트를 통해 해당 노드들을 취득합니다.

하지만 id어트리뷰트와는 반대로 class어트리뷰트는 HTML에서

여러 태그들이 동일한 값을 가질 수 있게 약속되어있습니다.

그렇기 때문에 메서드 명에서도 유추할 수 있듯이(Elements)

해당 속성을 가진 여러 노드를 가져오기 때문에 유사배열인 HTMLCollection에 노드들이 담겨서 반환됩니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

forEach문으로 HTMLCollection배열에 있는 값들을 순회하여 innerHTML속성을 출력해보니

"치킨"

"피자"

"햄버거"

가 console창에 출력되었습니다.

(HTMLCollection은 이터러블한 객체)

이렇게 getElementsByClassName메서드를 통하면 해당 클래스 어트리뷰트 값을 가진

여러 노드를 HTMLCollection에 담은 상태로 반환합니다.

(★ 만약 해당 클래스 어트리뷰트를 가진 노드가 없다면 빈 HTMLCollection배열을 반환합니다. ★)

다음은 CSS선택자를 통한 요소 노드 취득에 대해 알아봅시다.

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

CSS선택자는 HTML 태그에 스타일을 적용하고자 할 때 CSS파일에 사용하는 문법입니다.

위 W3Schools의 다양한 예시를 보시면 이해하기 더 쉬울 거라고 생각합니다.

CSS선택자를 통한 요소 노드 취득 메서드는 querySelector, querySelectorAll이 있습니다.

사용하는 방법은 간단합니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

document.querySelector는 인수로 CSS선택자를 받습니다.

위 예제에는 두 요소 노드(li)의 클래스 어트리뷰트가 chicken으로 같습니다.

이럴 땐 querySelector로 둘 다 취득할 거 같지만

querySelector는 하나의 노드만 취득합니다.

그렇기 때문에 첫 번째 요소 노드만 css스타일이 변경되었습니다.

이렇게 조건을 만족시키는 여러 노드를 취득할 때는 querySelectorAll 메서드를 사용해야 합니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

querySelectorAll은 위에서 봤던 HTMLCollection과 같이

유사배열이자 이터러블인 형인 NodeList에 값을 담아 반환합니다.

필자는 해당 유사배열을 배열로 형변환한뒤 각 요소를 반복하면서

style을 바꿔줬고 색상이 잘 바뀐 걸 확인할 수 있습니다.

그렇다면 querySelectorAll과 getElementsByClassName메서드는 별 차이가 없어 보입니다.

단지 반환 값으로 HTMLCollection이냐 NodeList이냐의 차이인데

위 예제에서 봤을 땐 필자가 각 유사배열을 배열로 변환했기 때문에 차이가 없는 것처럼 보였지만

변환하지 않고 그대로 사용한다면 큰 차이점이 존재합니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

class 어트리뷰트가 food인 노드들은 HTMLCollection에 담겨있고

class 어트리뷰트가 movie인 노드들은 NodeList에 담겨있습니다.

두 유사배열에게 반복문을 사용하여

각 노드들의 className을 변경해보았습니다.

NodeList에 담긴 movie 노드들은 전부 다 fruit로 변경되었지만

HTMLCollection에 담겨있는 food노드들은 두 개만 변경되었지 하나는 변경되지 않았습니다.

이런 일이 발생한 이유는

HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 체크해 해당 유사배열에서 제거해버립니다.

그렇기 때문에 $foods[0]일 때 성공적으로 변경하고 해당 노드를 배열에서 제거해버리기 때문에

다음 반복인 $foods[1]을 실행할 때

원래 배열에 세 개의 값이 담겼다면 두 개의 값이 담긴 상태가 되어있어서

두 번째 노드는 건너뛰고 세 번째 노드의 값이 변경되는 동작을 실행합니다.

반대로 NodeList는 모든 노드들의 클래스 값이 변경되었습니다.

이렇게 담겨있는 노드에 대한 변경에

HTMLCollection은 동적으로 처리하고 NodeList는 정적으로 처리하기 때문에 이런 일이 발생한 것입니다.

그렇다고 NodeList가 HTMLCollection에 비해 특성에 의한 예외가 없다는 건 아닙니다.

더 자세한 내용이 궁금하신 분들은 아래 W3Schools내용을 참고하시기 바랍니다.

https://www.w3schools.com/js/js_htmldom_nodelist.asp

JavaScript DOM Nodelist

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

노드 탐색하기

DOM API는 해당 노드를 취득한 뒤

해당 노드에 부모 노드나 자식 노드, 형제 노드에 접근할 수 있는

속성을 제공합니다.

먼저 자식 노드에 접근하는 방법에 대해 알아봅시다.

firstChild	Returns the first child node of an element
firstElementChild	Returns the first child element of an element
lastChild	Returns the last child node of an element
lastElementChild	Returns the last child element of an element
childNodes	Returns a NodeList of an element's child nodes
children	Returns an HTMLCollection of an element's child elements

-W3Schools-

첫 번째 자식, 마지막 자식

자식들에 접근하는 속성들이 2개씩 있습니다.

각 속성의 차이는 자식 노드 중 요소 노드에만 접근할 것인가?
아니면 요소 노드, 텍스트 노드 상관없이 접근할 것인가의 차이입니다.

잠깐 텍스트 노드에 대해 설명하자면

HTML에서 우리는 가독성을 위해 태그 사이사이에 엔터, 스페이스.. 등등 키를 입력하게 되는데

사실 이런 키 또한 텍스트 문자로 잡혀 해당 노드 자식에

빈 공백 텍스트 노드가 생기게 됩니다.

(주석 또한 주석 노드로 자식노드에 추가됩니다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>explore childnode</title>
</head>
<body>
    <ul id="favorite-food" style="color: green">
        <li class="food">치킨</li>
        <li class="food">햄버거</li>
        <li class="food">피자</li>
    </ul>
    <script>
        const $foods = document.querySelector('#favorite-food');
        console.log($foods.childNodes);
        
    </script>
</body>
</html>

ul태그를 취득하고 childNodes메서드를 통해 해당 노드의 자식들을 콘솔에 출력해보니

NodeList객체가 반환되어 있고 필자의 예상에는 li노드 세 개가 있을 거라 생각했지만

li노드외에도 text라는 노드가 4개나 더 있는 걸 확인할 수 있습니다.

<ul id="favorite-food" style="color: green"><li class="food">치킨</li><li class="food">햄버거</li><li class="food">피자</li></ul>

물론 이렇게 HTML코드를 짠다면 text노드를 피할 수 있지만

괜히 가독성만 더 떨어져서 코드를 읽기 힘든 상태가 됩니다.

자식노드중 text노드에는 접근하고 싶지 않다면 위에서 봤던 대로

firstElementChild	Returns the first child element of an element
lastElementChild	Returns the last child element of an element
children	Returns an HTMLCollection of an element's child elements

이 세 개의 속성에 접근하고

만약 text노드에 접근해도 괜찮다면

firstChild	Returns the first child node of an element
lastChild	Returns the last child node of an element
childNodes	Returns an HTMLCollection of an element's child elements

firstChild, lastChild, childNodes속성을 사용하면 됩니다.

참고로 childNodes와 children은 유사배열을 반환합니다.

그렇기 때문에 인덱싱을 통하여 자식 노드 전부에 하나하나씩 접근 가능합니다.

인덱싱을 통하여 탐색해도 괜찮지만

해당 자식 노드의 이전 형제, 다음 형제 속성을 통해서도 원하는 노드를 취득할 수 있습니다.

previousSibling	Returns the previous node at the same node tree level
previousElementSibling	Returns the previous element at the same node tree level
nextSibling	Returns the next node at the same node tree level
nextElementSibling	Returns the next element at the same node tree level

-W3Schools-

위 속성들도 자식속성에서 봤던 것과 비슷합니다.

요소 노드만 탐색하는 속성 하나

그리고 요소 노드뿐만 아니라 텍스트 노드도 탐색하는 속성 하나

이렇게 두 개의 속성으로 구성되어 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>explore siblingNode</title>
</head>
<body>
    <ul id="favorite-food" style="color: green">
        <li class="food">치킨</li>
        <li class="food">햄버거</li>
        <li class="food">피자</li>
    </ul>
    <script>
        const $foods = document.querySelector('#favorite-food').childNodes
        console.log($foods);
        // $foods --> NodeList
        // [0]: text
        // [1]: li.food
        // [2]: text
        // [3]: li.food
        // [4]: text
        // [5]: li.food
        // [6]: text
        // [7]: li.food
        console.log($foods[1].previousSibling);
        // #text
        console.log($foods[1].previousElementSibling);
        // null
        console.log($foods[1].nextSibling);
        // #text
        console.log($foods[1].nextElementSibling);
        // li.food
    </script>
</body>
</html>

위 예제를 보면 알 수 있듯이

previousSibling, nextSibling은 텍스트 노드도 탐색하고

previousElementSibling, nextElementSibling은 요소 노드만 탐색합니다.

마지막으로 부모 노드 속성에 접근하는 방법입니다.

parentNode	Returns the parent node of an element
parentElement	Returns the parent element node of an element

부모 노드를 탐색하는 경우는

해당 노드 트리에서 가장 상단에 있는 노드를 탐색하기 때문에

텍스트 노드는 당연히 탐색하지 않습니다.

그렇기 때문에 사실상 parentNode와 parentElement는 동작이 같아 보이지만

parentElement는 부모 요소가 없다면 null을 반환하는 등

약간의 차이가 있다고 합니다.

노드 객체는 속성으로 해당 노드의 부모 노드, 자식 노드, 형제 노드에 대해 탐색할 수 있고

접근할 수 있습니다.

개발자 도구를 통해 해당 객체 노드의 속성을 확인하면 더 이해하기 쉽습니다.

노드 객체가 가진 여러 가지 속성에 대해 더 궁금하다면 이 사이트를 참고하기 바랍니다.

https://www.w3schools.com/jsref/dom_obj_all.asp

HTML DOM Element Object

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

노드 수정, 추가

마지막으로 노드를 수정하고 추가하는 방법에 대해 알아봅시다.

textContent	Sets or returns the textual content of a node and its descendants
innerHTML	Sets or returns the content of an element
outerHTML	Sets or returns the content of an element (including the start tag and the end tag)

먼저 노드의 텍스트 노드를 수정하고 싶다면

textContent속성에 접근하여 값을 바꾸기만 하면 됩니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

원래는 햄버거였던 텍스트가 초밥으로 잘 바뀐 걸 확인할 수 있습니다.

만약 자식 요소 노드를 추가하고 싶다면

따로 노드를 생성해서 추가하는 방법도 있지만(이건 뒤에서 설명하겠습니다.)

innerHTML속성을 통해 HTML코드를 문자열로 할당하면

렌더링 엔진에 의하여 다시 파싱 되어 요소 노드의 자식으로 반영됩니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

innerHTML은 덮어쓰는 성격이기 때문에

꼭 추가하고 싶다면 할당 대입 연산자를 사용해야 합니다.

참고로 outerHTML이라는 속성도 있는데

<body>
    <ul id="favorite-food" style="color: green">
        <li class="chicken">치킨</li>
        <li class="hamburger">햄버거</li>
        <li class="pizza">피자</li>
    </ul>
    <script>
        const $food = document.querySelector('#favorite-food');
        console.log($food.innerHTML);
        console.log($food.outerHTML);
        
    </script>
</body>
</html>

outerHTML 같은 경우는 노드 전체가 선택이 됩니다.

그렇기 때문에 outerHTML을 수정하게 되면

해당 노드 전체가 수정되게 됩니다.

이러한 노드 속성을 사용하려면 잘 이해하고 사용해야 하는 부분입니다.

하지만 모던 자바스크립트 Deep Dive책에 의하면

innerHTML, outerHTML프로퍼티를 통해 해당 노드를 수정하게 된다면

'크로스 사이트 스크립팅' 공격에 취약하므로 위험하다고 합니다.

(★ https://namu.wiki/w/XSS --> 크로스 사이트 스크립팅 ★)

그러므로 요소를 추가하고 싶을 땐

기존 노드를 수정해서 추가하지 말고 createElement메서드를 통해

따로 노드를 생성한 뒤에 append하여 추가하는 방식이 낫다고 합니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

위 예제에서 확인할 수 있듯이

document.createElement메서드를 통해 요소 노드를 생성할 수 있습니다.

생성한 요소 노드는 아무런 자식도 갖고 있는 상태가 아닙니다.

예시로 document.createElement('div')라고 하면

<div></div>라는 요소 노드만 생성된 상태입니다.

그렇기 때문에 텍스트 같은 경우는 createTextNode로 텍스트 노드를 생성한 뒤

appendChild메서드를 통해 자식 노드로 추가하거나

textContent속성을 사용해 텍스트를 설정하면 됩니다.

어트리뷰트 같은 경우는 className속성, id속성을 통하여 class, id 어트리뷰트를 추가할 수 있습니다.

독립적으로 생성한 노드를 다 완성했다면

이제 추가만 하면 됩니다.

appendChild()	Adds (appends) a new child node to an element
insertAdjacentElement()	Inserts a new HTML element at a position relative to an element

-W3School-

먼저 appendChild() 메서드는 위에서도 봤듯이

취득한 노드의 자식 노드로 삽입할 수 있습니다.

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

appendChild메서드를 사용하면 해당 노드의 가장 마지막 자식노드로 추가됩니다.

두 번째 메서드인 insertAdjacentElement()는 첫 번째 인자로 추가할 위치, 두 번째 인자로는 추가할 노드를 받습니다.

afterend	After the element
beforebegin	Before the element

-첫 번째 인자(추가할 위치)-

See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen.

첫번째 노드(sushi)는 afterend로 햄버거 노드 앞에 위치하게 했고

두 번째 노드(bibimbap)는 beforebegin으로 햄버거 노드 뒤에 위치하게 했습니다.

insertAdjacentElement()메서드는 추가한 노드들이 대상 노드의 형제 노드로 추가됩니다.

필자가 설명했던 메서드, 속성 말고도

노드 이동, 복사, 엄청나게 다양한 속성 등등 DOM API는 정말 많은 기능들을 제공하고 있습니다.

자신이 원하는 DOM노드를 취득하고 추가/삭제하는 것은

어찌 보면 웹사이트를 동적으로 만들기 위한 1단계에 불과합니다.

2단계는 이벤트를 통해 웹 사이트에서 특정한 이벤트가 발생했을 때

취득한 노드에 변화를 주어 진정으로 웹페이지를 동적으로 다룰 수 있게 해줍니다.

다음 포스팅은 이벤트에 관하여 작성하겠습니다.

마지막으로 웹에 관련하여 바이블 같은 사이트 두 곳을 추천해드리고 떠나겠습니다 :)

(★ 웹에 대한 정보들은 이 두 사이트를 이용하는 것만으로도 충분할 정도로 최고입니다. ★)

https://www.w3schools.com/

W3Schools Free Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://developer.mozilla.org/ko/

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

후기

예상치도 못하게 글이 너무 길어졌다.

이때까지 쓴 글 중 가장 긴 글인 거 같다.

그나저나 W3School, mdn_web에서 너무나도 많은 정보를 얻은 거 같다.

그냥 다 필요 없이 이 두 사이트만 있다면

웹에 대한 궁금증은 해결할 수 있겠다는 믿음이 생겼다.

자주 이용해야겠다.

'HTTP, JS' 카테고리의 다른 글

[JS] 이터러블(Iterable), 이터레이터(Iterator) (0)	2023.07.21
Alert를 커스터마이징 하기 위해 Modal 만들어보기 (0)	2023.05.27
[WEB] 자바스크립트 이벤트 (0)	2022.08.16
[WEB] 브라우저의 렌더링 과정 (0)	2022.08.06
[HTTP] HTTP란 무엇일까?? (0)	2022.07.18

공지사항

호밀밭의 파수꾼

티스토리 뷰

[WEB] DOM(Document Object Model)

Reference

'HTTP, JS' 카테고리의 다른 글

티스토리툴바