김철용 기록소

노드의 값 변경 nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있다. 또한, setAttribute() 메소드는 속성 노드의 속성값을 변경할 수 있게 해준다. 요소 노드의 텍스트 요소 노드는 자신이 직접 텍스트값을 가지진 않는다. 요소 노드의 텍스트는 요소 노드의 자식 노드인 텍스트 노드에 저장된다. 따라서 요소 노드의 텍스트값을 확인하거나 변경하고 싶을 때는 요소 노드에 포함된 텍스트 노드에 접근해야 한다. setAttribute() setAttribute() 메소드는 속성값을 변경하려는 속성이 존재하지 않으면, 먼저 해당 속성을 생성한 후에 속성값을 설정한다. 속성 노드의 값 변경 속성 노드의 값을 변경하고 싶어 속성 변경 요소 노드의 교체 replaceChild() 메소드를 사용..

노드의 추가 다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있다. 1. appendChild() 2. insertBefore() 3. insertData() appendChild() appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가한다. appendChild() 메소드 JavaScript HTML CSS JQuery 노드 추가 insertBefore() 메소드 insertBefore() 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가한다. insertBefore() 메소드 JavaScript HTML CSS JQuery 노드 추가 insertData() 메소드 insertDate() 메소드는 텍스트 노드의 텍스트 데이터에 새로운 데이터..

노드 리스트는 getElementsByTagName() 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체이다. 이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다. 노드 리스트의 텍스트 노드 ul 요소 다음의 텍스트 첫 번째 아이템첫 번째 li 요소 다음의 텍스트 두 번째 아이템두 번째 li 요소 다음의 텍스트 세 번째 아이템세 번째 li 요소 다음의 텍스트 HTML DOM에서 각 요소 노드 다음에는 별도의 텍스트 노드가 존재한다. 따라서 아이디가 'list'인 요소의 자식 노드 리스트의 첫 번째 자식 노드에는 아이디가 'list'인 요소 다음에 존재하는 텍스트 노드가 저장된다. TCP School의 강의 내용을 정리한 포스트입니다. http://www...

HTML 문서에서 HTML DOM 노드에 접근하는 방법은 다음과 같다. 1. getElementsByTagName() 메소드를 이용하는 방법 2. 노드 간의 관계를 이용하는 방법 getElementsByTagName() 메소드를 이용하는 방법 https://cheolyong.tistory.com/295 [TCP School/자바스크립트] 문서 객체 모델(DOM) - DOM 요소 DOM 요소의 선택 HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야 한다. 자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같다. 1. HTML 태그 이름을 이용한 선택 2. 아이디를 이용 cheolyong.tistory.com 링크 참조 노드 간의 관계를 이용하는 방법 HTML DOM에서 노드 간의 관계는..

HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 한다. HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장된다. 노드 트리는 최상위 레벨인 루트 노드로부터 시작하며, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다. 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드의 종류 HTML 문서의 모든 것은 노드이다. HTML 문서를 구성하는 대표적인 노드는 다음과 같다. 노드 설명 문서 노드(document node) HTML 문서 전체를 나타내는 노드 요소 노드(element node) 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수..

DOM 요소의 선택 HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야 한다. 자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같다. 1. HTML 태그 이름을 이용한 선택 2. 아이디를 이용한 선택 3. 클래스를 이용한 선택 4. name 속성을 이용한 선택 5. css 선택자를 이용한 선택 6. HTML 객체 집합을 이용한 선택 HTML 태그 이름을 이용한 선택 getElementsbyTagName() 메소드는 HTML 태그 이름을 이용하여 HTML 요소를 선택한다. HTLM 태그 이름을 이용한 선택 첫 번째 아이템 두 번째 아이템 세 번째 아이템 네 번째 아이템 아이디를 이용한 선택 getElementById() 메소드는 아이디를 이용하여 HTML 요소를 선택한다. 아이디를 이용..

Document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. Document 메소드 Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다. - HTML 요소의 선택 - HTML 요소의 생성 - HTML 이벤트 핸들러 추가 - HTML 객체의 선택 HTML 요소의 선택 HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같다. 메소드 설명 document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택함 document.getElementById(아이디) 해당 아이디의 요소를 선택함 document.getElementsByClassNa..

문서 객체 모델 이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 모델이며, 다음과 같이 계층 구조로 표현된다. DOM의 종류 W3C DOM 표준은 세 가지 모델로 분류된다. 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서 타입을 위한 DOM 모델 3. XML DOM : XML 문서 타입을 위한 DOM 모델 TCP School의 강의 내용을 정리한 포스트입니다. http://www.tcpschool.com/javascript/intro 코딩교육 ..

Array 메소드는 Array 객체에 정의된 배열과 관련된 작업을 할 때 사용하는 메소드이다. 1. Array.isArray() 2. Array.from() 3. Array.of() Array.isArray() Array.isArray() 메소드는 전달받은 값이 Array 객체인지 아닌지를 검사한다. Array.isArray([]); // true Array.isArray(123); // false Array.isArray('Array'); // false Array.from() ECMAScript 6부터 추가된 Array.from() 메소드는 다음 객체들을 배열처럼 변환시켜 준다. 1. 배열과 비슷한 객체 : length 프로퍼티와 인덱스 된 요소를 가지고 있는 객체 2. 반복할 수 있는 객체 : Ma..