node 객체( 관계, 노드의 종류, 값, 자식관리 ), Node <관계, 종류, 변경> API
node 객체
- 모든 DOM 객체는 Node 객체를 상속 받는다.
- 각 객체들간의 관계성을 부여하는 API가 존재한다.
Node 관계 API - 각각의 Node가 다른 Node와 연결된 정보를 보여준다.
Node.childNodes - 자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild - 첫번째 자식노드
Node.lastChild - 마지막 자식노드
Node.nextSibling - 다음형제 노드
Node.previousSibling - 이전 형제 노드
* Node 관계에서 눈에보이지 않는 공백이나 줄바꿈 문자도 자식으로 포함이 된다.
Node.contains() - ()안의 값이 해당 노드의 하위 노드인지를 가져온다 ( true 혹은 false )
Node.hasChildNodes() - 해당 노드에 자식노드들을 가져온다.
노드 종류 API - 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려준다.
Node.nodeType - node의 타입을 의미한다.
Node.nodeName - node의 이름( 태그명 의미한다 )
노드 값 API - Node 객체의 값을 제공한다.
Node.nodeValue
Node.textContent
노드 변경 API - Node 객체의 변경을 관리하는 API
Node.appendChild(child) - 노드의 마지막 자식으로 주어진 엘리먼트 추가
Node.insertBefore(newElement, referenceElement)
- appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 해당 인자값 앞에 엘리먼트가 추가된다.
( appendChild()와 insertBefore()의 기능을 알아보기 위한 간단한 코드이다.. )
( appendChild()를 이용하면 해당 노드의 마지막 자식으로 엘리먼트가 추가된다 )
( appendChild()와 동작방식은 같지만 두번째 인자에 엘리먼트를 주게 되면
해당 엘리먼트 앞에 엘리먼트가 추가된다.. )
Node.removeChild(child) - 노드 제거를 위해서 사용
( 삭제를 할때는 삭제 대상의 부모 노드도 알아야 하기 때문에 parentNode를 이용해준다 )
( removeChild()를 사용할때는 해당 노드의 부모를 알아야 그 자식을 지울수 있다.. )
( 'target'이라는 id값을 가진 태그를 객체로 만들어 체이닝 기법을 이용해 해당 부모노드에 접근하고
removeChild()를 이용해서 자식을 삭제 시켰다 )
Node.replaceChild(newChild, oldChild) - 노드를 바꾸기 위해 사용
* appendChild나 insertBefore를 이용하기 위해서는 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다.
( replaceChild()를 이용하면 해당 노드에 있는 자식을 새로운 자식으로 교체할 수 있다 )
( replace( new Child, old Child )와 같은 형식으로 사용하면되고 document 객체의 기능으로
새로운 엘리먼트를 만들어서 그 엘리먼트를 추가 시킬수도 있다 )
document.createElement(tagname) - 엘리먼트 노드를 추가한다.
document.createTextNode(data) - 텍스트 노드를 추가한다.
댓글