DOM 추가 및 삭제 및 교체

1762 단어
1. 원소를 만들 때 왜 원소를 이 페이지에 뒤에 써야 합니까?
 
요구 사항: div를 만들고, div에 10개의 span을 만듭니다.
var div = document.createElement("div");
//document.body.appendChild(div);


for(var i=0;i<10;i++){
    var span = document.creatElement("span");
        div.appendChild(span);
}
document.body.appendChild(div);

앞에서 스파를 만들면 바디,div 쓰기를 한 번 열어야 하기 때문에 효율이 너무 느리다.그러나 스핀이 메모리에 직접 쓰기 때문에 두 번 열면 한 번에 많은 효율을 절약할 수 있다.
먼저 용기를 만들고, 하위 요소를 부모 용기에 넣고, 마지막으로 부모 용기를 페이지에 놓는다.
 
바디 페이지에 꼭 써야 한다면조각 용기로.
//      :
var elem = document.createDocumentFragment();
for(var i =0;i<10;i++){
var div = document.creatElement("div");
}
document.body.appendChile(elem);

2. 요소 삭제 3부작
//요소를 삭제할 때는 먼저 이벤트를 삭제하고 요소를 삭제해야 한다.순수하게 삭제된 요소는 덤북에서만 삭제됐을 뿐 내용은 삭제되지 않았기 때문이다.요소를 삭제하려면
1단계:이벤트 삭제
 
2단계: 요소 삭제
 
3단계:원소를null로 설정
var div = document.createElement("div");
var span = document.createElement("span");
span.addEventListener("click",clickHandler);

div.appendChild(span);
document.body.appendChild(div);
function clickHandler(e){
    span.textContent="  ";
}
//          
span.removeEventListener("click",clickHandler);
//  onclick     ,        
//span.onclick=null

//    
div.removeChild(span);
span=null;

div.appendChild(span);
//   span     , null,          

3. 원소를 교체한다.
   .removeChild(   ,        )

4. 요소 복사:
   .cloneNode(deep)

deep은 깊이라는 뜻이다.
true: 은 깊이로 값을 부여하고 하위 요소와 내용을 함께 값을 부여하며 원본 요소의 속성을 복사합니다
false: 잠재적 복제입니다. 원본 요소와 속성을 복제합니다.
참고:
cloneNode를 사용하여 원소를 복사할 때 원소의 id를 수정해야 합니다.
  
 
 
 

좋은 웹페이지 즐겨찾기