JavaScript 연구 노트(12) dom_basic 지식

Dom
createElement(), createTextNode(),appendChild(),removeChild(),replaceChild(),insertBefore(),createDocumentFragment()
//새 노드 만들기
function CreatNode() {
var oP = document.createElement("p");
oP.innerHTML = "Hello World!"
document.body.appendChild(oP)

//노드 삭제
function RemoveNode() {
var oP = document.getElementsByTagName("p");
var len = oP.length; if (len != 0 ) {
oP[len - 1].parentNode.removeChild(oP[len - 1]) //삭제하려면 노드의 parentNode 기능을 사용하는 것이 가장 좋습니다.
}
else {
alert(" 모두 삭제되었습니다! ");
}
}
//노드 교체
function 바꾸기Node() {
var oNewP = document.createElement("p");
oNewP.innerHTML = "
New -> Hello World!
"; //마지막으로 새로 추가된 노드를 oNewP로 교체 var len = document.getElementsByTagName("p") .length;
var oOldLastP = document.getElementsByTagName("p")[len - 1];
oOldLastP.parentNode.replaceChild(oNewP, oOldLastP)
//insertBefore() 메서드
두 가지 매개변수를 허용하여 새 메시지가 나타나도록 합니다.
1. 추가할 노드 2.
xxx.parentNode.insertBefore(newChild, oldChild); // createDocumentFragment() 메서드는
문서 조각을 생성합니다
는 생성된 10개의 새 노드 요소 중 일부를 문서 조각에 추가한 다음 이 조각을 매개변수로 AppendChild()
xxx에 전달할 수 있습니다. appendChild(oFragment);
이런 방식으로 xxx는 10번이 아닌 한 번만 호출되므로 성능이 향상됩니다.