코딩기록

DOM, html에서 script 태그 작성 위치와 DOM 본문

프론트

DOM, html에서 script 태그 작성 위치와 DOM

뽀짝코딩 2024. 7. 8. 12:42
728x90

검색과 탐색

*document.querySelector(선택자) - 선택자로 검색한 요소 하나를 반환.
검색 결과가 없으면 'null' 반환.

*document.querySelectorAll(선택자) - 선택자로 검색한 모든 요소를 NodeList 객체로 반환.
NodeList 객체는 유사배열이며 '.forEach()' 메소드만 사용 가능.
NodeList 객체는 'Array.from()' 메소드를 통해 배열로 변환 가능.

*document.getElementById(아이디)
HTML 'id' 속성(Attributes) 값으로 검색한 요소를 하나 반환.
검색 결과가 없으면 'null' 반환. 

* 노드.parentElement - 노드(요소, 주석, 텍스트)의 부모 요소를 반환. 
  
*요소.previousElementSibling - 요소의 이전 형제 요소를 반환.
*요소.nextElementSibling - 요소의 다음 형제 요소를 반환.

*요소.children - 요소의 모든 자식 요소를 반환.
*요소.firstElementChild - 요소의 첫 번째 자식 요소를 반환.
*요소.lastElementChild - 요소의 마지막 자식 요소를 반환.

 

 

 

생성과 조회 그리고 수정

*document.createElement(태그이름) - HTML 요소를 메모리상에 생성해 반환.
* document.body.append(createElement에 적은 태그이름) - 실제 화면에 출력.
*요소.prepend(노드1, 노드2, ...) - 하나 이상의 노드를 요소의 첫 번째 자식으로 삽입.
*요소.append(노드1, 노드2, ...) - 하나 이상의 노드를 요소의 마지막 자식으로 삽입.
*노드.appendChild(노드1) - 하나의 노드를 노드의 마지막 자식으로 삽입하고 삽입한 노드를 반환.
*요소.remove() - 요소를 제거.
*노드.contains(노드) - 주어진 노드가 대상 노드를 포함한(자신도 확인) 후손인지 확인. 즉, 자신과 후손- true / 조상- false .
*노드.textContent - 노드의 모든 텍스트를 확인(Get) 하거나  지정(Set덮어씀).
*요소innerHTML - 요소의 내부 HTML을 확인(Get)하거나 지정(Set덮어씀).
*요소.dataset - 요소의 `data- <div data-number="123">` 속성을 확인(Get)하거나 지정(Set덮어씀). 숫자도 문자로 변환되서 저장됨.
  숫자변환 : JSON.parse(문자) / Number(문자)
  찾을때: document.querySelector('[data-age').dataset.age

 

const users = [
  {name: 'nana', age: 10},
  {name: 'tom', age: 20},
  {name: 'jake', age: 30},
]
const userEls = users.map(user => {
  const divEl = document.createElement('div')
  divEl.textContent = user.name
  divEl.textContent = user.age
  return divEl
});
document.querySelector('.parent').append(...userEls);

console.Console(Number(document.querySelector('[data-age').dataset.age));

 

*요소.classlist -요소의 'class' 속성을 제어.
*요소.classList.add() - 값을 추가
*요소.classList.remove() - 값을 제거
*요소.classList.toggle() - 값을 토글 (있으면 제거 없으면 추가)
*요소.classList.contains() - 값을 확인

 

const el = document.querySelector('.child');

el.classList.add('active');
console.log(el.classList.contains('active'));

el.classList.remove('active');
console.log(el.classList.contains('active'));

el.addEventListener('click', () => {
  el.classList.toggle('active');
  console.log(el.classList.contains('active'));
})

 

*요소.getAttribute(속성) - 요소의 속성을 확인.
*요소.setAttribute(속성, 값) - 요소에 속성과 값을 지정.
*요소.hasAttribute(속성) - 요소에 속성 여부를 확인.
*요소.removeAttribute(속성) - 요소에서 속성을 제거.

 

 

