230601 TIL

 

💡 DOM 제어에 쓰이는 문법들

1. 문서 객체 생성과 선택

• document.createElement(tagName) : 새로운 HTML 요소를 생성합니다.
• document.getElementById(id) : id 속성을 기준으로 요소를 선택합니다.
• document.getElementsByTagName(name) : 태그 이름을 기준으로 요소를 선택합니다.
• document.getElementsByClassName(name) : 클래스 이름을 기준으로 요소를 선택합니다.
• document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다.
• document.querySelectorAll(selector) : CSS 선택자를 이용하여 모든 요소를 선택합니다.

 

2. 문서 객체 조작

• element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다.
• element.textContent : 해당 요소 내부의 텍스트를 변경합니다.
• element.setAttribute(attr, value) : 해당 요소의 속성 값을 변경합니다.
• element.getAttribute(attr) : 해당 요소의 속성 값을 가져옵니다.
• element.style.property : 해당 요소의 스타일 값을 변경합니다.
• element.appendChild(child) : 해당 요소의 하위 요소로 child를 추가합니다.
• element.removeChild(child) : 해당 요소의 하위 요소 중 child를 삭제합니다.
• element.classList.add(class) : 해당 요소의 클래스에 새로운 클래스를 추가합니다.
• element.classList.remove(class) : 해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
• element.classList.toggle(class) : 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.

 

3. 이벤트 처리

• element.addEventListener(type, listener) : 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
• element.removeEventListener(type, listener) : 해당 요소에서 등록된 함수를 제거합니다.
• event.preventDefault() : 이벤트가 발생했을 때 기본 동작을 취소합니다.
• event.stopPropagation() : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.

 

4. 기타

• window.location.href : 현재 페이지의 URL을 가져옵니다.
• window.alert(message) : 경고 메시지를 출력합니다.
• window.confirm(message) : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.

 

1. toFixed()

소수점의 자릿수의 길이를 제한한다.

.toFixed(1)이라고 지정하면 소수점 아래 첫번째 숫자까지 나오며

이 때 소수점 두번째 자리의 수를 반올림한다.

 

예시

let num = 3.141592

console.log(num.toFixed(0)); // 3
console.log(num.toFixed(1)); // 3.1
console.log(num.toFixed(2)); // 3.14
console.log(num.toFixed(3)); // 3.142
console.log(num.toFixed(4)); // 3.1416

 

[참고]

https://opentutorials.org/course/50/133

toFixed - 생활코딩

 

2. document.querySelector()와 document.querySeletorAll()의 차이

'DOM 제어에 쓰이는 문법들'에서 확인했을때 document.querySeletor()와 document.querySelectorAll()은 각각

'CSS 선택자를 이용하여 요소를 선택합니다.', 'CSS 선택자를 이용하여 모든 요소를 선택합니다.' 라고 설명하고 있다.

 

mdm web docs에서는

document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 element를 반환한다.

Document.querySelectorAll()은 지정된 선택자 그룹에 일치하는 문서의 Element list를 나타내는 정적(살아있지 않은) node list를 반환한다고 설명하고 있다.

 

둘의 차이는 선택자에 해당되는 요소, element가 하나일때 쓰느냐, 두 개 이상일때 쓰느냐이다.

querySelector는 선택자와 일치하는 문서의 첫번째 element를 반환하며, 일치하는 요소가 없다면 null을 반환한다.

 

아래 예시처럼 element(movie-card)가 하나일 경우에는 addEventListner 등으로 바로 사용할 수 있지만

const movieCard = document.querySelector('.movie-card');

movieCard.addEventListener('click', function() {
window.alert('영화 ID: ' + movieCard.id);
});

querySelector는 지정된 선택자를 가지는 첫번째 element 만을 반환하기 때문에

동일한 선택자를 가지는 element가 2개 이상이라면 2번째, 3번째, 4번째... element는 사용할수 없게 된다.

 

 

querySelectorAll은 선택자 그룹에 일치하는 document의 element list, 즉 NodeList를 반환한다.

아래 예시처럼 element가 다수일 경우, 이를 사용하기 위해선 반복문으로 묶어줘야 한다.

const movieCards = document.querySelectorAll('.movie-card');

movieCards.forEach(movieCard => {
movieCard.addEventListener('click', function() {
window.alert('영화 ID: ' + movieCard.id);
});
});

 

[참고]

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll

https://velog.io/@edie_ko/200927JS-querySelector%EC%99%80-querySelectorAll%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

querySelectAll과 forEach문 사용법 (for문과 spread 연산자도 있음)

https://developer-talk.tistory.com/853

 

forEach문과 화살표 함수 참조

https://meanbymin.tistory.com/57

 

