FEDev Story

https://goodmemory.tistory.com/117 [Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() [자바스크립트 / Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() 기본 형태 //CSS Selector를 통해 엘리먼트 구분하기 //해당 엘리먼트와 셀렉터가 같다면 true | 다르다면 false 반환 el.. goodmemory.tistory.com https://developer.mozilla.org/en-US/docs/Web/API/Element/matches Element.matches() - Web APIs | MDN The matches() method checks to see..

설명현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.문법var node = document.importNode(externalNode, deep); node문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null입니다.externalNode다른 문서에서 가져올 노드입니다.deep불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.Note: DOM4 스펙 (Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)에서 적용되어 있습니다)에서, deep은 선택적 인자입니다. 만약 해당 속성을..

HTML 요소는 속성(attribute)을 갖고 있으며, 자바스크립트로 이 속성을 액세스할 수 있다. /** * Accessing attributes */ el.setAttribute( "tabindex", "-1" ); if ( el.hasAttribute( "tabindex" ) ) {} el.getAttribute( "tabindex" ); el.removeAttribute( "tabindex" ); 요소의 속성은 HTML에서 정의되지만, 프로퍼티(property)는 DOM에서 정의된다. 이것이 약간의 차이를 만든다. 예를 들어, 속성과 프로퍼티(el.value)의 초기값이 같은 input 요소가 있다고 가정해보자. 사용자 또는 스크립트가 값을 변경하면 프로퍼티(property)는 영향을 받지만, ..

el.classList 스타일이 필요할 때 el.classList를 사용한다. www.jsfiddle.net/1m33vjcv/4/embed/ 위 예제에서 toggle 메서도는 두번째 인수로 전달되는 부울 값에 따라 지정된 클래스를 추가하거나 제거한다. 명시적 스타일 el.style 속성을 사용해 요소에 동적인 스타일 정보를 읽거나 설정할 수 있다. 또는 cssText를 사용해 스타일을 한번에 지정할 수 있다. www.jsfiddle.net/9n6Lp7b5/1/embed/ window.getComputedStyle window.getComputedStyle는 상속된(계산된) 스타일을 반환한다. /** * Getting computed styles */ var el = document.querySelecto..

동적으로 DOM 트리에 새로운 요소 삽입하기 - el.innerHTML로 HTML 생성 /** * Insert elements into DOM #2 */ var target = document.getElementById( "target" ); target.innerHTML = ""; - 노드 생성후 추가 var target = document.getElementById("target"), div = document.createElement("div"); target.appendChild(div); 문제점 el.innerHTML을 변경하거나 요소에 자식을 추가할 때마다 DOM 리플로가 발생한다. 리플로가 반복적으로 발생하면 애플리케이션이 느려진다. 이는 자원을 많이 소모하는 작업이다. 최적화 유사한 요소를..

DOM 탐색 방법 ID로 요소 검색 (document.getElementById) 태그 이름으로 검색 (document.getElementByTagName) CSS 선택자로 요소 검색 (document.querySelector) Lorem ipsum 선택자는 하나 이상의 타입(태그) 선택자와 클래스 선택자, ID 선택자, 속성 선택자 또는 의사 클래스 선택자로 매우 다양한 조합이 가능하기 때문에 자바스크립트에서 HTML 요소를 바인딩하는 것은 쉽지 않다. 따라서 data-* 속성 선택자를 사용할 것을 추천한다. Lorem ipsum 이 방법은 HTML 구조에서 자유로우며 CSS 클래스 독립적이기 때문에 안전하게 CSS를 리팩토링할 수 있다. 또한 문서마다 고유한 값을 가지는 ID에 한정되지도 않는다. q..

스크린의 크기는 모니터의 크기와 브라우저 뷰포트의 크기가 있다. 이를 알아내는 방법은 아래와 같다. (실행) window.inner*은 뷰포트의 크기를 나타내고, screen.*은 스크린의 크기, 즉, 모니터의 해상도를 나타낸다.

그럼 문서의 스크롤 값을 변경하는 것은 어떻게 하는 것일까? window.scrollTo(x, y)를 이용하면 된다. (실행) 아래 코드는 버튼을 클릭하면 문서의 스크롤을 아래로 1000px 이동시킨다. Coding

요소의 위치를 생각할 때는 사실 조금 더 복잡해진다. 문서가 브라우저의 크기보다 큰 경우는 스크롤이 만들어지는데 스크롤에 따라서 위치의 값이 달라지기 때문이다. 이를 이해하기 위해서는 우선 viewport에 대한 이해가 선행되어야 한다.viewport의 좌표위의 그림처럼 뷰포트는 문서의 내용 중 사용자에게 보여주는 영역을 의미한다. 이에 따라서 문서의 좌표가 있고 뷰포트의 좌표가 있다. 위에서 살펴본 getBoundingClientRect는 viewport의 좌표를 사용한다. 아래 예제를 실행해보면 1초에 한번씩 getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 출력된다. (실행) Coding 이를 통해서 알 수 있는 것은 getBoundingClientRe..

