본문 바로가기

DOM/기초

 (13)
DOM 복습하기 DOM이란? DOM은 Document Object Model의 약자로, HTML 요소를 Object처럼 조작할 수 있는 Model입니다. 즉, 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. DOM, 자바스크립트로 조작하기 createElement - CREATE querySelector, querySelectorAll - READ textContent, id, classList, setAttribute - UPDATE remove, removeChild, innerHTML = "" , textContent = "" - DELETE appendChild - APPEND innerHTML과 textContent의 차이 innerHTML은 문자열 내에 포함된 HTML 태그를 함께..
김버그 DOM 영상 정리 이글은 유튜버 김버그의 DOM 영상 시리즈를 보고 정리한 글입니다. #1 DOM 이란? 자바스크립트에게 HTML 이란, 문자열입니다. 그 이상 그 이하도 아닙니다. 보여주는 역할을 하는 건 HTML, CSS가 지배적인데 자바스크립트는 이 녀석들을 컨트롤합니다. 이 문자열인 HTML을 자바스크립트가 알아들을 수 있게 바꾸는 작업을 프로그래밍 언어에서는 'parse'라는 말을 많이 쓰는데, 문자를 의미있는 객체로 바꾸는걸 parsing이라고 하고... 뭘로 바꾸냐 하면 node로 바꾸는 것입니다. node는? 종류같은 것 이라고 생각하면 됩니다. 제일 중요한건 document, element 이고 돔은 문자일 뿐인 HTML를 의미있는 노드객체로 바꿔서 추가적인 기능을 할 수 있게 해줍니다. append, r..
모던 자바스크립트 DOM 탐색하기 이 글은 모던 자바스크립트 DOM 탐색하기 부분을 정리한 글입니다. DOM 탐색하기 DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다. 하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것을 먼저 실행해야 합니다. DOM에 수행하는 모든 연산은 document 객체에서 시작합니다. document 객체는 DOM에 접근하기 위한 '진입점'입니다. 진입점을 통과하면 어떤 노드에도 접근할 수 있습니다. 아래 그림은 DOM 노드 탐색이 어떤 관계를 통해 이루어지는지를 보여줍니다. 트리 상단의 documentElement와 body DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다. = document.documentElement..
textContent vs innerText vs innerHTML innerHTML, innerText, textContent 속성은 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 비슷합니다. 안녕하세요? 만나서 반가워요. 숨겨진 텍스트 textContent 노드 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다. 값은 문자열 또는 null 입니다. innetText와는 달리 나 태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽습니다. 노드가 document 또는 Doctype이면 null을 반환하고, 다른 노드 유형에 대해서는 주석과 처리 명령을 제외한 모든 자식 노드의 textContent를 병합한 결과를 반환합니다. 자식이 없는 경우 빈 문자열입니다. 노드의 textContent를 설정하면..
setAttribute setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법: element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. undefined를 리턴합니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. CODING FA..
querySelector Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. MDN에서 querySelector를 검색하여, 다음의 질문에 대해 학습합니다. querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까요? 제일 처음으로 검색되는 div를 반환하거나, div가 없다면 null을 반환합니다. querySelector를 통해서 더 복잡한 작업을 할 수 있을까요? 좀 더 복잡한 선택자 아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "user-panel main"인 () 안의, 이름이 "login"인 중 첫 번째 요소입니다. var el = doc..
offsetHeight, offsetWidth HTMLElement.offsetHeight 일반적으로 offsetHeight는 테두리, 패딩 및 가로 스크롤 막대 (렌더링 된 경우)를 포함하여 요소 CSS 높이의 픽셀 단위로 측정됩니다. ::before 또는 ::after 와 같은 유사 요소 높이는 포함되지 않습니다. 문서 본문 객체의 경우 측정에는 요소의 CSS 높이 대신 총 선형 내용 높이가 포함됩니다. 다른 선형 컨텐츠 아래로 확장되는 부동 요소는 무시됩니다. 요소가 숨겨져 있으면 (예를 들어, 요소 또는 해당 조상 중 하나에서 "none"으로 style.display를 설정 하여) 0이 리턴됩니다. 이 속성은 값을 정수로 반올림합니다. 위의 예제 이미지 는 창에 맞는 스크롤 막대와 offsetHeight 높이를 보여줍니다 . 그러나 스크롤 할..
같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? 이 질문은 트위터에 Max Koretskyi 라는 한 개발자가 올린 질문이었습니다. 이 HTML과 JavaScript로 appendChild 메소드를 사용하면, const span = document.querySelector(‘span’); const divB = document.querySelector(‘.b’); divB.appendChild(span); child span element가 어디로 갈까요? remain inside div A be cloned to div B be moved to div B 이 설문에서 div B로 클론된다는 답변이 48%로 가장 많았습니다. 하지만, 이 질문의 정답은 span이 new parent div B로 클론되지 않고 움직인다는 것이었습니다. 이 것은 appen..
반응형

티스토리툴바