JavaScript DOM 학습 노트 5 ― 생 성 및 조작 노드

29363 단어 JavaScript dom 레저 만 들 기 삭제 수정 노드 삽입 avascript

이전에 DOM 의 각종 노드 에 대한 접근 방법 을 배 웠 는데 DOM 에 포 함 된 내용 은 이 뿐만 이 아니 라 DOM 프로 그래 밍 은 DOM 트 리 가 구 축 된 후에 노드 를 추가 하 는 것 도 포함한다.
   1. 새 노드 만 들 기
   document 대상 에는 여러 노드 를 만 드 는 방법 이 포함 되 어 있 습 니 다.에서 모든 방법의 원형, 역할, IE, Firefox, Opera, Safari 등 브 라 우 저의 지원 상황 을 설명 하 는 표를 전문 적 으로 설계 했다.한눈 에 보면 거의 모든 사람들 이 지 지 를 받 는 방법 이다.
   노드 를 만 드 는 가장 유용 한 방법 은 주로 CreateElement (), CreateTextNode () 가 있 습 니 다. 다음은 각각 학습 합 니 다.
   2.CreateElement()、CreateTextNode()、appendChild()
   현재 다음 과 같은 요구 사항 이 있 습 니 다. HTML 의 DOM 트 리 를 불 러 온 후에 < p > 요 소 를 추가 합 니 다. 요소 의 텍스트 내용 은 'A New Element' 입 니 다.원본 html 는 다음 과 같 습 니 다:


  
  
  
  
   
   
   
   <html> 
   
   
   
       <head> 
   
   
   
           <title>createElement() Demo</title> 
   
   
   
       </head> 
   
   
   
       <body> 
   
   
   
       </body> 
   
   
   
   </html>

이제 HTML 의 body 에 < p > A New Element < / p > 를 추가 하려 고 합 니 다.절 차 는 다음 과 같다.


  
  
  
  
   
   
   
   //   ：  p   
   
   
   
   var oP = document.createElement("p"); 
   
   
   
   //   ：       
   
   
   
   var oTxt = document.createTextNode("A New Element"); 
   
   
   
   //   ：       p          
   
   
   
   oP.appendChild(oTxt); 
   
   
   
   //   ： p     body        
   
   
   
   document.body.appendChild(oP);

추 가 된 효 과 를 표시 하기 위해 body 에 단 추 를 추가 하고 클릭 하 자마자 이 코드 를 실행 합 니 다.완전한 예 는 다음 과 같다.


  
  
  
  
   
   
   
   <html> 
   
   
   
       <head> 
   
   
   
           <title>createElement() Demo</title> 
   
   
   
           <script type="text/javascript"> 
   
   
   
               function createElementTest() { 
   
   
   
                   //   ：  p   
   
   
   
                   var oP = document.createElement("p"); 
   
   
   
                   //   ：       
   
   
   
                   var oTxt = document.createTextNode("A New Element"); 
   
   
   
                   //   ：       p          
   
   
   
                   oP.appendChild(oTxt); 
   
   
   
                   //   ： p     body        
   
   
   
                   document.body.appendChild(oP); 
   
   
   
               } 
   
   
   
           </script> 
   
   
   
       </head> 
   
   
   
       <body> 
   
   
   
           <input type="button" value="  " onclick="createElementTest()"/> 
   
   
   
       </body> 
   
   
   
   </html>

3. removeChild (), replace Child (), insert Before () 방법
노드 를 추가 할 수 있 으 니 자 연 스 럽 게 노드 도 삭제 할 수 있다.노드 를 삭제 하려 면 parentNode 의 removeChild () 방법 으로 노드 를 삭제 할 수 있 습 니 다.여전히 위의 예 로 공부한다.


  
  
  
  
   
   
   
   //   ：  p   
   
   
   
   var oP = document.body.getElementsByTagName("p").item(0); 
   
   
   
   //   ：  p       
   
   
   
   var pNode = oP.parentNode; 
   
   
   
   //   ：           
   
   
   
   pNode.removeChild(oP);

