<body>
<div id="practice" class="highlight red">
여기 엘리먼트가 하나 있습니다
<span>자식도 있습니다</span>
<span>자식도 여럿 있습니다</span>
</div>
<body>tag: div
id: practice
class: highlight, red
안쪽에 담긴 내용: 여기 엘리먼트가 하나 있습니다~,~,~여럿 있습니다
- div#practice에 대하여,
부모 엘리먼트: body
자식 엘리먼트: span, span
Document Object Model
- JavaScript를 이용해서 엘리먼트의 속성값을 얻어내거나, 변경하는 방법
- HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델
- 트리구조
- HTML 문서도, JavaScript 객체도 둘 다 트리구조
- document라는 전역변수로 접근이 가능
※ DOM이 JavaScript는 아님.
DOM 구조 접근을 그저 JavaScript를 이용해서 접근할 뿐.
HTML 엘리먼트도, JavaScript로 표현 가능하지 않을까??
JavaScript를 이용해 element 확인하는 방법
console.dir()
- element를 객체의 형태로 확인할 수 있음
ex)console.dir($0) --- $0자체를 출력하거나, console.log($0)를 출력하는 형태와 달리 객체 형태로 나옴
Element 객체에 어떤 내용이 있을까? (Methods)
cf)
classList: 유사배열의 형태로 나옴
className: text의 형태로 나옴
ex) $0.tagName / $0.classList / $0.classList[idx] / $0.classList.contains('내용') = TrueOrFalse
innerHTML
html 태그가 통째로 나옴,
손대면 내용이 실제로 바뀜(값 할당 가능, 실제 화면에서의 내용이 바뀐다).
- ex)
$0.innerHTML = '<a href="https://블라블라">머라구</a>
innerText
실제로 화면에 렌더링 되는 텍스트만 보여줌
textContent
렌더링된 화면이 아니라 실제로 공백같은 것들이 출력됨.
손대면 내용이 실제로 바뀜
but 예를 들어 링크를 집어넣으면 링크도 텍스트로 전환. 문자로 자체로 들어가버림.
value
form의 입력값을 받아올 수 있음
element vs. node
- Element는 Node임. (node에 속해 있음)
- Text는 Node이나, Element는 아님
dataset: 태그 자체에 데이터를 숨겨서 심을 수 있음
클릭 이벤트: 엄청많음.. 검사창에서 종류 살펴보기. 대체로 onclick 많이사용
엘리먼트 선택
언제까지 $0으로만 DOM을 다룰 수는 없음.
JS를 이용해, 특정 엘리먼트를 선택하고 가져올 수 있음.
- 태그를 이용: getElementsByTagName
- Id 를 이용: getElementById <-- 아이디는 하나밖에 없으니까 단수. ()안에 #안넣음
- class를 이용: getElementsByClassName <-- recursion때 직접 구현
- selector를 이용: querySelector / querySelectorAll <-- 얘네로 위에거 커버 가능
comment 받아올 때는 document.querySelectorAll(".comment")
아이디를 받아올 때는 document.querySelector("#username")이런식으로..
새 댓글 넣기
DOM 조작 (method)
엘리먼트를 만드는 메소드는 반드시 알아두어야 할 것.
innerHTML을 이용한 생성에 비해 다소 복잡하게 느껴질 수 있지만, 메소드를 이용한 엘리먼트 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점 있음
DOM 조작 (innerHTML)
remove로 지우면 그자체만 지워지지만, innerHTML()로 지우면 자식 엘리먼트 전부다 삭제됨.
DOM 조작 (<template>태그)
vanila javascript
어떤 라이브러리도 쓰지 않고 조작한 javascript
외부 스크립트(js) 사용하고자 할때
</body>위에 <script src="script.js"></script>이런식으로 삽입하기.
맨 위에하면 인식이 안됨.
