DOM

dev/ understanding dom nodes - a comprehensive guide with example
medium/ DOM manipulation part 1
medium/ DOM manipulation part 2

What is Document Object Model

In simple words, DOM is the thing that gets generated after your browser parses the HTML that it gets.
that thing is a tree structure that browsers use to understand and represent a web page.
in this tree, each element is called a node.
- Document Node: This is the top-level node in the DOM and represents the entire HTML document.
- Element Node: This represents an HTML element, such as div, p, ul, etc.
- Attribute Node: This represents an attribute of an HTML element, such as id, class, src, etc.
- Text Node: This represents the actual text within an HTML element
- Comment Node: ?

so "manipulating the DOM" means modifying or exploring this tree structure of the web page.

directly and indirectly manipulating the DOM

example using DOM property and method to manipulate the contents in span elements
in this example, I used innerHTML, innerText, textContent to add a space in between the spans. but didn't work(maybe only half-worked).
because they don't directly interact with the DOM tree but instead replace the entire content of an element.

↳ meaning, these DOM properties can modify content through strings without directly touching the DOM tree.

so basically what it did was wiped out the old content, replaced them with the string, created new nodes. that's why it looked like my spans were duplicating themselves.
I see that those can be immediately useful, but they are not sustainable in this case.

what worked, however, was DOM methods like appendChild() createTextNode()
because DOM methods directly access and manipulate the DOM nodes. like adding, removing, or moving elements within the tree. like attaching, moving and cutting out branches.
when you're directly touching the tree, it keeps the existing structure intact while manipulating the elements.

NodeList and Array

Claudio and I suffered last time because we didn't know how to work these two together.
Difference between a NodeList and an Array in JavaScript

A NodeList may look like an array, but they are two completely different things

DOM element: DOM element is one of the types of DOM node
DOM node: html 돔 트리에서 하나의 단위를 의미하는 객체
DOM object: 자바스크립트에서 돔 노드를 표현하는 객체 -- 모든 노드는 자바스크립드에서 객체로 표현되므로
NodeList(object): is a collection of DOM nodes extracted from the HTML document.

↳ 여러개의 돔 노드를 포함하는 특수한 자바스크립트 객체

↳ uses document.querySelectorAll() document.childNodes etc.

Array: is a special data type in JavaScript that can store a collection of arbitrary elements.

↘︎ converting Nodelist to Array example

DOMTokenList

DOMTokenList mdn
How the DomTokenList API works dev
DOMTokenList는 여러 개의 값이 들어가는 특정 속성(class, rel, aria-describedby 등)을 쉽게 관리하기 위해 존재한다.
만약 이게 없다면, 코더가 직접 문자열을 다루면서 불필요한 공백을 조심하고, 하나씩 수동으로 추가/삭제해야 하는 불편함이 생김.

DOMTokenLIst looks like an array and lets you access items by index, but it's not an array

↳ if you need to use array methods, convert to an array first with Array.from()

DOM object and Token

Token and DOM object are different things, but a token can be part of a DOM obejct

a token is just a single piece of text, like a word or a name.
in the DOM, tokens are usually class names inside the class attribute.

↳ for example, div class="tiger figure", "tiger" and "figure" are all tokens

↳ and each class name ("tiger", "figure") is a separate tokens

whereas DOM objects represent the entire HTML element in Javascript, token is just a tiny part of DOM objects

Cheking data types

So it’s very important to understand the type of data I’m working with, whether I’m dealing with array, a DOM element, a NodeList or a DOMTokenList. Each type has different methods and behaves differently.

quick check using console.log():

Check if tis an Array

console.log(Array.isArray(elementname));

Check if it's a DOM

console.log(elementname instanceof Element);
Or
console.log(elementname instanceof Node);
Every element is also node

Check if it's a NodeList

console.log(nodes instanceof NodeList);

Check if it's a DOMTokenList

console.log(elementanme.classList instanceof DOMTokenList);

Callback

callbacks mdn
콜백함수 설명
Array methods and callback functions for beginners dev

User:Zuhui//Prototyping/Javascript

Contents

DOM