「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 7. DOM

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다.
웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다.

DOM(Document Object Model)

DOM은 문서 객체 모델의 약자로, 문서인 웹페이지를 자바스크립트 등의 프로그래밍 언어로 다룰 수 있도록 객체화한 것입니다. 브라우저가 자동으로 생성하며, 웹페이지를 구성하는 javascript 객체의 집합이라 할 수 있습니다.

한 마디로, javascript를 이용해 웹 페이지를 다룰 수 있게 됩니다.

DOM을 이용하는 메서드를 알아봅시다.

요소 선택

getElementBytId

ID값을 기반으로 요소를 선택합니다.

getElementsByTagName

Tag를 기반으로 요소를 선택합니다.

getElementsByClassName

Class를 기반으로 요소를 선택합니다.

Id, Tag, Class 별로 따로 구문이 존재하니 번거롭습니다.

이를 위해 querySelector가 존재합니다.

querySelector

첫번째로 일치하는 요소를 반환합니다.

document.querySelector(’h1’)
document.querySelector('#banner')
document.querySelector('img:nth-of-type(2)')
//선택자를 추가해서 2번째 img 요소 반환

querySelectorAll

일치하는 모든 요소를 반환합니다.

내용 변경

innerText

선택한 요소이 담고 있는 값을 선택하여 변경할 수 있습니다.

이 때 요소의 렌더링 된 텍스트 콘텐츠만 반환합니다. CSS로 숨겨진 요소의 경우에는 가져오지 않습니다.

또한 브라우저에 따라 공백을 조정하거 줄바꿈이 일어나는 등 정규화를 거칩니다.

document.querySelector('p').innerText = ' asdfasfd'
//첫 번쨰 p 요소의 내용을 asdfasfd로 변경한다.

TextContent

요소의 모든 텍스트 콘텐츠를 반환합니다. 숨겨진 요소의 경우에도 텍스트를 가져옵니다. 텍스트를 그대로 반환하며 정규화를 거치지 않습니다.

innerHTML

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

Attribute

<a> 태그의 href나 ID, Class, <input> 태그의 type 등을 속성이라고 합니다.

getAttribute

속성을 HTML 자체에서 가져옵니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <a href="https://google.com">google</h1>
</body>

</html>

var1.href처럼 직접 속성에 접근할 수도 있지만, 이럴 경우 자바스크립트를 거쳐 동작합니다.

결과가 살짝 다른 것을 확인할 수 있습니다.

setAttribute

속성을 변경합니다.

스타일 변경

element.style 메서드를 이용해 디자인을 변경할 수 있습니다.

DOM의 타일 객체에는 CSS에서 지정한 스타일이 포함되지 않습니다.

무슨 소리냐 하면, HTML과 CSS 파일이 다음과 같다고 합시다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Hello</h1>
</body>

</html>

h1 {
  color: aqua;
}

페이지를 열면 빈 화면에 아쿠아색 Hello가 출력될 것입니다. 이 페이지에서 콘솔창을 열어 h1.style.color 속성을 확인하면

스타일이 지정되어 있음에도 빈 문자열로 나옵니다. 여러 스타일이 겹치면서 충돌하게 되면 우선순위를 고려해야 하는데, 이를 위해 모든 항목이 다 로드되고 계산될 때까지 기다려야 합니다. window.getComputedStyle()은 계산된 결과를 반환해줍니다.

classList

setAttribute로 속성을 변경하면 기존 값을 묻힙니다. classList를 사용하면 add로 속성을 추가하고, remove로 삭제할 수있습니다.

parentElement, children

부모(상위) 요소, 자식(하위) 요소에 접근합니다.

nextSibling, previousSibling, nextElementSibling, previousElementSibling

같은 레벨의 형제 요소에 접근합니다.

Element가 붙은 녀석은 해당 요소의 실제 값을 불러오는 반면, 없는 녀석은 텍스트를 나타내는 노드를 반환합니다.

DOM 요소의 생성과 제거

document.createElement()

요소를 단순히 생성합니다. 속성을 변경하고 페이지에 추가하는 작업은 따로 해야 합니다.

document.<위치>.appendChild()

body, head 등 원하는 부분의 가장 마지막에 요소를 추가합니다.

append()

노드가 아닌 텍스트도 추가할 수 있고, 여러 개의 요소를 추가할 수 있습니다.

prepend()

해당 부분 가장 앞쪽에 추가합니다.

insertAdjacentElement()

하위 수준이 아닌 동일한 수준으로 요소를 추가합니다.

removeChild()

자식 요소를 제거하므로, 부모 요소에 접근 후 사용해야 합니다.

remove()

제거하려는 요소에 바로 접근하여 삭제합니다.

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

'프로그래밍 > Javascript' 카테고리의 다른 글

「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 6. 전개(spread)와 분해 (0)	2023.07.17
「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 5. 콜백(callback) (0)	2023.07.11
「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 4. 함수 (0)	2023.07.09
「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 3. 데이터 구조(배열, 객체, 반복) (0)	2023.07.06
「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 2. 출력, 참과 거짓(truthy and falsy) (0)	2023.07.05