전체 글 (127) 썸네일형 리스트형 모던 자바스크립트 DOM 탐색하기 이 글은 모던 자바스크립트 DOM 탐색하기 부분을 정리한 글입니다. DOM 탐색하기 DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다. 하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것을 먼저 실행해야 합니다. DOM에 수행하는 모든 연산은 document 객체에서 시작합니다. document 객체는 DOM에 접근하기 위한 '진입점'입니다. 진입점을 통과하면 어떤 노드에도 접근할 수 있습니다. 아래 그림은 DOM 노드 탐색이 어떤 관계를 통해 이루어지는지를 보여줍니다. 트리 상단의 documentElement와 body DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다. = document.documentElement.. TIL CSS 레이아웃/셀렉터 정리 grid와 flex 차이 flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다. Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다. 요약하자면, Grid : 수직 and 수평 Flex : 수직 or 수평 Tailwind CSS란? Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다. Tailwind의 장점: 클래스 이름을 짓는데 에너지를 낭비하지 않습니다. 무언가를 스타일링하기 위해 sidebar-inner-wrapper 같은 바보같은 이름을 추가하지 않고, 단지 유연한 컨테이.. 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.. DOM - 차이점 비교 Node와 Element Node는 태그 노드와 텍스트 노드 전체를 가리키고, DOM object 중 하나이다. Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(, 같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다. Element: HTML 태그 기준으로 부모, 자식으로 나눕니다. Node: 태그, 글 내용까지 포함시키고 부모, 자식으로 나눕니다. element는 node 타입 중 하나로 node가 element의 상위 개념입니다. Element는 Node의 자식입니다. children과 childNodes children: 텍스트 노드를 제외 합니다. element 속성을 지니고 있습니다. childNodes: 텍스트나 커멘트 노드와 같은 .. 이전 1 ··· 5 6 7 8 9 10 11 ··· 16 다음
