Node 객체.
각각의 객체들에게 관계를 부여하는 API가 있다.
body 태그의 첫번째 자식
start.firstChild
는 줄바꿈이다.
<body>
< ... > 보통 이런 식.
그래서 #text가 출력된다. 놓치지 말것!
노드 타입.
1. Node 관계 API
Node.childNodes
자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild
첫번째 자식노드
Node.lastChild
마지막 자식노드
Node.nextSibling
다음 형제 노드
Node.previousSibling
이전 형제 노드
2. 노드 종류 API
노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 생긴다.
이런 경우에 사용할 수 있는 API
Node.nodeType
node의 타입을 의미한다.
- 각각의 숫자에 해당하는 이름들로 비교가 가능하다.
상수를 기억하기가 쉽지 않기 때문에 문자열로 바로 비교한다.
Node.nodeName
node의 이름 (태그명을 의미한다.)
타입보다 조금더 디테일한 정보.
=응용버전)재귀함수
3. 노드 변경 API
노드의 추가와 관련된 API들은 아래와 같다.
appendChild(child)
노드의 마지막 자식으로 주어진 엘리먼트 추가
insertBefore(newElement, referenceElement)
appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때
이것 앞에 엘리먼트가 추가된다.
노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데
것은 document 객체의 기능이다.
아래 API는 노드를 생성하는 API이다.
document.createElement(tagname)
엘리먼트 노드를 추가한다.
document.createTextNode(data)
텍스트 노드를 추가한다.
노드 제거를 위해서는 아래 API를 사용한다.
이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의하자.
removeChild(child)
노드 바꾸기에는 아래 API가 사용된다.
replaceChild(newChild, oldChild)
4. jQuery 로 노드 변경하기
추가 API
before
after
prepend
append
제거와 관련된 API는 remove와 empty가 있다.
remove는 선택된 엘리먼트를 제거하는 것이고
(text를 감싸고 있던 div까지 제거)
empty는 선택된 엘리먼트의 텍스트 노드를 제거하는 것이다.
text를 감싸고 있던 div는 남아있음.
교체
replaceAll 저에 대상을 인자로 전달
replaceWith 제어 대상을 먼저 지정
>>
$('<div>replaceAll</div>').replaceAll('#target1');
target1을 replaceAll 로
$('#target2').replaceWith('<div>replaceWith</div>');
target2를 replaceWith로
복사
.clone()
$('#source').clone().replaceAll('#target1');
$('#target2').replaceWith($('#source').clone());
그냥 복사하고 바꾸기를 하는 것
차이는 복사했기 때문에 원래 source는 바뀌지 않는다.
이동
추가의 API를 사용하면 된다
5. 문자열로 노드 제어
innerHTML :
alert(innerHTML) : 자신을 제외한 자식들을 보여준다.
text만 바꿔버린다
outerHTML :
alert(outerHTML) : 자기 자신을 포함한 전체를 보여준다.
다바꿔버린다.
innerText
: html코드 없이 text만 추출.
outerText
:
-말그대로- css가 중심이 되어
beforebegin
시작하기전에 cliend side
afterbegin
시작한 후에 html
beforeend
끝나기 전에 javascript
afterend
끝난 후에 sever side
결과
Client Side (큼)
- html
- css
- javascript
Sever Side
6. Document 개체
DOM의 시작점
문서 전체를 의미하는 노드.
TEXT 개체
NODE를 상속받는 개체
<p>생활코딩</p>
p태그를 Element
생활코딩 이란 글자는 TEXT 개체
Character Data 에 상속.
.nodeValue=" "라고 하면 TEXT개체가 담고 있는 문자가 바뀌게 된다.
생활코딩 이고잉님 감사합니다^^
-..-
'Dev.FrontEnd > JavaScript' 카테고리의 다른 글
| [일곱번째] JavaScript - Web Browser / 이벤트 I (0) | 2016.04.03 |
|---|---|
| [여섯번째] JavaScript - Web Browser / 문서의 기하학적 특성 (0) | 2016.04.03 |
| [네번째] JavaScript - Web Browser / jQuery (0) | 2016.04.02 |
| [세번째] JavaScript - Web Browser / DOM (0) | 2016.04.02 |
| [두번째] JavaScript - Web Browser / BOM (0) | 2016.04.02 |
