| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- convolution 역전파
- Convolution
- 부스트캠프 aitech3기
- Multi-Layer Perceptron
- 부스트캠프
- 부스트캠프aitech3기
- Beyond Linear Neural Networks
- group_by( )
- 모각공
- col_names
- 자바스크립트
- JavaScript
- 정규표현식
- Sequential Model
- 네이버커넥트
- 생활코딩
- 역전파알고리즘
- mutate( )
- r
- LinearNeuralNetwork
- NomadCoder
- 베이즈통계학
- RNN
- Filter
- summarise( )
- regular expression
- 네이버커넥트재단
- regex
- aitech
- dplyr
- Today
- Total
clear_uncertainty
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 1 ) 본문
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 1 )
SOidentitiy 2021. 7. 24. 17:032021-07-24
자바스크립트 학습일지입니다.
해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.
[Javascript On The Browse - (1)]
자바스크립트는 HTML에 접근하고 읽을 수 있게 설정되어 있습니다.
또한 자바스크립트를 통해 HTML을 변경할 수도 있습니다.
HTML in Javscript
그 모든 출발점은 document 입니다. 예를 들어 자바스크립트에서 HTML의 title을 읽고 불러와 봅시다.
document.title;
//javascript // title: javascript를 불러옵니다.
document.title = "Hi";
// Hi // title을 Hi로 바꿉니다.
자바스크립트는 HTML 자체를 보는 것이 아닌, HTML의 Object를 봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class = "hi" id="title">
Grab me!
</h1>
<script src="javascript.js"></script>
</body>
</html>
↑ HTML
const title = document.getElementById("title");
console.dir(title);↑ javascript
↑ Console.dir 에서 나타나는 id=title의 property들
Javascript로 HTML를 읽고(가져오고) 수정할 수 있는 것을 이해해야 합니다.
Searching For Elements
Javascript에서 object를 가져올 때 여러가지 방법이 있습니다.
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>
getElementsByClassName( )
getElementsByTagName( )
getElementsById ( )
querySelector ( )
element를 CSS selector방식으로 검색할 수 있습니다. (ex) .hello h1:first-child
단 하나의 element를 return, 즉 오직 첫 번째 것만 가져옵니다.
querySelectorAll ( )
조건에 맞는 세개 다 가져옵니다.
⇒ 세개의 h1이 들어있는 array를 가져다줍니다.
- querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것입니다.
하지만 getElementById는 하위 요소 가져오는 것을 못하므로 querySelector를 사용하는 것이 효과적입니다.
document.querySelector()는 일치하는 요소가 없으면 null을 반환합니다.
예제
아래 예제는 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환합니다.
const el = document.querySelector(".myclass");
아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "user-panel main"인 <div> 안의, 이름이 "login"인 중 첫 번째 요소입니다.
const el = document.querySelector("div.user-panel.main input[name=login]");
출처
Document.querySelector() - Web API | MDN
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
developer.mozilla.org
선택자로 DOM 요소 선택하기 - Web API | MDN
선택자 API는 DOM에서 Element 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공합니다. 이 방법은 JavaScript 코드에서 반복문을 통해 특성 요소를 탐색하던 이전 방법보다 훨씬 빠릅
developer.mozilla.org
노마드 코더 Nomad Coders
코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!
nomadcoders.co