CSS뿐만 아니라 JavaScript도 HTML 문서에 적용할때 그 대상을 정하는것은 선택자 Selector이다.

잘 기억해두자 CSS에서는 잘만 썼으면서 이 당연한걸 왜 이해 못해서 버벅거린걸까

 

3. addEventListener()

이벤트를 등록하는 가장 권장되는 방식

addEventListener(type, listener);
// type - 수신할 이벤트 유형을 나타낸다. 클릭이나 input 입력을 수신할때 등이 있다.
// listener - 지정한 이벤트를 수신할 객체이다. 메소드를 포함하는 객체 또는 js 함수여야 한다.

이번 프로젝트에서는 클릭되면 alert를 출력하도록 사용하였다.

movieCard.addEventListener('click', function() {
window.alert('영화 ID: ' + movieCard.id);
});

 

[참고]

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN

https://opentutorials.org/course/1375/6761

addEventListener() - 생활코딩

 

forEach와 addEventListener('click', ) 참조

https://developerntraveler.tistory.com/95

 

4. HTML과 CSS파일 분리

<style>...</style> <!--style 태그 안의 내용을 복사한 CSS 파일을 만든 뒤, style태그는 삭제-->

<link rel="stylesheet" href="css.css">

rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시하는 내용이며

속성값 "stylesheet"는 '스타일 시트로 사용할 외부 리소스를 불러옴'이라는 의미이다.

 

href 속성은 그 경로가 된다.

현재 html 파일과 css파일이 같은 디렉토리 안에 존재함으로 별다른 경로 설정이 필요하지 않았다.

 

HTML4까지는 type="text/css"라고 링크가 참조하는 리소스의 유형도 지정해주어야 했지만,

HTML5에서는 기본값이 "text/css"로 설정되어 명시적으로 지정하지 않아도 된다.

 

[참고]

http://www.tcpschool.com/html-tag-attrs/link-rel

코딩교육 티씨피스쿨

 

5. HTML과 JS 파일 분리

<body> 태그 아래 <script> 태그에 있던 내용을 복사한 js 파일을 만든 뒤, <script>의 내용을 변경한다.

<script src="js.js"></script>

src 속성이 그 경로가 된다.

현재 html 파일과 js파일이 같은 디렉토리 안에 존재함으로 별다른 경로 설정이 필요하지 않았다.

 

CSS는 <head> 태그 안에 그대로,

JS는 <body> 태그 안에 그대로

 

[참고]

https://salix97.tistory.com/158

HTML 에서 CSS 와 JavaScript 분리하기

 

6. 화살표 함수

// 함수의 선언식
function addNumbers1 (num1, num2) {
    return num1 + num2
};
console.log(addNumbers1(3, 5)); // 8

// 함수의 표현식
let addNumbers2 = function (num1, num2) {
    return num1 + num2
};
console.log(addNumbers2(2, 8)); // 10

// 화살표 함수
let addNumbers3 = (num1, num2) => num1 + num2
console.log(addNumbers3(3, 6)); // 9

더 자유롭게 쓸 수 있도록 연습이 필요하다..

 

 

[참고]

https://www.javascripttutorial.net/es6/javascript-arrow-function/

https://velog.io/@ktg6360/TIL-008-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98%EC%99%80-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98

https://webclub.tistory.com/649

 

7. CSS - display

display 속성은 요소를 어떻게 보여줄지 설정할 수 있으며,  주로 4가지 속성값이 있다.

1) none: 보이지 않음

2) block: 블록 박스, 요소가 나온 후 줄바꿈 다음 요소는 줄바꿈 되며, width와 height를 지정할 수있다.

3) inline: 인라인 박스, 줄바꿈없이 다음 요소가 계속된다.

4) inline-block: 인라인-블록: 줄바꿈이 되지 않으며 width와 height를 지정할 수 있다.

 

 

[참고]

https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

https://blind513.tistory.com/396

 

8. .closest()

현재 요소에서 가장 가까운 조상 요소를 반환한다.

만약 조상 요소가 없다면 null을 반환한다.

 

예시 1)

- HTML

<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

- JavaScript

const el = document.getElementById("div-03");

// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">

// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">

// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">

// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>

예시 2)

- HTML

<div id = "hello">
  <div class ="hi">
    <div class ="me">
    </div>
  </div>
</div>

- JavaScript

let me = document.querySelector('.me');

let hi = me.closest('.hi');
let hello = me.closest('#hello');

console.log(hi); // <div class ="hi">, 변수 me의 조상 엘레먼트 중 클래스가 hi인 것을 찾는다는 의미
console.log(hello); // <div class ="me">, 변수 me의 조상 엘레먼트 중 ID가 hello인 것을 찾는다는 의미

 

[참고]

https://blind513.tistory.com/396

https://powerku.tistory.com/116