크기와 좌표

*window.innerWidth - 화면(Viewport)의 너비.
*window.innerHeight - 화면의 높이.
*window.scrollX - 화면에서 스크롤된 X축의 위치. X축 - 수평 왼 -> 오
*window.screenY - 화면에서 스크롤된 Y축의 위치. Y축 - 수직 위 -> 아래

window.scrollTo(), 요소.scrollTo()
지정된 좌표로 대상을 스크롤.
대상.scrollTo(X좌표, Y좌표)
대상.scrollTo({
  left: X좌표,
  top: Y좌표,
  behavior: 'smooth'
});

 

*요소.offsetWidth - 테두리 선을 포함한 요소의 너비를 얻음.
*요소.offsetHeight - 테두리 선을 포함한 요소의 높이를 얻음.
*요소.clientWidth - 테두리 선을 제외한 요소의 너비를 얻음.
*요소.clientHeight - 테두리 선을 제외한 요소의 높이를 얻음.
*요소.scrollWidth - 테두리 선을 제외한 요소의 스크롤 영역 너비를 얻음.
*요소.scrollHeight - 테두리 선을 제외한 요소의 스크롤 영역 높이를 얻음.

 

 

HTML 마크업시 <script type="module" src="./app.js"></script>

를 head나 body 두군데 적을 수 있는데 차이가 있다.

비교: 주요 차이점

항목<head>에 작성<body> 끝에 작성

로드 시점 HTML 파싱 중단 HTML 파싱 후 실행
DOM 접근 가능성 DOM이 로드되기 전에 실행될 수 있음 DOM이 로드된 후 실행
권장 시점 DOM 조작이 필요 없는 초기 설정 코드 DOM 조작이 필요한 코드

 

 

여기서 또 중요한 키워드가 defer와 async 속성이다.

defer

스크립트를 <head>에 작성하되 로드 방식을 조정하고 싶다면, defer 속성을 사용.

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

특징

 

  • HTML 파싱이 끝난 뒤 스크립트를 실행.
  • 실행 순서를 보장.

 

async

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

특징

 

  • 스크립트 로드가 완료되면 즉시 실행.
  • 실행 순서는 보장되지 않음.

 

 

 

실제 사용 할땐~💫💫💫

DOM이 필요 없는 초기화 코드:

  • <head>에 스크립트를 작성하거나 async를 사용할 수 있다.
<head>
  <script src="analytics.js" async></script>
</head>

DOM을 조작하는 코드:

  • <body> 끝부분에 스크립트를 작성하거나, defer를 사용.
<body>
  <script src="script.js"></script>
</body>
 

또는:

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

요약

  • DOM 조작 필요: <body> 끝에 작성하거나 defer를 사용.
  • 초기화 작업: <head>에 작성하거나 async를 사용.
  • 일반적으로 추천: <body> 끝에 작성하거나 defer 속성을 사용하는 것이 안정적.

 

 

 

 

 

 

 

 

 

반응형
저작자표시 비영리 변경금지

'프론트' 카테고리의 다른 글

css) a태그border 설정시 border가 짧은 이유? a태그 링크 범위 늘리기-display: block; / a태그 영역넓히기  (0) 2024.08.28
js) 자주 쓰는 js 문법 모음 / 배열안 객체 관련 문법 모음  (0) 2024.08.23
JS) 객체지만 배열처럼 사용가능한 유사배열을 배열로 바꾸는 .from()  (0) 2024.07.06
JS) 생성자 new 없을때 붙여주는 에러핸들링 코드  (0) 2024.07.06
JS) .sort() 고차함수 - 문자열로 변경되는 sort를 보완해보자 ( 배열 오름차순, 내림차순 정렬)  (0) 2024.07.06
'프론트' Related Articles more
Comments