웹개발 복습 정리 19 : DOM

Kimhojin_Zeno·2023년 1월 11일
DOMclassListgetElementByIdquerySelector문서 객체 모델
0

웹개발 복습 정리

목록 보기
19/30

강의 섹션 24: DOM

DOM

document object model

문서 객체 모델

dom은 웹페이지를 구성하는 자바스크립트 객체들의 집합.

dom은 자바스크립트를 통해 웹 페이지의 콘텐츠로 접근하는 창이자 통로이다.

HTML과 Javascript를 같이 쓸수 있다.

웹페이지의 콘텐츠들을 자바스크립트를 통해 상호작용 할수있다.

웹페이지의 다양한 동작들은 자바스크립트로 구현된다.

자바스크립트로 html과 css를 다룰 수 있다. 켜고 끄거나 크기를 바꾸거나 하는 등.

브라우저가 웹 페이지를 띄울 때 html과 css 정보를 받아들인 다음 요소와 스타일을 기반으로 javascript 객체를 생성한다.

<body>
	<h1>Hello!</h1>
	<ul>
		<li>Water Plants</li>
		<li>Get Some Sleep</li>
	</ul>
</body>

각 태그들은 요소 하나 하나에 고유의 JavaScript객체가 생성된다.

객체마다 고유의 타입을 나타내는 특성을 갖는다.

최상위 body보다 위에 있는 것은 document.

크롬 개발자도구에서

console.dir(document);

를 치면 문서 객체 구조를 출력할 수 있다.

html이 아닌 javascript 객체가 나온다.

document는 문서 객체 모델 내 다른 것처럼 하나의 객체이다.

브라우저에서 자동으로 생성된다. 새로운 페이지를 열 때마다 해당 페이지의 콘텐츠를 이용한 문서 객체 모델이 생성된다.

즉 페이지의 콘텐츠를 나타내는 객체의 모음집.

클릭이나 드래그에 반응하는 메서드와 특성도 포함되어 있고 css 스타일을 바꾸거나 요소를 숨기거나 나타낼수도 있다. 모든 객체가 모여 document안에 표현된다.

getElementById

문서 객체에는 많은 메서드가 있다.

요소 선택을 도와주는 메서드

  • getElementById
  • getElementByTagName
  • getElementByClassName

getElementById에 문자열을 전달하면 일치하는 id를 가진 요소를 찾아 나타낸다.

const ban = document.getElementById('banner'); 
// banner라는 id를 가진 요소를 찾아서 ban이라고 선언.

자바스크립트를 통해 일치하는 id를 가진 요소를 페이지에서 찾아서 객체로 가져오라고 하는 것.

html이 아니다. html이 아닌 문서 객체 모델의 객체를 찾는 것.

텍스트나 html, css가 아닌 문서 객체 모델의 객체를 선택하는 것.

getElementByTagName

const allImage = document.getElementByTagName('img');
//img태그를 가진 모든 요소를 allImage라는 변수에 할당.

for(let a of allImage) {

}
//배열은 아니지만 위처럼 반복문으로 돌릴수도 있다.

메서드로 반환되는 것은 HTML Collection이고

각각의 요소는 Element이다. Element는 반환되는 객체에 해당하는데

하나의 HTML 요소를 나타내는 모든 특성을 지닌 객체이다.

getElementByClassName

클래스로 선택한다.

const allImage = document.getElementByClassName('square');
//square라는 클래스네임을 가진 모든 요소를 allImage라는 변수에 할당.

querySelector

document.querySelector('h1');
//Finds first h1 element

document.querySelector('#red');
//Finds first element with ID of red

document.querySelector('.big');
//Finds first element with class of

태그, id, class 모두 다 가능하다.

맨 첫번째를 찾지만

document.querySelector('img:nth-of-type(2)')

이렇게하면 두번째 것을 찾을 수도 있다.

document.querySelector('a[title="java"]')

-> <a href="/wiki/Java" title="Java">java</a>

이렇게 속성을 통해서 특정할수도 있다.

타입과 속성으로 찾은 것이다.

querySelectorAll

