Dom (Document Object Model) 정리 요약(1)

javascript를 이용해서 엘리먼트의 속성값을 얻어내거나, 변경하는 방법

HTML은 트리 구조를 가지고 있습니다.
객체도 자세히 보면 트리 구조를 가지고 있습니다.

그래서 정리하자면 DOM이란, HTML 엘리먼트를 javascript 이용해서 객체의 형태로 가져올수 있다.
(* 하지만 DOM이 javascript는 아닙니다.)
-> 이렇게 DOM에 대해서 이해를 하면 될 것 같다.

document라는 전역변수로 접근을 할수 있습니다.

콘솔에 document를 쳐보자

[그림] 객체 형태는 아지만 html 구조가 나타납니다.

객체 형태로 어떻게 볼수 있을까 ?
console.dir(document)

[그림] document가 객체형태로 나온다. 이말인 즉슨 우리가 객체에서 접근하는 방법으로 하나하나 접근이 가능하다는 의미입니다.

[그림] 접근 예시

(* 개발자콘솔 element창에서 볼 수도 있습니다.)

[그림] $0: 내가 클릭한 엘리먼트의 변수의 값으로 지정이 됩니다.

console.dir($0)를 콘솔 창에 쳐봅시다
tagname/ 부모 엘리먼트 / 아이디 속성 이런것이 객체형태로 나오게 됩니다.

<html>
<li class="comment hello world" id="test"> == $0

[그림] 조회 결과

innerHTML : 태그로 들어갑니다.

<js>
$0.innerHTML='<a href="https://naver.com">네이버</a>'
-> "<a href="https://naver.com">네이버</a>"

<html>
<div class="contents"> == $0
 <a href="https://naver.com">네이버</a>
</div>

textContent 이용 : 문자열로만 들어갑니다.

<js>
$0.textContent='<a href="https://naver.com">네이버</a>'
-> "<a href="https://naver.com">네이버</a>"

<html>
<div class="contents"><a href="https://naver.com">네이버</a></div> ==$0

<html>
<input id="username" type="text" placeholder="아이디를 입력하세요"> == $0

<js>
console.log($0.value) // ""

<js>
console.log($0.value) // "asdfasdfadsfsdf"

html
<body>
 <div id="practice" class="highlight red">
  여기 엘리먼트가 하나 있습니다
  <span>자식도 있습니다</span>
  <span>자식도 여럿 있습니다</span>
 </div>
</body>

<html>
<div data-user="steve" data-role="moderator" data-user-id="1">
  Steve Lee
</div>

<js>
console.log($0.dataset.user) // 'steve'
console.log($0.dataset.role) // 'moderator'
console.log($0.dataset.userId) / '1'

태그를 이용: getElementsByTagName
id를 이용: getElementById
class를 이용: getElementsByClassName
selector를 이용: querySelector(주로 Id 혹은 한개만 받아올때)
querySelectorAll(주로 여러개의 Tag or class를 받아올때 배열형태로 가져옵니다)

출처 :코드스테이츠

이 문제에 관하여(Dom (Document Object Model) 정리 요약(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jelkov/Dom-Document-Object-Model-정리1

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