[JavaScript/Browser] DOM | DOM 기초, DOM 다루기

Eunji Lee·2022년 11월 10일
Front-end BootcampJavaScriptToday I learnedbrowser
0

[TIL] JavaScript

목록 보기
12/22
post-thumbnail

오늘 느낀 점

  • 사실 오늘 미래에 대해 불안한 마음, 조급한 마음, 우울한 마음 등 부정적인 감정이 너무 overwhelming해서 그냥 다 때려치우고 싶었다..ㅎ
  • 그래서 한 30분 정도 쉬다가 쉬면서도 계속 잡생각이 들길래 ‘일단 뭐라도 해보자’하는 마음에 다시 컴퓨터 앞에 앉았다. (이것부터가 일단 나를 칭찬하고 싶음…하…)
  • 참 신기하게도, 또 뭔가를 하다보니까 어느새 부정적인 감정은 사라지고 다시 해야 할 일에 집중하고 있는 나를 볼 수 있었다.
  • 미래를 계획하는 것도 좋지만, 너무 계획에 몰두하다보면 현재 내가 해야하는 일에 집중하지 못하고 조급한 감정만 들게 되는 것 같다. 일어나지도 않은 일을 걱정하지 말고, 현재 주어진 일에 집중하자!



Chapter1. DOM 기초

1-1. DOM이란

  • DOM(Document Object Model): HTML요소를 JavaScript에서 Object처럼 조작할 수 있는 모델
    • HTML 구조가 JavaScript의 객체 구조와 같은 트리 구조이기 때문에 JavaScript의 DOM이 브라우저에 접근하기 가장 바람직함
  • document 객체를 통해 HTML(root document)에 접근함
    • cf) BOM(Browser Object Model)은 window 객체를 통해 브라우저에 접근함
  • DOM과 JavaScript의 관계
    • DOM은 웹 페이지를 스크립트(ex. JavaScript) 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 함
    • 이를 통해 HTML로 구성된 웹페이지를 동적으로 만들 수 있음
      웹페이지가 TV라면,
       JavaScript는 TV 채널 변경, 볼륨 조절 같은 동작
      * DOM은 동작(JavaScript)과 TV(웹페이지)를 연결해주는 리모콘

1-2. HTML에 JavaScript 적용하기

script 태그 이용하기

웹브라우저에서의 script 태그 작동 원리

  • Parsing: analyzing and converting a program into an internal format that a runtime environment can actually run, for example the JavaScript engine inside browsers
  • 웹 브라우저가 작성된 코드를 해석하는 과정(HTML parsing)에서 <script>요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춤(HTML parsing paused)
    • HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행함(Script fetch)
    • 이 때, <script> 요소는 등장과 함께 실행됨

<script> 태그의 위치는 <head> 와 <body> 중 어디가 좋을까?
정리해서 추후 포스팅하기


DOM의 구조

트리 구조(Tree Structure)

부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 구조

(출처: https://www.w3schools.com/js/js_htmldom.asp)

DOM 구조 조회하기

  • console.dir : DOM을 객체의 모습으로 출력하기
  • document : 자바스크립트에서 DOM은 document객체에 구현되어 있음
    • 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document객체를 조회할 수 있음
  • document.body : document에서 body 조회하기
    • element.children : element의 자식요소 조회하기
    • Node.parentElement: Node의 부모요소 조회하기


Chapter2. DOM 다루기

CREATE

HTML Element를 추가하기

  • document.createElement(tagName)
  • 새로운 Element를 생성만 했을 뿐, 부모 노드에 포함하지 않았기 때문에 실제 웹 페이지 상에서는 확인할 수 없음
document.createElement('div') //새로운 <div>요소 만들기
const tweetDiv = document.createElement('div') //새롭게 생성한 div element를 변수에 할당하기

APPEND

HTML Element를 부모 노드에 포함하기

  • document.append()
document.body.append(tweetDiv) //변수 tweetDiv에 담긴 <div>요소를 <body>요소에 append하기

HTML Element를 특정 부모 노드의 자식 노드로 추가하기

Node.appendChild(aChild)

// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙이기
var p = document.createElement("p");
document.body.appendChild(p);

Element.prepend(param1, param2, / … ,/ paramN)

요소의 첫 번째 자식 앞에 Node 또는 string을 삽입

let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]