일치하는 첫 번째 요소 대신에 일치하는 모든 요소를 반환한다.

document.querySelectorAll('p');
//p태그를 넣으면 일치하는 모든 문단을 찾아준다.

document.querySelectorAll('p a');
// p태그의 자손 선택자 a태그를 전부 찾아준다.

document.querySelectorAll('p')[1];
// p태그 중 두번째. [인덱스] 이렇게 접근할수도 있음.

전부 다 선택해서 반복문 돌리거나 할수있음.

const links = document.querySelectorAll('p a');
for(let link of links) {
	console.log(link.href)
}
//링크의 주소를 전부 나타낸다

Dom Manipulate

dom조작

html 과 css에 액세스해서 항목을 이동하거나 재지어하거나 스타일을 업데이트하거나 나타내거나 안보이게 하는 등의 기능을 한다.

properties & methods

  • getAttribute()
  • setAttribute()
  • append()
  • appendChild()
  • prepend()
  • removeChild()
  • remove()
  • createElement
  • innterText
  • textContent
  • innerHTML
  • parentElement
  • nextSibling
  • previousSibling

굉장히 많다.

javascript기본문법과는 다르다. 하지만 정확히 다외우기보단 필요할때 검색해서 쓸 수 있으면 된다.

전부 외우거나 완벽하게 이해하려고 할 필요는 없음. 양이 너무 많기 때문.

innerText

해당 요소 안에 있는 텍스트.

const title = document.querySelector('h1')

title.innerText
//태그 사이의 텍스트가 나옴.

title.innerText = 'title Change'
//이렇게 해당 내용을 바꿀수도 있다.

객체의 모든 특성과 같은 값도 검색할 수 있다.

텍스트만. 태그나 숨겨진 항목은 무시함.

textContent

요소 안에 있는 모든 요소를 반환한다.

innerText랑 비슷한데 다르다. innerText는 딱 텍스트만 보여준다. bold 요소 같은것 등은 나오지 않음. html 마크업이 있는 자리를 비워두고 나오는 것.

textContent는 다 나온다.

innerHTML

특정 요소에 포함된 마크업의 전체 내용을 출력한다.

때로는 텍스트일수도 있고 링크의 주소 등이 다 나오기도 한다.

이탤릭체, bold도 다 나온다.

유일하게 innerHTML만 요소를 다른 요소 안에 추가할 때 쓸 수 있다.

document.querySelector('h1').innerHTML += '<sup>asjdsa</sup>'

이렇게 하면 기존에 있던 태그 위에다 윗첨자를 추가할 수 있다. 태그가 텍스트가 아닌 태그로 적용됨.

Attribute

속성

요소에는 다양한 속성들이 있다. 앵커 태그의 href, 이미지 출처가 그것.

ID나 클래스도 속성으로 간주된다.

인풋의 타입 등도 속성에 해당.

속성에 액세스 하는 방법과 속성을 사용하는 방법

document.querySelector('#banner')
// id가 banner인 요소에 액세스

document.querySelector('#banner').src
// 해당 요소의 이미지 소스

document.querySelector('#banner').title
// 요소의 title

document.querySelector('#banner').href
// 요소의 주소

getAttribute()

const ban = document.querySelector('#banner')

ban.href
// 요소의 연결된 주소

ban.getAttribute('href')
//이렇게 할 수도 있다.

차이점도 있다. .href로 하면 Javascript를 통해 가져온 값이고

getAttribute는 html자체에서 가져온다.

setAttribute

속성에 액세스해서 해당 값을 바꿀수도 있다.

const ban = document.querySelector('#banner')

ban.setAttribute('href', 'http://www.google.com')
//href값을 구글주소로 바꿈

style 변경

dom을 조작하여 CSS를 조작할 수 있다.

다만 이것은 CSS파일이 아닌 마크업에 인라인으로 들어간 것을 조작하는 것이라 그리 추천되지 않는다.

const h1 = document.querySelector('h1');

h1.style
-> ... // 엄청나게 큰 객체에 스타일에 대한 CSS특성들이 다 들어 있다.

