카테고리 없음

18.DOM(작성중)

에밀오구 2023. 3. 7. 09:38

1. DOM 기초

HTML 요소를 Object 처럼 조작할 수 있는 model

html을 조작한다?

HTML로 구성된 웹 페이지를 동적으로 움직이게 만든다.

학습목표

-dom의 개념

- dom 구조 파악 html과 dom이 어떻게 닮아 있는지 이해

- html에서 js 불러올때 주의할 점 이해

-dom과 js 차이를 이해

Q. HTML 상단에 자바스크립트 파일을 배치하는 경우와 하단에 자바스크립트를 배치하는 경우의 차이는 왜 이러날까요?

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script>요소를 만나면 웹브라우저는 html 해석을 잠시 멈추고 script 요소를먼저 실행합니다. 그래서 html 상단에 자바스크립트 파일을 배치하면 html 파일을 해석하기 전에 자바스크립트 파일을 먼저 실행함으로 자바스크립트 파일 내부에서 html 태그를 접근한 코드들은 제대로 출력되지 못할 수 있습니다. 그래서 자바스크립트는 html 하단에 배치해야 합니다. (도퍼)

자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는 어디에서나 document 객체를 조회할 수 있습니다.

dom 구조 조회시 console.dir

console.dir dom 을 객체의 모습으로 출력합니다.

Q. console.log와 consol.dir의 차이는 뭐라 말할 수 있을까요?

HTML DOM parentElement

자바스크립트로 newsContents의 부모 요소를 가리키는 속성을 찾아보세요. 이 속성은 직접 검색을 통해 확인해 보기 바랍니다.

(추천 검색어 : mdn which attribute of DOM is used to get a parent element)

parentElement와 parentNode 의 차이점

document.body.parentNode; // Returns the <html> element
document.body.parentElement; // Returns the <html> element

document.documentElement.parentNode; // Returns the Document node
document.documentElement.parentElement; // Returns null (<html> does not have a parent ELEMENT node)


let newContents = document.body.children[1] //div.#news-contents
console.dir(newContents.parentElement); // body

div#news-contents.parentElement (x)

해당 요소를 아이디로 작성해서는 안됩니다. 태그로 작성하기

-> Q. 너무 불편하지 않나요? 해당 요소를 아이디로 지목해서 사용하려면 어떻게 해야할까요?

A. querySelector

트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점입니다. 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요

2. DOM 다루기

document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방법

create read update delete append

innerHTML과 textContent의 차이

3. 프로그래머스 배열뒤집기

function solution(num_list) {
    var answer = [...num_list];
    return answer.reverse();
}

function solution(num_list) {
    return num_list.sort((a, b) => -1);
}

CSS 클래스를 이용해서 간접적으로 바꾸는 것을 권장합니다. 그 이유

디자인의 디테일한 요소가 자바스크립트 코드에 담기는 것을 방지하기 위해

따로 클래스를 이용하면, 해당 디자인을 디자이너가 쉽게 바꿀 수 있기 때문에

CSS는 디자인, 자바스크립트는 로직에 집중할 수 있게 하기 위해

근실님

문자열 두개

.value 인풋안에있는값

"그럼" === "안녕"