Node.insertBefore(newNode, referenceNode)

  • 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입
    • 노드가 이미 부모를 가지고 있다면, 노드가 제거된 뒤에 새로운 위치에 삽입
<div id="parentElement">
   <span id="childElement">foo bar</span>
</div>

<script>
 <!--삽입할 새로운 노드 만들기-->
	var newNode = document.createElement("span");
	
<!--참조할 부모 노드 지정-->
	var parentDiv = document.getElementById("childElement").parentNode;
	var sp2 = document.getElementById("childElement");
	parentDiv.insertBefore(newNode, sp2);
</script>

Node.cloneNode(deep)

호출된 노드의 복제된 노드 생성

  • deep(optional)
    • 요소의 하위 요소까지 모두 복사하려면 true
    • 요소의 하위 요소를 제외하고 복사하려면 false
var p = document.getElementById("para1");
var p_prime = p.cloneNode(true);

READ

HTML Element를 조회하기
() 안에 들어가는 단어에는 반드시 ''(또는 "") 해주기

document.querySelector(selectors)

  • selectors
    • HTML 요소 (ex. “div”)
    • id (ex. “#tweetList”)
    • class (ex. .tweet)
  • 결과: 선택자에 해당하는 첫 번째 Element 객체, 결과가 없다면 null
//클래스명이 tweet인 HTML요소 조회하기
const oneTweet = document.querySelector('.tweet')

document.querySelectorAll(selectors)

  • 여러 개의 요소를 한 번에 가져오기
  • 결과
    • 지정한 셀렉터와 하나라도 일치하는 각 엘리먼트에 대한 하나의 Element를 포함하는 살아 있지 않은 NodeList
    • 일치하는 것이 없는 경우에는 비어 있는 NodeList
//클래스명이 tweet인 모든 HTML 요소를 유사 배열로 받아옴
const tweets = document.querySelectorAll('.tweet')

document.getElementsById(id)

특정 id인 요소 조회하기

//id가 password인 요소 조회하기
document.getElementsById('password');

document.getElementsByClassName(names)

특정 class이름을 가진 모든 요소 조회하기

//class이름이 test인 모든 요소 조회하기
document.getElementsByClassName('test')

document.getElementsByTagName(name)

특정 tag인 모든 요소 조회하기

//tag가 <div>인 모든 요소 조회하기
document.getElementsByTagName('div')

UPDATE

HTML Element를 변경하기

HTMLElement.innerText

요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타내기 → 사용자가 읽을 수 있는 텍스트를 나타낸다고 생각하면 됨

  • Syntax
const renderedText = htmlElement.innerText
htmlElement.innerText = string

Node.textContent

노드와 그 자손의 텍스트 콘텐츠를 표현하기→ script와 style 요소를 포함한 모든 요소의 콘텐츠

const oneDiv = document.createElement('div');
console.log(oneDiv) //<div></div>

oneDiv.textContent = 'dev';
console.log(oneDiv); // <div>dev</div> //<div>에 문자열 입력하기

oneDiv.classList.add('tweet');
console.log(oneDiv) //<div class="tweet">dev</div>

Element.innerHTML

  • 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정하기 → HTML을 반환함
  • 보안 이슈가 있을 수 있어 사용 지양하는 것이 좋음
  • Syntax
const content = element.innerHTML;
element.innerHTML = htmlString;

Element.setAttribute

  • 선택한 요소(element)의 속성(attribute) 값을 정하기
  • 이미 속성이 존재한다면 속성값을 업데이트하고, 속성이 존재하지 않는다면 새로운 속성과 속성값을 추가함
setAttribute('attribute name', 'attribute value')

//예시
li.setAttribute('id', 'main-heading') //list 속성에서 id 속성을 main-heading으로 설정

DELETE

HTML Element를 삭제하기

  • Element.remove()
const element = document.getElementById('div-02');
element.remove(); // 'div-02' id를 가진 div 삭제하기
profile
Eunji Lee
이전 포스트

[JavaScript] Koans | Spread Syntax, 구조 분해 할당

다음 포스트

[JavaScript/Browser] DOM | 이벤트(Event), 이벤트 핸들러(Event handler)

0개의 댓글