WEB JavaScript Node 객체

Develop My Life·2020년 6월 4일

TIL Web JavaScript

WEB JavaScript

목록 보기

9/9

Node 객체

Node 객체는 DOM에서 가장 상위에 있는 부모 객체이다.
Node의 메소드는 모든 element가 가지고 있다.

Node 관계 API

Node.childNodes
Node.firstChild
Node.lastChild
Node.nextSibling
Node.previousSibling
Node.contains()
Node.hasChildNodes()

주의할 점
element사이의 공백이나 줄바꿈도 child에 속하기 때문에 모두 검색된다.

Node 종류 API

Node.nodeType

nodeType 종류
ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12
DOCUMENT_POSITION_DISCONNECTED 1
DOCUMENT_POSITION_PRECEDING 2
DOCUMENT_POSITION_FOLLOWING 4
DOCUMENT_POSITION_CONTAINS 8
DOCUMENT_POSITION_CONTAINED_BY 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32

Node.nodeName

Node 추가 API

Node를 추가하기 위해서는 우선 document 객체의 기능을 이용하여 Element를 만들고 Text를 추가한 뒤 노드 추가를 해야한다.

document.createElement(tagname)
document.createTextNode(data)

Node 추가 API

appendChild(child)
insertBefore(newElement, referenceElement)

예시

<! DOCTYPE html>
<html>
<body>
    <ul id='target'>
        <li>Javascript</li>
    </ul>
</body>
<script>
    //appendChild
    var target = document.getElementById('target');
    var li = document.createElement('li');
    var text = document.createTextNode('append');
    li.appendChild(text);
    target.appendChild(li);
    
    //insertBefore
    var li = document.createElement('li');
    var text = document.createTextNode('insertBefore');
    li.appendChild(text);
    target.insertBefore(li,target.firstChild);
</script>
</html>

Node 제거 API

제거하려는 노드의 부모 노드에서
removechild(target)을 사용해야한다.

예시

<! DOCTYPE html>
<html>
<body>
    <ul>
        <li id='target'>Javascript</li>
    </ul>
</body>
<script>
    var target = document.getElementById('target');
    target.parentNode.removeChild(target);
</script>
</html>

Node 바꾸기 API

replaceChild(newChild, oldChild)

예시

<! DOCTYPE html>
<html>
<body>
    <ul>
        <li id='target'>Javascript</li>
        <li>CSS</li>
    </ul>
</body>
<script>
    var a = document.createElement('a');
    a.setAttribute('href','url');
    a.appendChild(document.createTextNode('google'));
    
    var target = document.getElementById('target');
    target.replaceChild(a,target.firstChild);
</script>
</html>

jQuery Node 제어 API

Node 추가 API

출처 : https://opentutorials.org/course/1375/6743

예시

<! DOCTYPE html>
<html>
<body>
    
    <div id='target'>Javascript</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#target').before('<div>before</div>');
    $('#target').prepend('<div>prepend</div>');
    $('#target').append('<div>append</div>');
    $('#target').after('<div>after</div>');
</script>
</html>

Node 제거 API

.remove( ) : 선택된 Element 제거
.empty( ) : 선택된 Element의 TextNode 제거

예시

<! DOCTYPE html>
<html>
<body>
    <div id='target1'>Javascript</div>
    <div id='target2'>HTML</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#target1').remove();
    $('#target2').empty();
</script>
</html>

Node 바꾸기 API

replacewith : 제어대상 먼저 지정 후 인자로 바꿀 내용 삽입
replaceall : 바꿀 내용 삽입 후 인자로 제어대상 지정

예시

<! DOCTYPE html>
<html>
<body>
    <div id='target1'>Javascript</div>
    <div id='target2'>HTML</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#target1').replaceWith('<div>replacewith</div>');
    $('<div>replaceall</div>').replaceAll('#target2');
</script>
</html>

Node 복사 API

.clone()

Node 이동 API

.append()

문자열로 Node 제어

innerHTML : 그 Element 자체를 읽고 쓰기 가능
outerHTML : 그 Element의 부모까지 읽고 쓰기 가능
innerText : 그 Element의 TextNode 읽고 쓰기 가능
outerText : 그 Element의 부모의 TextNode 읽고 쓰기 가능

삽입

insertAdjacentHTML(API , 내용)
-API
- beforebegin
- afterbegin
- beforeend
- afterend

예시

<! DOCTYPE html>
<html>
<body>
    <div id='target'>Javascript</div>
</body>
<script>
    var target = document.getElementById('target');
    target.insertAdjacentHTML('beforebegin','<div>beforebegin</div>');
    target.insertAdjacentHTML('afterbegin','<div>afterbegin</div>');
    target.insertAdjacentHTML('beforeend','<div>beforeend</div>');
    target.insertAdjacentHTML('afterend','<div>afterend</div>');
</script>
</html>