JS ~ DOM 개요 ~
개요
Javascript에서는 DOM의 조작이 필수가 됩니다.
DOM이란 무엇인가에 대한 기사가 됩니다.
JS 복습
JS는 어떻게 움직이는지에 대해 복습합니다.
자세한 것은 이 기사를 참조해 주시면 감사하겠습니다.
①HTML/CSS의 정보를 읽는다
② 그 정보를 바탕으로 가공
③HTML/CSS 재작성
위의 인용이 얕은 흐름입니다.
DOM 조작이란 ③에 해당합니다.
또 JS에서 JS로 DOM의 내용을 재작성했다고 해도 HTML을 재작성하고 있는 것은 아님을 기억해 둡시다.
DOM
브라우저가 로드되면 Document Object Model 또는 DOM이라는 데이터 구조가 로드됩니다.
index.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 class="header">
<h1 class="title">JavaScript</h1>
<p class="sub-title">DOM操作について</p>
</div>
</body>
</html>
DOM은 웹 페이지를 트리 형태로 구조화한 것입니다. 그리고 이 트리에 있는 요소를 Node(노드)라고 합니다.
Reference
이 문제에 관하여(JS ~ DOM 개요 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/711a443caa767f231ee7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
JS는 어떻게 움직이는지에 대해 복습합니다.
자세한 것은 이 기사를 참조해 주시면 감사하겠습니다.
①HTML/CSS의 정보를 읽는다
② 그 정보를 바탕으로 가공
③HTML/CSS 재작성
위의 인용이 얕은 흐름입니다.
DOM 조작이란 ③에 해당합니다.
또 JS에서 JS로 DOM의 내용을 재작성했다고 해도 HTML을 재작성하고 있는 것은 아님을 기억해 둡시다.
DOM
브라우저가 로드되면 Document Object Model 또는 DOM이라는 데이터 구조가 로드됩니다.
index.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 class="header">
<h1 class="title">JavaScript</h1>
<p class="sub-title">DOM操作について</p>
</div>
</body>
</html>
DOM은 웹 페이지를 트리 형태로 구조화한 것입니다. 그리고 이 트리에 있는 요소를 Node(노드)라고 합니다.
Reference
이 문제에 관하여(JS ~ DOM 개요 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/711a443caa767f231ee7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!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 class="header">
<h1 class="title">JavaScript</h1>
<p class="sub-title">DOM操作について</p>
</div>
</body>
</html>
Reference
이 문제에 관하여(JS ~ DOM 개요 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akari_0618/items/711a443caa767f231ee7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
