-
웹브라우저 자바스크립트 - 노드 변경 APIJavaScript/생활코딩 2018. 11. 28. 11:02
노드 변경 API - https://opentutorials.org/course/1375/6701
노드 변경 API는 노드추가, 기존노드제거, 노드변경하는 방법이 있다.
노드추가
노드 추가와 관련된 API들은 아래와 같다.
- appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가
- insertBefore(newElement, referenceElement) : appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.
위의 노드 추가 API를 사용하기 위해서는 엘리먼트를 생성해야 한다.
엘리먼트는 document 객체를 통해 생성할 수 있다.
- document.createElement(tagname) : 엘리먼트 노드를 추가한다.
- document.createTextNode(data) : 텍스트 노드를 추가한다.
ul태그안에 li태그를 추가하는 예제
<!DOCTYPE html>
<html>
<body>
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" /> <!--버튼 클릭시 onclick의 함수호출-->
<input type="button" onclick="callInsertBefore();" value="insertBefore()" /> <!--버튼 클릭시 onclick의 함수호출-->
<script>
function callAppendChild(){
var target = document.getElementById('target'); //ui의 id값을 통해 ui엘리먼트를 target에 담는다.
var li = document.createElement('li'); //li라는 엘리먼트 객체를 li변수에 담는다. 여기서는 <li></li>태그만 만든것이다.
var text = document.createTextNode('JavaScript'); //li사이에 들어가는 텍스트객체를 만들어줌.
li.appendChild(text); //li라는 노드객체가 가지고 있는 appendChild를 호출하면서 <li>JavaScript</li> 이렇게 결합된다.
target.appendChild(li); //ul엘리먼트의 자식으로 <li>JavaScript</li>이 제일 끝에 추가된다.
}
function callInsertBefore(){
var target = document.getElementById('target');
var li = document.createElement('li');
var text = document.createTextNode('jQuery');
li.appendChild(text);
target.insertBefore(li, target.firstChild); //ul엘리먼트의 firstChld의 앞쪽에 li엘리먼트를 추가한다.
}
</script>
</body>
</html>
[appendChild()버튼을 클릭했을 때 실행화면]
-> ul태그 중 맨 아래에 li태그가 추가됨.
[insertBefore()버튼을 클릭했을 때 실행화면]
-> ul태그 중 맨 위에 li태그가 추가됨.
노드제거
노드 제거에 사용되는 API는 removeChild(child) 이다.
아래는 li태그를 제어하는 예제이다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
function callRemoveChild(){
var target = document.getElementById('target'); //id가 target인 엘리먼트를 가져와서 target변수에 담는다.
target.parentNode.removeChild(target); //target은 li엘리먼트이기 때문에 parentNode를 통해 li엘리먼트의 부모노드인 ul엘리먼트를 부르고 ul엘리먼트에서 removeChild를 통해 노드를 삭제하는데 삭제할 값인 target을 참조값으로 넣어준다.
}
</script>
</body>
</html>
삭제하려는 대상도 알아야 하며 삭제하려는 대상의 부모노드도 알고 있어야 삭제가 가능하다.
노드바꾸기
노드 바꾸기에 사용되는 API는 replaceChild(newChild, oldChild) 이다.
아래는 li태그를 변경하는 예제이다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
function callReplaceChild(){
var a = document.createElement('a'); //a엘리먼트를 만든다.
a.setAttribute('href', 'http://opentutorials.org/module/904/6701'); //링크의 url을 만든다.
a.appendChild(document.createTextNode('Web browser JavaScript')); //a엘리먼트의 하위엘리먼트로 텍스트노드를 만든다.
var target = document.getElementById('target');
target.replaceChild(a,target.firstChild); //firstChild는 id가 target인 엘리먼트의 텍스트부분이다.
}
</script>
</body>
</html>
'JavaScript > 생활코딩' 카테고리의 다른 글
웹브라우저 자바스크립트 - Document 객체 (0) 2018.11.28 웹브라우저 자바스크립트 - 문자열로 노드 제어 (0) 2018.11.28 웹브라우저 자바스크립트 - 노드 종류 API (0) 2018.11.27 웹브라우저 자바스크립트 - Node 관계 API (0) 2018.11.27 웹브라우저 자바스크립트 - Node 객체 (0) 2018.11.27 댓글