전체 코드 는 다음 과 같 습 니 다:


  
  
  
  
   
   
   
   <html> 
   
   
   
       <head> 
   
   
   
           <title>createElement() Demo</title> 
   
   
   
           <script type="text/javascript"> 
   
   
   
               function createElementTest() { 
   
   
   
                   //   ：  p   
   
   
   
                   var oP = document.createElement("p"); 
   
   
   
                   //   ：       
   
   
   
                   var oTxt = document.createTextNode("A New Element"); 
   
   
   
                   //   ：       p          
   
   
   
                   oP.appendChild(oTxt); 
   
   
   
                   //   ： p     body        
   
   
   
                   document.body.appendChild(oP); 
   
   
   
               } 
   
   
   
    
   
   
   
               function removeChildTest() { 
   
   
   
                   //   ：  p   
   
   
   
                   var oP = document.body.getElementsByTagName("p").item(0); 
   
   
   
                   //   ：  p       
   
   
   
                   var pNode = oP.parentNode; 
   
   
   
                   //   ：           
   
   
   
                   pNode.removeChild(oP); 
   
   
   
               } 
   
   
   
           </script> 
   
   
   
       </head> 
   
   
   
       <body> 
   
   
   
           <input type="button" value="  " onclick="createElementTest()"/> 
   
   
   
           <input type="button" value="  " onclick="removeChildTest()"/> 
   
   
   
       </body> 
   
   
   
   </html>

그 밖 에 우 리 는 노드 를 삭제 하지 않 고 노드 만 바 꿀 수 있다.물론 이것 도 교 체 된 노드 의 부모 노드 를 호출 하 는 방법 을 통 해 이 루어 져 야 한다.이제 p 요소 의 내용 을 Hello, World 로 바 꿉 시다!replace Child () 방법 은 두 가지 인자 가 있 습 니 다. 새 노드, 교체 노드 입 니 다.코드 는 다음 과 같 습 니 다:


  
  
  
  
   
   
   
   //   ：          
   
   
   
   var newTxt = document.createTextNode("Hello,World!"); 
   
   
   
   //   ：          
   
   
   
   var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0); 
   
   
   
   //   ：               
   
   
   
   var oP = document.body.getElementsByTagName("p").item(0); 
   
   
   
   //   ：       
   
   
   
   oP.replaceChild(newTxt,oldTxt);

텍스트 를 바 꾸 는 방법 을 실행 하기 위해 단 추 를 추가 합 니 다:


  
  
  
  
   
   
   
   <html> 
   
   
   
       <head> 
   
   
   
           <title>createElement() Demo</title> 
   
   
   
           <script type="text/javascript"> 
   
   
   
               function createElementTest() { 
   
   
   
                   //   ：  p   
   
   
   
                   var oP = document.createElement("p"); 
   
   
   
                   //   ：       
   
   
   
                   var oTxt = document.createTextNode("A New Element"); 
   
   
   
                   //   ：       p          
   
   
   
                   oP.appendChild(oTxt); 
   
   
   
                   //   ： p     body        
   
   
   
                   document.body.appendChild(oP); 
   
   
   
               } 
   
   
   
    
   
   
   
               function removeChildTest() { 
   
   
   
                   //   ：  p   
   
   
   
                   var oP = document.body.getElementsByTagName("p").item(0); 
   
   
   
                   //   ：  p       
   
   
   
                   var pNode = oP.parentNode; 
   
   
   
                   //   ：           
   
   
   
                   pNode.removeChild(oP); 
   
   
   
               } 
   
   
   
               function replaceChildTest() { 
   
   
   
                   //   ：          
   
   
   
                   var newTxt = document.createTextNode("Hello,World!"); 
   
   
   
                   //   ：          
   
   
   
                   var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0); 
   
   
   
                   //   ：               
   
   
   
                   var oP = document.body.getElementsByTagName("p").item(0); 
   
   
   
                   //   ：       
   
   
   
                   oP.replaceChild(newTxt,oldTxt); 
   
   
   
               } 
   
   
   
           </script> 
   
   
   
       </head> 
   
   
   
       <body> 
   
   
   
           <input type="button" value="  " onclick="createElementTest()"/> 
   
   
   
           <input type="button" value="  " onclick="removeChildTest()"/> 
   
   
   
           <input type="button" value="  " onclick="replaceChildTest()"/> 
   
   
   
       </body> 
   
   
   
   </html>

