H O M E

값 API * 텍스트 노드의 값을 가져오는 API - 예제 html css JavaScript - 결과 html css JavaScript TextNode * 실제 데이터가 저장되는 객체이다. * 공백과 줄바꿈도 텍스트 노드에 포함된다.

Text 객체* 텍스트 노드에 관한 DOM 객체* 공백이나 줄바꿈도 Text 노드이다. - 기능* 값- data- nodeValue* 조작- appendData();- deletData();- insertData();- replaceData();- subStringData();* 생성- document.creatTextNode()

Document 객체 * 웹브라우저에서는 HTMLDocument 객체로 사용된다. * 문서 전체를 대표하는 객체이다. 노드 생성 API LINK( 변경 API에 정리 ) * creatElement() * creatTextNode() 문서 정보 API * title : 문서의 제목 * URL : 문서의 UTL * referrer : 문서가 어떤 site를 경유해서 현재에 도착했는지에 대한 정보 * lastModified : 마지막으로 수정한 날짜

☆ 이전보다 좀 더 편리한 방법! innerHTML* 문자열로 자식노드를 만들거나 자식노드의 값을 읽어오는 기능을 제공한다. - 예제 >실행 화면 링크실행 화면 링크실행 화면 링크실행 화면 링크

변경 API* 노드를 추가 / 제거 / 변경하는 API 1. 노드 추가* 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이는 document 객체의 기능이다. - 종류* appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가* insertBefore(newElement, referenceElement) : appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다. - document 노드 API* document.createElement(tagname) : 엘리먼트 노드를 추가한다.* document.createTextNode(data) : 텍스트 노드를 추가한다. HTML CSS - 결과 HTML CSS 2. ..

종류 API* 현재 선택된 노드가 어떤 노드인지 반환* 각각의 구성요소가 어떤 카테고리에 속하는 것인지 알려주는 식별자 - 종류* Node.nodeType : 노드의 타입을 의미한다* Node.nodeName : 노드의 이름(태그명)을 의미한다. -NodeType* 노드의 종류에 따라 정해진 상수가 존재한다.* 모든 노드의 종류와 그에 따른 값 출력 for(var name in Node){ document.write(' '+name+" = "+ Node[name]); }

관계 API* 엘리먼트는 서로 부모, 자식, 형제자매로 연결되어 있다. * 관계 API는 각각의 Node가 다른 Node와 연결된 정보를 반환해 문서를 탐색 할 수 있다. - 종류* Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.* Node.firstChild : 첫번째 자식노드* Node.lastChild : 마지막 자식노드* Node.nextSibling : 다음 형제 노드* Node.previousSibling : 이전 형제 노드 - 예제 html css JavaScript JavaScript Core DOM BOM - 결과

Node 객체* 모든 DOM 객체를 Node 객체를 상속받는다.

속성 방식 : setAttributte와 같은 것을 통해 접근var target = document.getElementById('target'); target.setAttribute('class', 'important');프로퍼티 방식 : 속성의 이름을 직접 사용해 접근var target = document.getElementById('target'); target.className = 'important'; * 프로퍼티 방식은 좀 더 간편하고 속도도 빠르지만 실제 HTML의 속성 이름과 다른 이름을 갖는 경우가 있다.* 속성과 프로퍼티의 값이 다를 수도 있다. - JavaScript의 이름 규칙classclassNamereadonlyreadOnlyrowspanrowSpancolspancolSpanuse..

속성 API * 속성 : HTML 만으론 부족한 부가적인 정보 * 속성을 제어하는 API 내 블로그 * Element.getAttribute(name) : 속성 값 반환 * Element.setAttribute(name, value) : 속성의 값을 설정 * Element.hasAttribute(name); : 속성의 존재 여부 확인 * Element.removeAttribute(name); : 속성을 제거. - 결과 내 블로그