자바스크립트 학습노트(19) 노드 운영 구현 코드_기본지식

이 섹션에서 사용할 HTML 예제

코드 복사 코드는 다음과 같습니다.

< ;ul id ="myList">

프로젝트 1

프로젝트 2

프로젝트 3

1. 요소 노드 생성
document.createElement() 메서드는 요소를 생성하는 데 사용됩니다. 노드

코드 복사 코드는 다음과 같습니다.

var div = document.createElement("div") ; //div 요소 생성
div.id = "myDiv"; //div ID 설정
div.className = "box"; div의 클래스

요소를 생성한 후 문서 트리에 요소를 추가해야 합니다.

2. 요소 노드 추가
AppendChild() 메서드를 사용하여 childNodes 목록 끝에 노드를 추가하고 추가할 요소 노드를 반환합니다

코드 복사 코드는 다음과 같습니다.

var ul = document.getElementById("myList"); //ul 가져오기
var li = document.createElement("li") //li 만들기
li.innerHTML = " 항목 4"; //li에 텍스트 추가
ul.appendChild(li); / /ul 하위 노드 끝에 li 추가

추가 후:

코드 복사 코드는 다음과 같습니다.

;li>프로젝트 1

• 프로젝트 2


• 프로젝트 3


• 프로젝트 4
  

appendChild() 메소드를 추가할 수도 있습니다. 이미 존재하는 요소는 원래 위치에서 새 위치로 이동됩니다.

코드 복사 코드는 다음과 같습니다.

var ul = document.getElementById("myList") //Get ul
ul; .appendChild(ul.firstChild); //ul의 첫 번째 요소 노드를 ul 하위 노드의 끝으로 이동

실행 후(IE):

코드 복사 코드는 다음과 같습니다.

• Project Two
  
• 프로젝트 3


• 프로젝트 1



삽입( ) 방법, 마지막에 노드를 삽입하지 않고 특정 위치에 배치하려는 경우 이 방법을 사용하십시오. 이 방법은 2개의 매개변수를 허용하며 첫 번째는 삽입할 노드, 두 번째는 참조 노드, 추가할 요소 노드를 반환합니다

코드 복사 코드는 다음과 같습니다.

var ul = document.getElementById("myList"); //ul 가져오기

var li = document.createElement("li"); //li 만들기
li.innerHTML= "Item Four"; li
ul.insertBefore(li,ul.firstChild); //ul의 첫 번째 하위 노드 앞에 li을 추가합니다


추가 후:

코드 복사 코드는 다음과 같습니다.

4번 항목

항목 1


항목 2


프로젝트 3







코드 복사 코드는 다음과 같습니다. var ul = document.getElementById("myList"); //ul 가져오기
var li = document.createElement("li"); //li 만들기
li.innerHTML= "Item 4";
ul.insertBefore(li,ul.null); //ul의 하위 노드 끝에 li를 추가합니다


추가 후:

코드 복사 코드는 다음과 같습니다.




• 항목 1


• 항목 2


• 항목 3
;li>프로젝트 4






코드 복사 코드는 다음과 같습니다:
var ul = document.getElementById("myList"); //Get ul
var li = document.createElement("li") //li
li.innerHTML= "항목 4"; //li에 텍스트 추가
var lis = ul.getElementsByTagName("li") //ul에 있는 모든 li의 컬렉션 가져오기
ul.insertBefore(li, lis[ 1]); //ul의 두 번째 li 노드 앞에 li을 추가합니다.


추가 후:


코드 복사 코드는 다음과 같습니다.


• 프로젝트 1
항목 4

• 항목 2



3. 노드를 제거하는 데 사용되는 RemoveChild() 메서드는 제거할 노드인 매개 변수를 받아들이고 제거된 노드를 반환합니다. 제거된 노드는 여전히 문서에 있지만 해당 위치는 더 이상 문서에 없습니다.




코드 복사


코드는 다음과 같습니다. var ul = document.getElementById("myList") ; //ul 가져오기 var fromFirstChild = ul.removeChild(ul.firstChild); //ul의 첫 번째 하위 노드 1 제거 var ul = document.getElementById("myList") //Get ul var lis = ul.getElementsByTagName("li") //ul에 있는 모든 li의 컬렉션을 가져옵니다 ul.removeChild(lis[0]); //첫 번째 li를 제거합니다. 위와 다르게 다음을 고려해야 합니다. 브라우저 간의 차이점

4. 요소 노드 교체
replaceChild() 메서드는 노드를 교체하는 데 사용되며 두 개의 매개 변수를 허용합니다. 첫 번째 매개 변수는 노드를 삽입하는 것이고 두 번째 매개 변수는 삽입할 노드입니다. 교체, 교체된 노드 반환




코드 복사


코드는 다음과 같습니다. var ul = document.getElementById("myList"); //ul 가져오기 var fromFirstChild = ul.replaceChild(ul.firstChild); //ul의 첫 번째 하위 노드 1 교체 var ul = document .getElementById("myList"); //ul 가져오기 var li = document.createElement("li"); //li 만들기 li.innerHTML= "Item Four"; //li Text에 추가
var lis = ul. getElementsByTagName("li") //ul에 있는 모든 li의 컬렉션을 가져옵니다
var returnNode = ul.replaceChild(li,lis[1]) //원본을 생성된 li로 바꿉니다. 두 번째 li


5. 노드 복사
cloneNode() 메서드는 노드를 복사하는 데 사용되며 부울 매개변수를 허용합니다. true는 전체 복사(노드 및 모든 하위 노드 복사)를 의미하고 false는 얕은 복사(노드 복사)를 의미합니다. 자체, 하위 노드를 복사하지 마십시오)




코드 복사


코드는 다음과 같습니다. var ul = document.getElementById("myList"); //ul 가져오기 var deepList = ul.cloneNode(true); //딥 복사varshallowList = ul.cloneNode(false);
노드 운영 시 IE와 다른 브라우저의 차이점에 주의하시기 바랍니다. (18장에서 설명)