728x90 java script26 1.11 Using removeChild() and replaceChild() to Remove and Replace Nodes 돔에서 노드를 지울려면 여러 과정을 거쳐야 한다. 우선 지움의 대상이 되는 노드를 선택한 후 parentNode를 사용해 그의 부모를 선택하고 지움의 대상이 되는 노드를 인자로 넘겨서 노드를 지운다. 1 2 var divA = document.getElementById('A'); divA.parentNode.removeChild(divA); cs replaceChild()의 경우 리시버 객체는 부모, 첫번째 인자는 새로운 노드, 두번째 인자는 바꿈의 대상이 되는 노드를 넘기면 된다. 1 2 3 4 var divA = document.getElementById('A'); var newSpan = document.createElement('span'); newSpan.textContent = 'Howdy';.. 2021. 8. 31. 1.10 Using appendChild() and insertBefore() to Add Node Objects to the DOM appendChild()와 insertBefore() 노드 메서드는 DOM 트리에 js 노드 객체를 추가할 수있게 해준다. appendChild() 메서드는 메서드를 호출 한 노드의 맨 마지막에 자식 노드를 하나 추가 한다. 만약 위치를 선택해 자식을 추가해야할 경우 insertBefore()를 사용하면 된다. insertBefore()는 두 개의 파라미터를 필요로 한다. 하나는 추가될 노드, 하나는 추가해야될 노드의 위치에 대한 레퍼런스 노드이다. 만약 insertBefore() 메서드에 두번째 파라미터를 사용하지 않을 경우 appendChild()처럼 동작 한다. 2021. 8. 29. 1.9 Extracting Parts of the DOM Tree as JavaScript Strings innserHTML, outerHTML, textContent는 돔에 생성하고 추가할 수 있을 뿐만 아니라 돔의 일부를 js 문자열로 읽어올 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Hi Dude ! console.log(document.getElementById('A').innerHTML); //logs 'Hi' console.log(document.getElementById('A').outerHTML); /* logs Hi */ /* notice that all text is returned even if it's in child element nodes (i.e., !) */ console.log(document.getElementById('B').textConte.. 2021. 8. 28. 1.8 Using JavaScript Strings to Create and Add Element and Text Nodes to the DOM innserHTML, outerHTML, textContent, insertAdjacentHTML 프로퍼티는 js 문자열을 사용해서 노드들을 돔에 생성, 추가할 수 있게 해준다. 1 2 3 4 5 6 7 8 9 10 11 //create a strong element and text node and add it to the DOM document.getElementById('A').innerHTML = 'Hi'; /* create a div element and text node to replace (notice span#B is replaced) */ document.getElementById('B').outerHTML = 'Whats Shaking' //create a text node and upd.. 2021. 8. 27. 이전 1 2 3 4 5 6 7 다음 728x90