목차
* 🤓 INTRODUCTION
* 🤳🏻 WHAT IS DOCUMENT OBJECT MODEL
* 🌴 DOM TREES
* 🧮 ORDER SETS
* 👁 VISUAL REPRESENTATION
* #️⃣ GETTING AN ELEMENT BY ID
* 🅰 CHANGE TEXT OF AN ELEMENT
* 📝 SUMMARY
* 🙏 THANK YOU

🤓 소개

**Welcome, my dear hackers! I hope you are all having a great start to the working week! Here we are, at our fourth chapter of the Getting started with javascript series. Today, we will discuss the Document Object Model (DOM) and how to use JavaScript to manipulate it.🚀

🤳🏻 문서 개체 모델이란 무엇입니까?

The Document Object Model is the data representation of the objects that comprise the structure and content of a document on the web.

It represents a programming interface for HTML and XML documents. The document is represented as nodes and objects. In that way, programming languages can connect to the page.

The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

🌴 DOM 트리

A tree is a finite hierarchical tree structure. In the tree, the order is the preorder, depth-first traversal of a tree. (Depth-first traversal is an algorithm for traversing or searching tree or graph data structure, that we'll discuss soon).

An Object that participates in a tree has a parent, which is either null or an object, and has children, which is an order set of objects. An object X whose parent is object Y is a child object of the object Y.

The root of an object is itself, if its parent is null (non existing), or else it is the root of its parent. The root of a tree is any object participating in that tree whose parent is null.

Let's describe the parent-child concept by looking and the very basic HTML div parent-child structure:

<!DOCTYPE html>
<html lang="en"> <!--This is the root node of the entire page-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parent-1"> <!--A parent div 1-->
     <div id="child-1"></div><!--The first child div-->
     <div id="child-2"></div><!--The second child div-->
    </div>
    <div class="parent-2"> <!--A parent div 2-->
    <!--The child div 3 this is an only child of the parent div 2
    while in the same time it is a parent div for the child 3-1 
    and 3-2-->
     <div id="child-3"> 
       <!--A child of a div child-3 & descendant of the div 
       parent-2 -->
       <div id="child-3-1"></div> <!--This is also a sibling to 
                           child 3-2 -->
       <div id="child-3-2"></div>
     </div>
    </div>
</body>
</html>

An object A is called a descendant of an object B, if either A is a child of B or A is a child of an object C that is a descendant of B.

An inclusive descendant is an object or one of its descendants

An object A is called an ancestor of an object B if and only if B is a descendant of A.

An object A is called a sibling of an object B, if and only if B and A share the same non-null parent.

The first child of an object is its first child or null if it has no children

The last child of an object is its last-child or null if it has no children.

I think you get where I'm going with this 😉

🧮 주문 세트

The order set parser takes a string input and then runs these steps:

Let inputTokens be the result of splitting input on ASCII whitespace

Let tokens be a new ordered set - **동일한 항목을 두 번 포함해서는 안 된다는 추가 시맨틱이 포함된 목록 **

inputTokens의 각 토큰에 대해 토큰을 토큰에 추가합니다

모든 토큰 반환

👁 부모-자녀-형제 개념의 시각적 표현

DIV 1은 자식 1과 자식 2의 부모 요소입니다. 자식 1과 자식 2 요소는 형제입니다.

DIV 2는 자식 3과 자식 4의 부모 요소이며 동시에 자식 3과 자식 4는 형제입니다. 자식 5와 자식 6은 자식 3 요소의 자식이며 DIV 2의 형제자매이자 자손입니다.

️⃣ ID로 요소 가져오기

Now, we are going to demonstrate how to access DOM elements using javascript. Open your console and click the button.

In your console, you should get this:

<div id="get-me">GET ME</div>

The important part in the javascript code is:

var get_me = document.getElementById("get-me");

Here, we declare a variable get_me that we use to store an element (div with an id of "get-me"). YES we can store the entire HTML element inside a single variable!

Why would we want to store an entire element inside a single variable?

Well, we don't, but we want to store an object that represents an HTML element we are trying to get, and we already do that, but if we change console.log(get_me) to console.dir(get_me) we will get something like this:

이것은 개체의 작은 부분에 불과합니다. 내 코드펜에서 코드를 복사하고 console.dir 지시문을 사용하여 컴퓨터에서 실행하면 전체 개체를 볼 수 있습니다.

대체 그게 뭐야? 😲

괜찮아요. 해당 개체의 모든 단일 속성을 기억하거나 알 필요는 없지만 이것이 우리가 id로 요소를 가져오고 변수에 저장하는 이유입니다. 어쩌면 해당 개체를 조작해야 할 수도 있습니다. 텍스트 또는 색상 변경과 같습니다.

🅰 요소의 텍스트 변경

You probably noticed that I have a line of code that is commented out. If you uncomment that line you will see a change on a button click, the change affects a property within a get_me element object that is called innerText; An innerText as its name says is a simple text that is inside the div (if div has no text initially, innerText is just an empty string).

다음 코드 줄을 사용하여 div의 텍스트를 변경했습니다.

get_me.innerText = "CHANGE"

그림에서 innerHTML을 눈치챘을 것입니다. innerHTML에는 HTML 태그와 텍스트가 포함되어 있습니다. 따라서 get_me div에 새 단락을 추가하여 innerHTML을 변경하려면 다음과 같이 해야 합니다.

get_me.innerHTML = "<p>CHANGE</p>";

📝 요약

The Document Object Model is the data representation of the objects that comprise the structure and content of a document on the web.
The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.
Access element by Id document.getElementById("id")
Change inner text document.getElementById("id").innerText = "text"
Change inner HTML - document.getElementById("id").innerText = "<p>text</p>"

🙏 읽어주셔서 감사합니다!

References:
School notes...
School books...
whatwg

댓글을 남겨주세요, 당신에 대해 말해주세요, 당신의 일에 대해, 당신의 생각을 댓글로 달아주세요, 저와 연결하세요!

☕ 저를 지원하고 집중하세요!

즐거운 해킹 시간 되세요! 😊

Reference

이 문제에 관하여(JavaScript 시작하기 - 4장 🚀), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devlazar/getting-started-with-javascript-chapter-4-4gjm

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JavaScript 시작하기 - 4장 🚀