The Document Object Model (DOM)

Inline, Internal, and External JS

Inline JS

By applying inline js, a problem occurs about quotation marks.

To fix this, we have to use different quotation marks that are single and double.

Like this.

* Recommend: Avoid inline JS, Like CSS.

---

Internal JS

---

External JS

Unlike css, js script needs to be inside of body tag.

If the css link located at the below js link, then alert pops up and show css styles.

If the js script located inside of head tag, js that pointing 'h1' doesn't work in body tag since there isn't 'h1' in head tag.

 

* Best Practice: put js script just before the closing body tag.

 

---

Dom (Document Object Model)

Definition from docs. link

DOM 이란?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

DOM 과 자바스크립트

이 문서의 대부분의 예제와 같이, 위에서 사용된 예제는 JavaScript이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.  

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만,  나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:

API (web or XML page) = DOM + JS (scripting language)

---

Properties and Methods

Properties describe something about the object.

Methods are all the things the object can do.

---

Selecting HTML elements with JS

Select multiple element

getElementsByTagName("li"); returns array of HTML elements.

Thus, to get the property of specific element, need to specify the location in the list.

---

Select a single element

1. 'getElementById'

2. 'querySelector'

 

Both returns a single item.

Using querySelectorAll to select multiple elements.

 

 

 

---

Manipulating and Changing Styles of HTML Elements with JS

As using JS to change the properties, unlike css, it's camel case.

Also, the value to change have to be string unlike css just represents values not string.

 

in CSS

element { background-color: yellow; }

in JS

document.querySelector("button").style.backgroundColor = "yellow";

---

Separation of Concerns: Structure VS. Style VS. Behaviour

classList

classList.add

classList.remove

classList.toggle

 

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

 

Keep all the styles you assign and simultaneously turn on and off.

Using toggle, make invisible to turn on or off.

add class by js.

1. make class in styles.css as 'huge'

.huge {
  font-size: 10rem;
  color: red;
  font-weight: bold;
}

2. go to chrome console

3. document.querySelector.classList.add("huge");

then, result.

---

Text Manipulation and Text Content Property

 

innerHTML

---

Manipulating HTML Element Attributes

What is HTML Element Attributes?

: Everything that goes inside the tag is the attributes other than the tag name itself.