h1.style.border = '2px solid pink'
// h1의 border를 2픽셀 실선 핑크로 만든다.

CSS문법과 다른점은 하이픈을 쓰지 않고 카멜케이스로 되어있음.
CSS: font-size, style객체: fontSize

또 해당 값들은 전부 문자열로 저장됨. 20px → ‘20px’

그러나 이것들은 인라인만 보기 때문에 제대로 파악이 안된다.

요소의 현재 스타일을 알고 싶으면

window.getComputedStyle(h1)

로 알수 있다.

이러면 선택자가 아닌 Dom에 있는 실제 요소 객체를 전달해서 알수있다.

ClassList

위처럼 하는거보다 css클래스를 만들어서 클래스에 스타일을 적용하는 방식이 인라인보다 훨씬 낫다.

요소의 클래스를 제어하고 검색하고 조작하기 위해 호출되는 객체

const h2 = document.querySelector('h2')

h2.classList

h2.classList.add('purple')
//purple이라는 클래스 추가

h2.classList.remove('purple')
// purple 클래스 제거

h2.classList.toggle('purple')
// 토글해서 해당 클래스를 추가하거나 제거할수

요소에 현재 클래스를 적용하는 손쉬운 방법. 클래스를 조작할수 있다

h2.getAttribute에 class를 쓰는 방법보다 훨씬 쉽다

text decoration의 색상이나 글꼴 크기 등을 직접 바꾸는 게 더 쉽게 보이지만
한 번에 해야 한다면 그냥 클래스를 만든 후에 그 CSS 클래스에 필요한 작업을 하고

필요할 때마다 해당 클래스를 적용하거나 제거하는 게 가장 쉬운 방법이다.

계층이동

해당 요소의 부모 요소들을 볼 수 있다.

const firstBold = document.querySelector('b')

firstBold
-> <b>silkie</b>

firstBold.parentElement // 위 요소의 부모 요소
-> <p>...</p>

firstBold.parentElement.parentElement // 위 위 요소
-> <body>...</body>

해당 요소의 자식 요소들을 볼 수 있다

const firstBold = document.querySelector('b')

firstBold.children
-> HTMLCollection (8) [ b,b,a,a,a]  
// 자녀 요소가 여러개 이므로 객체로 나온다

firstBold.children[0] // 자식 요소 중 첫번째를 선택.
-> <b>...</b>

nextSibling, previousSibling

요소의 인접한 형제 요소로 이동할 수 있게 해줌

const squareImg = document.querySelector('.square')

squareImg.parentElement
-> <body>...</body>

squareImg.nextSibling
-> #text //텍스트로된 노드가 나온다. html요소가 아닌 dom노드.

squareImg.nextElementSibling
-> <img class='square' src="..." alt> // 태그가 나온다.

Append, AppendChild

createElement

새 요소를 만들어서 페이지 앞이나 뒤에 추가할 수 있다.

노드를 추가함.

새 dom 요소를 만들려면 

const newImg = document.creteElement('img')
//태그 이름을 넣어주면 된다.

document.body.appendChild(newImg)
//body 안에newImg를 넣는다. 마지막 자식으로 추가하는 것.

append

자식 요소가 아닌 여러 용도로 사용 가능. 노드가 아닌 텍스트만 추가도 가능.

const p = document.querySelector('p')

p.append('i am new text')
// 이렇게 하면 문단 맨 끝에  텍스트 추가된다.

insertAdjacentElement

이 메서드를 사용하면 삽입할 위치를 지정해줘야 한다.

remove, removeChild

요소를 삭제할 수 있다.

const b = document.querySelector('b')

b.parentElement.removeChild(b)
//b를 지우려면 parent로 올라가서 자식 요소b를 지운다. 이렇게 복잡하다.

b.remove();
// remove를 쓰면 이렇게 쉽게 b를 지울 수 있다.

remove는 제거하려는 바로 그 요소에 호출하는 메서드

profile
Kimhojin_Zeno
Developer
이전 포스트

웹개발 복습 정리 18: Spread, 구조 분해

다음 포스트

웹개발 복습 정리 20 : DOM 이벤트

0개의 댓글