마지막 으로 우 리 는 한 노드 전에 다른 노드 를 삽입 할 수 있다.이것 이 바로 방법 insert Before () 의 역할 입 니 다.이 방법 도 두 가지 인자 가 있 습 니 다. 새 노드 와 어느 노드 에 꽂 기 전에.이 어 위의 예 를 들 어 우 리 는 첫 번 째 p 요소 전에 다른 p 요 소 를 삽입 하고 요소 의 텍스트 는 a new element 입 니 다.
코드 는 다음 과 같 습 니 다:


  
  
  
  
   
   
   
   var newNode = document.createElement("p"); 
   
   
   
   var newTxt = document.createTextNode("a new element"); 
   
   
   
   newNode.appendChild(newTxt); 
   
   
   
   var oldNode = document.body.getElementsByTagName("p")[0]; 
   
   
   
   var pNode = oldNode.parentNode; 
   
   
   
   pNode.insertBefore(newNode,oldNode);

전체 코드 는 다음 과 같 습 니 다:


  
  
  
  
   
   
   
   <html> 
   
   
   
       <head> 
   
   
   
           <title>createElement() Demo</title> 
   
   
   
           <script type="text/javascript"> 
   
   
   
               function createElementTest() { 
   
   
   
                   //   ：  p   
   
   
   
                   var oP = document.createElement("p"); 
   
   
   
                   //   ：       
   
   
   
                   var oTxt = document.createTextNode("A New Element"); 
   
   
   
                   //   ：       p          
   
   
   
                   oP.appendChild(oTxt); 
   
   
   
                   //   ： p     body        
   
   
   
                   document.body.appendChild(oP); 
   
   
   
               } 
   
   
   
    
   
   
   
               function removeChildTest() { 
   
   
   
                   //   ：  p   
   
   
   
                   var oP = document.body.getElementsByTagName("p").item(0); 
   
   
   
                   //   ：  p       
   
   
   
                   var pNode = oP.parentNode; 
   
   
   
                   //   ：           
   
   
   
                   pNode.removeChild(oP); 
   
   
   
               } 
   
   
   
               function replaceChildTest() { 
   
   
   
                   //   ：          
   
   
   
                   var newTxt = document.createTextNode("Hello,World!"); 
   
   
   
                   //   ：          
   
   
   
                   var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0); 
   
   
   
                   //   ：               
   
   
   
                   var oP = document.body.getElementsByTagName("p").item(0); 
   
   
   
                   //   ：       
   
   
   
                   oP.replaceChild(newTxt,oldTxt); 
   
   
   
               } 
   
   
   
               function insertBeforeTest() { 
   
   
   
                   var newNode = document.createElement("p"); 
   
   
   
                   var newTxt = document.createTextNode("a new element"); 
   
   
   
                   newNode.appendChild(newTxt); 
   
   
   
                   var oldNode = document.body.getElementsByTagName("p")[0]; 
   
   
   
                   var pNode = oldNode.parentNode; 
   
   
   
                   pNode.insertBefore(newNode,oldNode); 
   
   
   
               } 
   
   
   
           </script> 
   
   
   
       </head> 
   
   
   
       <body> 
   
   
   
           <input type="button" value="  " onclick="createElementTest()"/> 
   
   
   
           <input type="button" value="  " onclick="removeChildTest()"/> 
   
   
   
           <input type="button" value="  " onclick="replaceChildTest()"/> 
   
   
   
           <input type="button" value="  " onclick="insertBeforeTest()"/> 
   
   
   
       </body> 
   
   
   
   </html>

참고서 목록:

《 자 바스 크 립 트 고급 프로 그래 밍 》

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

C 언어 해석기 - 18 문법 분석(3)

React Router 및 Cannet GET가 나타날 때의 대응 및 원인

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다