JS DOM Functions
console.log();에서 console은 'object' / log는 '함수'
JS에서도 CSS처럼 HTML 코드에 변화를 줄 수 있음
DOM(Document Object Module)로
JS는 우리가 만든 HTML에 있는 모든 엘리먼트들을 가지고 옴.
그리고 그 엘리먼트들을 객체로 바꿀 것이고,
일반적으로 VS code에서 console.치면 나오는 여러 가지 것들을
'객체'라고 할 수 있는데, 우리는 HTML에 있는 엘리먼트들을
객체화함!
ex)html에 있는 h1태그에 id값이 title인 것의 값을 JS에서
변경하고 싶다면??
title.innerHTML = "Hello~ My Dear!";
라고 적어주면 HTML화면에서 그대로 값이 변경되는 것을 볼 수
있다. 중요한 점은 우리가 이전에 HTML에서 작성한 코드의
원래 값은 유지가 된다는 점!!!!!
?HTML이 JS와 함께 쓰려고 하면 어떻게 동작할까?
우선 css와 같이 js에서도 element를 선택 가능..그래서 변경
할 수 있다.
css에서는 id로 무언가 선택할 때는 #을 써서 선택.
(여기서 무언가는 title이라고 하기)
=css=
#title{
}
javascript에서 id로 무언가 선택할 때는
document.getElementById라고 써서 선택할 수 있다.
(여기서 무언가는 title이라고 하기)
1.console.log(document.getElementById);
2.const title =
document.getElementById("title");
console.log(title)
*** DOM : Document Object Module ***
js에서 html을 객체(object)로 바꿔서 변경할 수 있다.
![](https://media.vlpt.us/images/seoha23/post/82bcb3a4-3c6e-46f9-9639-f97778976a98/image.png)
tree형식의 자료구조로 형성되어 있다.
--위쪽의 node를 부모(parent),
node아래쪽은 자식(child).
root node는 가장 위에서 시작되는 node이니까
parent없는 node. 그리고 child가 없는 node는
leaf node. root에서 시작해서 leaf에서 끝
(여기서 node란? 모든 개개의 개체를 뜻함.
head, body, title, script, h1 등의 태그 뿐만 아니라
태그 안의 텍스트, 속성 등 모두 node에 속함)
!?JS로 문서객체를 생성한다는 것은 어떤 의미인가?!
크게 2가지
우선, 웹 브라우저가 HTML페이지에 적혀 있는 태그를 읽으면
생성하는 것. 이런 과정을 정적으로 문서 객체를 생성한다고 말함
단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것
반대로 원래 HTML 페이지에 없던 문서객체를 JS를 이용해서
생성할 수 있다. 이런 과정을 동적으로 문서객체를 생성한다고 함
따라서 JS로 문서객체를 생성한다는 것은 처음에는 HTML페이지에
없던 문서객체를 동적으로 생성하는 것이 된다.
!?DOM은 어떻게 사용할까?!
JS통해서 동적으로 문서객체 생성해보기
// 1. 문서 객체 생성
var header = document.createElement('h2');
-우선 document 객체에 접근해 <h2> 태그 생성하기
var textNode =
document.createTextNode('Hello DOM');
-그 다음은 document 객체에 접근해서 TextNode를 생성하고
'Hello DOM'이라는 스트링을 넣어주고 있다.
// 2. 노드(요소/텍스트) 연결
header.appendChild(textNode);
-위에서 생성한 <h2>태그에 자식노드추가. 그런데 추가되는
자식노드가 아까 위에서 생성한 Text Node이다!
// 3. body 문서 객체에 header 문서 객체를 추가
document.body.appendChild(header);
-이제 document객체를 통해서 body객체에 접근함. 그리고
body객체에 자식 노드를 추가하고 있는데 아까 <h2>태그를
생성해서 TextNode까지 추가했던 header이다.
이렇게 추가하고 나면
HEADER-1
HEADER-2
-----------------------------------------------
Hello DOM
처럼 문자가 추가된 것을 확인 가능!
Author And Source
이 문제에 관하여(JS DOM Functions), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seoha23/JS-DOM-Functions-7637mjx3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)