JS repl.it8

younghyun·2022년 2월 1일
0
post-thumbnail

DOM(수업 내용 정리)

  • DOM
    웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있음.
    HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할

    JavaScript는 document(전역객체)를 통해 DOM구조
    접근가능. document 객체는 HTML 문서 나타냄.
    ( JavaScript의 document 객체는 DOM 구조를 접근하는 관문 )

  • 왜 HTML을 접근해야 할까?
    개발자도구 시간에 함께 보았던 마켓컬리의 사이트를 보면 카테고리 목록을 HTML에 "육류, 채소 등등.." 직접 작성하지 않았음. API를 통해 서버에서 카테고리 목록의 데이터를 가져옴.



    document객체는 DOM트리의 root node에 접근하게 해줌. document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있음. 그렇게 class, id도 추가하고 style도 수정할 수 있음. 요소의 내용(content)는 innerHTML으로 접근하고 수정할 수 있음.

    document.body.innerHTML = '내용 다 바꿈';

    위는 body태그 내부에 있는 것을 '내용 다 바꿈'이라는 텍스트로 바꾼 것. body태그내에 엄청나게 많은 요소가 있더라도 innerHTML을 사용하면 내용이 전부 교체됨. 특정 element를 접근하고 싶을 때는 tag, class, id와 같은 css selector로 접근 가능.

    let blueElement = document.querySelector('.blue');
    blueElement.style.backgroundColor = 'blue';

    위와 같이 스타일도 수정할 수 있는데 css에서 사용했던 property 명과는 조금 달라보임. background-color대신 backgroundColor으로 접근한 것에 주목. JavaScript에서 style 수정할 때 hypen(-)은 사용할 수 없음. 객체(Object)에서 프로퍼티 이름에 hypen(-)을 사용할 수 없던 이유와 같음. 그러므로 style의 프로퍼티에 접근하고 싶을 때 camelCase로 바꾸시면 됨. element를 생성할 수도 있음.

.createElement (tagName) 함수를 사용하면 요소(element)를 만들 수 있음. 위의 함수는 요소를 만들기만 할 뿐, 아직 HTML의 어디에 들어가야 할지 지정해준 것이 아님. 만든 후에는 어딘가의 element에 append시켜줘야 함. innerHTML은 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여줌.

Document.querySelector() : 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환. 일치하는 요소가 없으면 null을 반환

Document.createElement() : 지정한 tagName의 HTML 요소를 만들어 반환

Element.className : 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있음.

Element.innerHTML : 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정함. 요소의 모든 자손 제거.

node.appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임.

getElementsByClassName(): 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection을 반환

getElementsByTagName() : 메서드는 제공된 태그 네임(tag name)을 가지는 엘리먼트의 유효한 HTML 컬랙션를 반환

Assignment
index.js에 아래의 내용을 구현해주세요.
p 태그를 생성하고 (hint: createElement),
해당 요소에 dom 이라는 class 이름을 주고 (hint: className)
해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint: innerHTML)
h1요소 내부에 추가 (hint: appendChild)
.title {
color: red;
}

function newElement () {
  const p = document.createElement("p");
  const h1 = document.querySelector("h1");

  p.className = "dom";
  p.innerHTML = "DOM";
  h1.appendChild(p);
}

newElement();
profile
선명한 기억보다 흐릿한 메모

0개의 댓글