1. 노드 만들기
- createElement
createElement 메소드는 특정 태그 내에 포함된 새로운 요소 노드를 만들 때 사용. 새로 만들어진 요소를 반환.
reference = document.createElement( element )
이 메소드는 만들려고 하는 태그 명을 인수로 가진다.
var para = document.createElement( “p” );
일단 createElement로 만들어진 요소는 바로 문서 내에 추가할 수 있는 것이 아니다.
이것을 실제로 추가하려면 appendChild 나 insertBefore 메소드 혹은 replaceChild 등을 사용한다.
var para = document.createElement( “p” );
document.body.appendChild( para );
- createTextNode
createTextNode 메소드는 특정 텍스트를 포함하는 새 텍스트 노드를 만든다. 새로 만들어진 텍스트 노드를 반환.
reference = document.createTextNode( text )
이 메소드는 만들어질 텍스트 문자열을 인수로 가진다.
var msg = document.createTextNode( “Hello, JS World” );
createTextNode 도 createElement 와 마찬가지로 바로 문서 내에 추가할 수 있는 것이 아니다.
실제로 추가하려면 마찬가지의 방법을 사용한다.
2. 노드 복사
- cloneNode
cloneNode 메소드는 특정 노드를 복사할 수 있다. 새로 복사된 노드를 반환해 준다.
reference = node.cloneNode( deep )
이 메소드는 참이냐 거짓이냐 하는 불린 값을 인수로 가진다.
새로 만들어진 노드가 복사한 노드와 같은 형태를 띠고 있는지 여부를 확인하는 것이다.
reference = node.cloneNode( true )
reference = node.cloneNode( false )
인수의 값이 참이면 새로 만든 노드는 복사한 노드와 같은 자식을 갖는 것이다.
인수의 값이 거짓이면 자식 노드가 없다.
노드가 요소 노드인 경우 원래 요소 내 모든 텍스트 노드가 복사되지 않았다는 것으로 속성만 복사된 것이다.
3. 노드 추가
- appendChild
appendChild 메소드는 요소 노드에 새 자식 노드를 추가한다.
reference = element.appendChild( newChild )
새로운 자식 노드는 추가된 요소의 제일 마지막 자식 요소가 된다. 새로 추가된 노드를 반환하게 된다.
var para = document.createElement( “p” );
var msg = document.createTextNode( “Hello world” );
para.appendChild( msg );
새로 만든 요소를 작업하는 것처럼 appendChild는 문서 내에 있는 요소를 옮기는 데 사용할 수 있다.
- insertBefore
insertBefore 메소드는 특정 요소의 자식 노드 앞에 새로운 노드를 추가하는 데 주로 사용한다.
reference = element.insertBefore( newNode, targetNode )
새 노드인 newNode를 targetNode라는 노드 앞에 추가하게 된다.
targetNode는 요소의 자식 노드여야 한다.
targetNode가 정의되어 있지 않으면 newNode는 요소의 자식 노드 끝에 추가된다.
이 경우, appendChild와 똑같은 결과를 수행한다.
insertBefore 메소드는 문서 구조에 새 노드를 추가하기 위해 createElement와 createTextNode와 자주 사용된다.
추가하는 노드가 자식 노드를 가지고 있으면 이 자식 노드들도 targetNode의 앞에 함께 추가된다.
insertBefore는 새로 만든 노드를 추가하는 기능뿐 아니라 기존 노드를 문서 내에서 이동하는 기능도 수행한다.
4. 노드 삭제
- removeChild
removeChild는 특정 부모 노드에서 자식 노드를 제거하는 메소드.
reference = element.removeChild( node )
삭제한 노드를 반환해 준다.
또한 removeChild 를 통해 제거하면 노드에 포함된 모든 자식 노드도 함께 제거된다.
5. 노드 바꾸기
- replaceChild
replaceChild 메소드는 특정 부모 노드 아래 자식 노드를 다른 노드로 교체할 때 사용한다.
이미 문서 구조 내에 있는 노드에만 동작한다.
reference = element.replaceChild( newChild, oldchild )
여기서 oldChild 노드는 요소의 자식 노드여야 한다.
이 메소드는 변경된 노드를 반환해준다.
새 노드가 자식 노드를 가지고 있으면 모두 함께 추가된다.
6. 노드 값 변경
- setAttribute
setAttribute 메소드를 이용하면 특정 요소 노드의 기존 속성 값을 바꾸거나 새롭게 추가할 수 있다.
element.setAttribute( attributeName, attributeValue )
속성 이름과 속성 값은 문자열로 적으면 된다.
기존 요소에 속성이 이미 존재하면 새로운 값으로 변경되고, 없으면 새로운 속성이 추가된다.
문서 구조 안에 속해 있지 않은 요소에도 속성 노드를 추가할 수 있지만 요소 노드에만 사용할 수 있다.
setAttribute 는 속성 값을 얻어오는 getAttribute 와 함께 쓰인다.
7. 노드 찾기
- getAttribute
getAttribute 메소드는 지정 요소의 속성 노드의 이름에 해당하는 값을 찾아서 반환한다.
attributeValue = element.getAttribute( attributeName )
속성 이름은 문자열로 지정할 수 있고 속성 값 역시 문자열로 반환한다.
지정한 이름에 해당하는 속성 노드가 없을 경우, 빈 문자열이 반환된다.
- getElementById
getElementById 는 특정 id 속성을 가진 요소를 찾는데 사용하는 가장 일반적인 메소드.
element = document.getElementById( ID )
특정 id의 요소 노드를 반환한다.
요소가 없으면 빈 값(null)을 반환한다.
이미 만들어진 문서 객체만 사용할 수 있다.
getElementById 를 통해 반환된 요소 노드는 객체이며,
nodeName, nodeType, parentNode, childNodes 같은 프로퍼티를 모두 가지고 있다.
문서 내에서 id는 여러 개가 중복되어 선언되면 안되고 오로지 한 개만 있어야 한다.
만약 중복되는 여러 개의 id가 있으면 예측할 수 없는 방식으로 동작한다.
- getElementsByTagName
getElementsByTagName 메소드는 특정 태그 명에 해당하는 모든 요소들을 찾는다.
elements = document.getElementsByTagName( tagName )
이 메소드는 찾아낸 요소들을 목록 형태로 반환한다. 이 목록들을 배열로 사용할 수 있다.
배열 내에 있는 각 요소들은 객체이고,
nodeName, nodeType, parentNode, childNodes 같은 프로퍼티를 이용해 사용할 수 있다.
- hasChildNodes
hasChildNodes 는 특정 요소에 자식 노드가 있는지 여부를 확인하는데 사용하는 메소드.
booleanValue = element.hasChildNodes
결과는 true 또는 false 로 전달된다.
각 요소의 자식 노드가 있는지 여부만 확인해준다. 그 자체를 반환해주지는 않는다.