우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. (실행) Coding 화면에 표시된 모습은 아래와 같다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect이다. 이를 콘솔에서 실행한 결과는 아래와 같다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 된다는 것을 알 수 있다. getBoundingClientRect의 width 값을 IE는 제공하지 않는다.만약 엘리먼트가 중첩되어 있다면 어떻게 될까? 위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBou..

텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작과 관련된 API들의 목록이다.appendData() - 텍스트 노드의 끝에 파라미터로 전달된 데이타를 추가한다.deleteData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택해 삭제한다.insertData() - 텍스트 노드에서 첫번째 파라미터의 위치에 두번째 파라미터에 전달된 데이타를 삽입한다.replaceData() - 텍스트 노드에서 첫번째 파라미터에서 두번째 파라미터까지 텍스트를 선택해서 세번째 파라미터에 전달된 데이타로 교체한다.substringData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택..

텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 값을 가져오는 두개의 API를 알아본다.nodeValuedata html css JavaScript

소개텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world 실행결과: Hello world TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"} Hello world 주요기능값텍스트 노드의 값을 가져오는 APIdatanodeValue조작appendData()deleteData()insertData()replaceData()subStringData()생성docuemnt.createTextNode()

소개Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 주요 API노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.createElement()createTextNode()문서 정보 APItitleURLreferrerlastModified

innerHTMLinnerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS outerHTMLouterHTML은 선택한 엘리먼트를 포함해서 처리된다. innerText, outerTextinnerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. insertAdjacentHTML()좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다. target.insertAdjacentHTML('beforebegin', '...'); beforebegin은 target 노드의 앞에 두번째 인자인 H1 노드 객체를 삽입한다..

출처 : 생활코딩 (https://opentutorials.org/course/1375/6701) 노드 추가노드의 추가와 관련된 API들은 아래와 같다.appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.document.createElement(tagname) 엘리먼트 노드를 추가한다.document.createTextNode(data) 텍스트 노드를 추가..

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName node의 이름 (태그명을 의미한다.)nodeType노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. for(var name in Node){ console.log(name, Node[name]); } 실행결과: ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESS..

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.Node.childNodes 자식노드들을 유사배열에 담아서 리턴한다.Node.firstChild 첫번째 자식노드Node.lastChild 마지막 자식노드Node.nextSibling 다음 형제 노드Node.previousSibling 이전 형제 노드아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM

소개 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주로 사용하는 노드 객체는 다음과 같다. 문서 노드(Document) - 전체 문서를 가리키는 Document 객체 요소 노드(Element) - HTML 요소를 가리키는 객체 텍스트 노드(CharacterData) - 텍스트를 가리키는 객체 주요기능 Node 객체의 주요한 임무는 아래와 같다. 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.parentNode - 이 노드의 부모 노..

속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.Element.getAttribute(name)Element.setAttribute(name, value)Element.hasAttribute(name);Element.removeAttribute(name); opentutorials 속성과 프로퍼티모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. Hello world setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다. 하지만 전자는 attribute 방식(속..

조회 API는 엘리먼트를 조회하는 기능이다. 지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다. textContent는 엘리먼트 객체의 텍스트 컨텐츠를 담고 있는 프로퍼티다. html css JavaScript JavaScript Core DOM BOM var list = document.getElementsByClassName('marked'); consol..

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.Element.tagName해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다. document.getElementById('active').tagName Element.id문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id의 값을 읽고 변경하는 방법을 보여준다. var active = document.getElementById('active'); console.log(active.id); active.id = 'deactive'; console.log(act..

소개Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다.다른 객체들과의 관계DOM의 계층구조에서 Element 객체의 위치는 아래와 같다.주요기능식별자문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 APIEle..

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. HTMLCollection HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자. HTML CSS JavaScript 결과

출처 : 생활코딩 (https://opentutorials.org/course/1375/6665)HTMLElementgetElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 아래 코드는 getElement*의 리턴 값을 보여준다. HTML CSS JavaScript 실행결과: HTMLLIElement HTMLCollection 이것을 통해서 알 수 있는 것은 아래와 같다. document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : 리턴 데이터 타입은 HTM..

DOM을 깨우치다 (가치에 대한 완전한 이해)코디 린들리 저 안재우 역 비제이퍼블릭 2013.11.22.7.5 네티즌리뷰[3건] 20,000원 → 18,000원(-10%)소개 『DOM을 깨우치다』는 DOM 라이브러리 없이 문서 개체 모델에 대한 스크립트를 작성하여 HTML을 효율적으로 조작하는 방법을 소개한다. 최신 브라우저에 기본적으로 존재하는개념들과 코드를 사용하여 DOM 스크립트에서 JQUERY가 수행하고 있는 역할을 이해하고 오버헤드를 줄여하 하는 모바일 장치 등... 1장. 노드 개요 1.2 노드 개체 유형 모든 노드 유형과 그 값을 출력 1.3 Node 개체로부터 상속받은 하위 노드 개체 1.5 노드의 유형과 이름 식별하기 http://jsfiddle.net/domenlightenment/8E..