[TIL] 엘리스 SW 엔지니어 트랙 Day 012
📖 오늘 배운 내용 - 2021.11.09
- DOM
📝 DOM(Document Object Model)
[JavaScript] 자바스크립트 DOM 트리
🎯 DOM 트리 HTML을 지탱하는 것은 태그(tag)이다. 📝 DOM 예제 사슴에 관하여 사슴에 관한 진실. 트리에 있는 노드는 모두 객체이다. 태그는 요소 노드(element node) (혹은 그냥 요소)이고,.
lakelouise.tistory.com
[JavaScript] 자바스크립트 DOM 탐색하기
🎯 DOM 탐색하기 DOM에 수행하는 모든 연산은 document 객체에서 시작한다. 📝 트리 상단의 documentElement와 body DOM 트리 상단의 노드들은 document 가 제공하는 프로퍼티를 사용해 접근할 수 있습니다. =
lakelouise.tistory.com
📝 HTML 요소의 선택
[자바스크립트] Document 객체
Document 객체 Document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. 브라우저가 불러온 웹 페이지를 나타내
lakelouise.tistory.com
📝 이벤트 핸들러
- 요소 가져오기
- 버튼에 이벤트 핸들러 등록시켜주기
- 클릭하면 실행될 함수 작성하기
[자바스크립트] 이벤트 등록, addEventListener()
이벤트란? 사용자(사람)와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 하는 것 특정 이벤트가 발생되었을 때, 특정 함수를 실행할 수 있게 해주는 것이 addEventL
lakelouise.tistory.com
📝 innerHTML과 innerText의 차이
- HTML 파싱 유무
- innerHTML은 html 자체로 인식해서 태그를 넣어주면 작동하지만 innerText는 문자로 인식해서 태그가 작동 안 된다.
[ JavaScript] 자바스크립트 주요 노드 프로퍼티
🎯 주요 노드 프로퍼티 DOM 노드에 대해 좀 더 알아보자. 📝 innerText text 값만 읽어온다! 내용물을 파싱 하지 않는다. (HTML 구문을 해석하지 않는다.) -> 오로지 문자열만 인식한다. 📝 innerHTML 요소
lakelouise.tistory.com
📝 clasList
[자바스크립트] HTML & CSS 조작하기, classList
자바스크립트로 html과 css를 조작 자바스크립트는 html과 css를 조작할 수 있다. 다양한 기능을 통해 알아보자. css 조작하기 const h1 = document.querySelector("div.hello:first-child h1"); // function han..
lakelouise.tistory.com
💡 오늘 깨달은 것
- 함수에 return 값이 없으면 undefined를 반환한다.
- innerText은 불필요한 공백을 제거하고 텍스트만 반환하지만 textContent는 공백을 포함한 모든 텍스트를 반환한다.
form.reset();를 사용하면 form을 리셋한다.- innerHTML는 파싱을 하지만, innerText는 파싱 하지 않고 text 값만 읽어온다.
'프로그래밍 > Today I Learned' 카테고리의 다른 글
| [TIL] 엘리스 SW 엔지니어 트랙 Day 014 (0) | 2021.11.11 |
|---|---|
| [TIL] 엘리스 SW 엔지니어 트랙 Day 013 (0) | 2021.11.10 |
| [TIL] 엘리스 SW 엔지니어 트랙 Day 011 (0) | 2021.11.07 |
| [TIL] 엘리스 SW 엔지니어 트랙 Day 010 (0) | 2021.11.06 |
| [TIL] 엘리스 SW 엔지니어 트랙 Day 009 (0) | 2021.11.05 |