Replies: 5 comments 5 replies
-
|
공유하고싶은 자료 & 개인적으로 정리한 블로그 등이 있다면 여기👇👇👇에 댓글로 공유해주세요 😆 |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
(꼭 관련있다고 할 순 없지만...) |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
@yhshin0 1. DOM 은 무엇인가요?DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다. 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. var paragraphs = document.getElementsByTagName("P");DOM 은 프로그래밍 언어는 아니며, DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. DOM 의 구현은 어떠한 언어에서도 가능하다. # Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");각각의 브라우저는 자신만의 방법으로 DOM 구현해서 브라우저마다 구현 사항이 다르다. 아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다.
2. querySelector와 getElementById 차이점은 무엇인가요?차이점은 getElementById가 querySelector보다 성능/지원 측면에서 더 좋다. 하지만, querySelector는 구체적인 ID를 가지고 있지 않은 HTML 태그에 대해서도 접근 가능하다. HTML Tag의 id를 통해 해당 원소를 반환한다. 해당 ID가 존재하지 않을때 NULL을 반환한다. element = document.getElementById(id);selector의 구체적인 그룹과 일치하는 document 내의 첫번째 원소를 반환한다. 해당 selector가 존재하지 않을 때 NULL을 반환한다. element = document.querySelector(selectors);예시) <form id="userForm">
<input id="username" type="text" value="Guilherme" />
</form>위 코드에 대해 username 요소를 얻고 싶고 이를 변수에 할당할때 각각의 경우는 아래와 같다.
var username = document.getElementById("username");
var username = document.querySelector("#userForm #username"); |
Beta Was this translation helpful? Give feedback.
-
1. DOMDOM은 HTML, XML 문서에 접근하기 위한 일종의 인터페이스이며, 계층화된 트리 구조로 이루어져 있습니다. 즉, HTML 문서를 파싱하여 나온 정보들을 노드 트리(node tree)라고 불리는 계층적 구조에 저장됩니다. 노드 트리는 최상위 레벨의 루트 노드부터 시작하여 가장 낮은 레벨의 텍스트 노드까지 뻗어 나갑니다.
이렇게 계층화된 HTML 모델은 자바스크립트를 사용하여 다음과 같이 조작할 수 있습니다.
노드의 종류HTML 문서를 구성하는 대표적인 노드의 종류는 다음과 같습니다.
노드 사이의 관계노드 트리의 모든 노드는 서로 계층적 관계를 가지며, 다음과 같이 부모, 자식, 형제 노드로 이루어집니다.
노드 간에는 다음과 같은 프로퍼티로 정의되며, 해당 프로퍼티를 사용하여 접근할 수 있습니다.
2. HTML 요소 선택자바스크립트에서는 HTML DOM을 사용하여 노드 트리의 모든 노드에 접근할 수 있습니다. 다음은 자주 사용되는 document 메소드입니다.
3. EventListener이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. document가 완전히 호출되었거나, HTML의 요소에 대해 마우스로 클릭을 하거나, 키보드의 특정 키를 누르는 등 이벤트가 발생했을 때 특정 객체 또는 요소에 이벤트 리스너를 등록할 수 있습니다. 이벤트 리스너를 등록하는 방법은 두가지 방법이 있습니다.
프로퍼티로 이벤트 리스너 등록요소의 프로퍼티로 이벤트 리스너를 등록하려면 자바스크립트 코드에서 프로퍼티로 등록하거나, HTML 태그의 속성으로 등록하는 방법이 있습니다. 먼저 자바스크립트 코드를 사용하는 방법은 다음과 같은 방법이 있습니다. window.onload = function() { // 이 함수는 HTML 문서가 로드될 때 실행됨.
var text = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함.
text.innerHTML = "HTML 문서가 로드되었습니다.";
}다음과 같이 HTML 태그의 속성으로 등록할 수도 있습니다. 단, 이 방식은 코드의 가독성이 안 좋아지며, 유지보수가 힘들어집니다. <p onclick="alert('문자열을 클릭했어요!')">이 문자열을 클릭해 보세요!</p>객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법자바스크립트의 addEventLister() 메소드를 사용하여 이벤트 리스너를 등록할 수 있습니다. 대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)addEventListener의 인자들은 다음과 같은 역할을 합니다.
다음은 예시입니다. var showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
showBtn.addEventListener("click", showText); // 선택한 요소에 click 이벤트 리스너를 등록함.
function showText() {
document.getElementById("text").innerHTML = "짜잔~!! 텍스트가 나타났어요!!";
}이벤트 리스너 삭제이벤트 리스너를 삭제하려면 removeEventListener() 메소드를 사용하면 됩니다. function clickBtn() {
btn.removeEventListener("mouseover", mouseoverBtn);
btn.removeEventListener("mouseout", mouseoutBtn);
document.getElementById("text").innerHTML = "이벤트 리스너가 삭제되었어요!";
}출처: http://tcpschool.com/javascript/js_dom_concept |
Beta Was this translation helpful? Give feedback.
-
|
와 넘 잘정리해주셨네요 |
Beta Was this translation helpful? Give feedback.
-
DOM 요소의 선택HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 합니다. 자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같습니다.
1. HTML 태그 이름(tag name)을 이용한 선택getElementsByTagName() 메소드는 HTML 태그 이름을 이용하여 HTML 요소를 선택합니다. 2. 아이디(id)를 이용한 선택getElementById() 메소드는 아이디를 이용하여 HTML 요소를 선택합니다. 자바스크립트에서 아이디(id)를 이용한 선택은 해당 아이디를 가지고 있는 요소 중에서 첫 번째 요소 단 하나만을 선택합니다. 따라서 여러 요소를 선택하고 싶을 때는 태그 이름이나 클래스와 같은 다른 방법을 사용해야 합니다. 3. 클래스(class)를 이용한 선택getElementsByClassName() 메소드는 클래스 이름을 이용하여 HTML 요소를 선택합니다. 4. name 속성(attribute)을 이용한 선택getElementByName() 메소드는 HTML 요소의 name 속성(예를 들면 getElementById와의 차이점이라면 getElementById(아이디)로 가져오면 단일값을 가져오고 getElementsByName(이름)은 해당 이름으로 된 객체를 모두 배열로 받아올 수 있다는 점이다. 5. CSS 선택자(selector)를 이용한 선택querySelectorAll() 메소드는 CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소를 선택합니다. 6. HTML 객체 집합(object collection)을 이용한 선택HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택할 수 있습니다. DOM 조작시 유의할 점(Live Collection vs Static Collection)만약에 위 HTML코드에서 여러 가지 방법이 있겠지만 가장 흔하게 사용되는 방법은 아래와 같다.
콘솔 창에 출력해보면 원하던대로 li 요소들을 잘 가져오는 것을 확인할 수 있다. 또한 querySelectorAll()을 이용하여 가져 온 li 요소들은 NodeList라는 이름의 객체로 반환된다.
이번에는 다른 방법으로 li 요소에 접근했는 데, 부모 요소인 ul의 children 속성을 사용하여 탐색하였다. 이 경우에도 아까와 똑같이 li 요소를 출력하였으나, 콘솔 창을 잘 보면 NodeList가 아닌 HTMLCollection이 반환된 것을 확인할 수 있다. NodeListNodeList는 element.childNodes와 같은 속성이나 document.querySelectorAll()과 같은 메소드에 의해 반환되는 Node Collection이다. NodeList는 마치 Array와 비슷하게 생겼지만 배열과는 다르다. 우리는 배열과 같은 형태를 하고 있지만 배열이 아닌 객체들을 유사 배열이라고 부른다. NodeList는 배열이 아니기 때문에 배열에 사용 가능한 메소드를 대부분 사용할 수 없다. 그렇기 때문에 NodeList에 배열 메소드를 사용하기 위해서는 NodeList를 실제 배열로 변환하는 등의 방법을 사용해야 한다. (최신 브라우저에서는 NodeList에 forEach()와 같은 메소드를 지원하고 있다.) 중요한 점은 대개의 경우 NodeList는 라이브(Live) 콜렉션으로 DOM의 변경 사항을 실시간으로 반영한다. 그러나 document.querySelectorAll() 메소드에 의해 반환되는 NodeList는 정적(Static) 콜렉션으로 DOM의 변경 사항이 실시간으로 반영되지 않는다. HTMLCollectionHTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션을 나타내며 NodeList와 마찬가지로 유사 배열이다. HTMLCollection은 현대적인 DOM의 이전 세대부터 존재하던 구성요소로 element.children과 같은 속성 또는 document.getElementsByClassName(), document.getElementsByTagName()과 같은 메소드에 의해 반환된다. HTMLCollection은 모두 문서가 바뀔 때 실시간으로 업데이트되는 라이브(Live) 콜렉션이다. 출처: http://tcpschool.com/javascript/js_dom_element |
Beta Was this translation helpful? Give feedback.
-
1. DOM(문서객체모델)은 정확히 무엇일까?DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 웹 페이지는 어떻게 만들어질까?웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 “Critical Rendering Path”라고 합니다.이 단계들을 대략 두 단계로 나눌 수 있습니다. 첫 번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정합니다. 그리고 두 번째 단계에서 브라우저는 해당 렌더링을 수행합니다.
첫 번째 과정을 거치면 “렌더 트리”가 생성됩니다.
DOM은 어떻게 생성될까 (그리고 어떻게 보여질까)?DOM은 원본 HTML 문서의 객체 기반 표현 방식입니다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점입니다. 아래 HTML 문서는
주의할 점위 예제 혹은 DevTools에서 DOM은 마치 HTML 문서와 1 대 1 매핑이 되는 것처럼 보입니다. 그러나 둘 간에는 몇 가지 차이점이 있습니다. (1) DOM은 HTML이 아닙니다.DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않습니다. DOM이 원본 HTML 소스와 다를 수 있는 두 가지 케이스가 있습니다. 작성된 HTML 문서가 유효하지 않을 때 문서에 유효한 HTML 규칙의 필수 사항인 자바스크립트에 의해 DOM이 수정될 때 (2) DOM은 브라우저에서 보이는 것이 아닙니다.브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합입니다. 렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과 다릅니다. DOM은 그러나 렌더 트리에 해당하는 뷰 포트에 표시되는 내용은 (3) DOM은 개발도구에서 보이는 것이 아닙니다.개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공합니다. 그러나 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함합니다. 요약정리DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
출처
유용한 링크
|
Beta Was this translation helpful? Give feedback.
-
주제 키워드는
✨DOM✨
입니다.
☘️ 하위 주제 키워드
⏳스레드에 각 페어당 소요시간 적어주세요!
(ex) holee 90분 소요
참고링크
Beta Was this translation helpful? Give feedback.
All reactions