To do
- School
- 품질표준방법론 강의 듣기
산업공학프로그래밍 과제 제출
- My Study
자바스크립트 기초 복습(TIL에 간단히 정리)인프런 강좌 '인터렉티브 웹 개발 제대로 시작하기' 듣기
TIL
window.addEventListener('load', function (){
var title = document.getElementById('main-title');
console.log(title);
});
// addEventLisner은 메서드, 즉 함수.. 첫번째 매개변수는 문자열 형태의 이벤트 이름이 들어감. 두번째 매개변수는 첫번째 매개변수인 이벤트가 실행되면 실행될 함수를 넣음.
// 전체 문서가 load 되면 함수를 실행
// HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
window.addEventListener('DOMContentLoaded', function (){
var title = document.getElementById('main-title');
console.log(title);
});
// 앞서 첫번째 방법은 이미지나 전체 내용들이 load가 되어야 하지만, 이 방법은 태그 구조들만 load 되면 되므로 시간이 많이 줄어든다.
// 즉, 빨리 load 하는 척 처럼 보이게 만든다.
// 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
var mainTitle = document.querySelector('#main-title small');
// getElementById 보다 막강하다. getElementById를 통해 small을 가져오려면
// 1. var title = document.getElementById('main-title');
// 2. titleSmall = title.getElementsByTagName('small');
// 3. console.log('titleSmall');
// 을 해야하지만 querySelector를 쓰면 '#main-title small'을 통해 한방에 가져올 수 있다
// 참고로 css에서 선택하려면 #main-title small { }을 해야한다. 새롭게 알게 된 사실!
console.log(mainTitle);
// var ilbuni = document.querySelector('.ilbuni'); // 여러 개가 있다 한들 맨처음 하나만 가져온다
var ilbuni = document.querySelectorAll('.ilbuni'); // 다 가져오는 방법. 많이 쓰임
console.log('ilbuni[2]');
var ilbuni = document.querySelectorAll('.ilbuni');
for (var i = 0; i < ilbuni.length; i++){
ilbuni[i].style.border = '1px solid red';
}
// 모든 'ilbunu'의 클래스를 가져와서 for문을 통해 각각 테두리를 빨간색 선으로 감싸준다.
var link = document.querySelector('.ilbuni a');
console.log( link.getAttribute('href'));
console.log( link.getAttribute('class'));
// 위에 이어서 속성을 바꾸는 방법
link.setAttribute('href', 'https://naver.com'); // setAttribute를 사용해서 속성을 바꿔준다.
console.log( link.getAttribute('href'));
참고: <a class="link-google" href="https://google.com">Google</a> // .link-google {color : red}
참고: .special {background-color: pink;}
var link = document.querySelector('.ilbuni a');
// link.className = 'special'; // 배경이 핑크색깔로 변함... 글자 red(link-google)는 사라짐.
link.classList.add('special'); // 글자 빨강 + 배경 핑크색.... 또한 여러 개를 추가할 수 있다. remove도 마찬가지.
setTimeout(function (){
link.classList.remove('link-google');
}, 2000) // 2초 뒤에 이 함수를 실행.
console.log( link.classList.contains('special')); // classList 메서드.. 이 클래스를 포함하냐 -> 맞으면 true, 아니면 false.
< 자식으로 추가하기 appendChild >
<body>
<h1 id="main-title">
DOM (Document Object Model)
<small>small</small>
</h1>
<ul class="ilbuni-mom">
<li class="ilbuni">
<img src="./img1.jpg">
<a class="link-google" href="https://google.com">Google</a>
</li>
<li class="ilbuni"><img src="./img2.jpg"></li>
<li class="ilbuni"><img src="./mumin1.gif"></li>
</ul>
<script>
var ilbuniMom = document.querySelector('.ilbuni-mom');
var listElem = document.createElement('li'); // 태그 쓰기
listElem.innerHTML = '<span>일분이</span>';
console.log(listElem);
ilbuniMom.appendChild(listElem); // 내 자식으로 추가할 Element
// console.log 출력값 : <li><span>일분이</span></li>
// li 태그는 block 요소 이므로, 다음 줄에 '일분이' 라는 글자 리스트가 생성된다.
'👩🏻💻 TIL' 카테고리의 다른 글
| Sqld 2과목 3장 필기 정리 (0) | 2021.05.12 |
|---|---|
| 2020_05_27_TIL (0) | 2020.05.27 |
| 2020_05_26_TIL (0) | 2020.05.27 |
| 2020_05_23_TIL (0) | 2020.05.23 |
| 2020_05_18_TIL (0) | 2020.05.18 |