JS를 사용하여 첨가, 삭제, 수정 및 노드의 사본 등의 작동을 완료하십시오.

저자：Eve Cole 업데이트 시간：2025-03-13 14:00:04

요구 사항 : 노드의 추가, 삭제, 변경 및 복사 작업 완료

사용 된 방법 및 속성 :

1. 노드의 상위 노드를 가져옵니다

ParentNode 속성

2. 노드의 서브 노드 컬렉션을 가져옵니다

어린이 속성

3. 새 노드 생성

CreateTextNode (노드 텍스트 내용) 문서 개체의 메소드는 일부 브라우저의 호환성에 적합하지 않습니다.

CreateElement (객체) 문서 개체 : 다음과 같은 : document.createElement ( "a");

4. 노드의 객체에 속성 및 속성 값 추가

settattribute (속성, 속성 값);

5. 특정 노드 아래의 서브 노드를 교체하십시오

REPLACECHILD (새 노드, 원자 노드);

6. 노드에 노드를 추가하십시오

AppendChild (추가 할 노드)

7. Klong 특정 노드

Clonenode ()는 매개 변수를 실제 매개 변수로 전달하지 않으므로 클론의 노드에 하위 노드가 포함되어 있음을 나타냅니다.

다음과 같이 코드 코드를 복사하십시오.

<html>

<헤드>

<!-<link rel = "스타일 시트"유형 = "text/ css"href = "./ styles.css">->

<스타일 유형 = "텍스트/CSS">

div {

테두리 : 빨간색 1px 고체;

너비 : 200px;

높이 : 50px;

마진 : 20px 30px;

패딩 : 20px;

}

#div_1 {{

Clear : 둘 다;

배경색 :#FF3366;

}

#div_2 {{

Clear : 둘 다;

배경색 :#6699ff;

}

#div_3 {{

Clear : 둘 다;

배경색 :#CCCC99;

}

#div_4 {{

Clear : 둘 다;

배경색 :#00CC33;

}

</스타일>

// 메소드 추가 1 : 첫 번째 div 영역에 텍스트 추가

함수 addText () {

// 1. 텍스트 내용을 추가하려면 노드를 가져옵니다

var dig_1node = document.getElementById ( "div_1");

// 2. 텍스트 노드를 만듭니다. 문서 개체의 createTextNode 메소드. 일부 브라우저는 지원되지 않습니다.

var textNode = document.creatextNode ( "표시되지 않습니까?");

// 3. 추가 할 노드에 텍스트 노드 (서브 노드 인스턴스) 메소드에 텍스트 노드를 추가합니다.

div

}

// 메소드 추가 : 첫 번째 div 영역에 버튼을 추가합니다.

함수 addButton () {

// 1. 텍스트 내용을 추가하려면 노드를 가져옵니다

var dig_1node = document.getElementById ( "div_1");

// 2. 노드를 만듭니다. 문서 개체의 createElement ()

var anode = document.createElement ( "입력");

// 3. 지정된 개체에 속성 및 속성 값을 추가합니다.

//anode.setattribute 18 ", type", "button"); // 다음 코드의 효과와 동일합니다.

anode.type = "버튼";

anode.setattribute ( "value", "button");

anode.setattribute ( "onclick", "deletetext ( 'div_1')");

// 4. 추가 할 노드 아래에서 ApendChild (추가 할 서브 노드 인스턴스) 메소드에 텍스트 노드를 추가합니다.

div

}

// 메소드 삭제 방법 1 : 두 번째 영역에서 노드의 하위 노드 삭제

함수 deletetext (nodeid) {

// 1. 노드를 가져옵니다

var dignode = document.getElementById (nodeId);

// 2. 서브 노드, 즉 텍스트 노드 가져옵니다.

var chilenode = divnode.childnodes [0];

// 3. 삭제, 매개 변수 전달 true는 그 아래에서 모든 하위 노드를 삭제합니다.

//chilenode.removenode (); //이 방법은 Firefox 및 Google과 호환되지 않습니다.

divnode.removechild (Chilenode);

}

// 메소드 삭제 2 : 요소 삭제

함수 deleteelement () {

// 1. 노드를 가져옵니다

var dig_2node = document.getElementById ( "div_2");

// 2. 부모 노드를 가져 오면

var parentnode = div_2node;

// 3. 삭제

parentnode.removechild (div_2node);

}

// 개정하다

함수 updatetext () {

// 1 문자를 수정하려는 영역의 노드를 얻습니다.

var dig_3node = document.getElementById ( "div_3");

// 2. 첫 번째 단계에서 하위 노드 컬렉션을 가져 오면 수정할 노드를 지정합니다.

var childnode = div_3node.childnodes [0];

// 3. 텍스트 노드를 만듭니다

var newnode = document.creatextNode ( "하하, 나는 당신을 교체했습니다.");

// 4. 3 단계를 사용하여 2 단계에서 노드를 교체합니다.

//childnode.replaceNode (NewNode); //이 방법은 Firefox 및 Google과 호환되지 않습니다.

div

}

// 복제

함수 copynode () {

// 1. 네 번째 지역 노드를 얻습니다

var dig_1node = document.getElementById ( "div_1");

// 2. 첫 번째 영역 노드를 가져옵니다

var dig_4node = document.getElementById ( "div_4");

// 3. 클론의 네 번째 노드를 통해 새 노드를 가져옵니다.

var newnode = div

// 4. 3 단계의 새 노드를 교체하여 원래 첫 번째 노드를 제거합니다.

div

}

</스크립트>

</head>

<body>

<div id = "div_2"> 이것은 두 번째 영역입니다 </div>

<div id = "div_3"> 이것은 세 번째 영역입니다 </div>

<div id = "div_4"> 이것은 네 번째 영역입니다 </div>

<hr />

<입력 유형 = "버튼"value = "첫 번째 영역에 텍스트 추가"onclick = "addText ()" />

<입력 유형 = "버튼"value = "첫 번째 영역에 버튼 추가"onclick = "addButton ()" />

<hr />

<입력 유형 = "버튼"value = "두 번째 영역에서 텍스트 내용을 삭제하십시오.

<입력 유형 = "버튼"value = "두 번째 영역 삭제"onclick = "deleteElement ()" />

<hr />

<입력 유형 = "button"value = "세 번째 영역에서 내용을 수정하십시오."onclick = "updateText ()" /> />

<hr />

<입력 유형 = "버튼"value = "네 번째 영역을 첫 번째 영역으로 클로닝했습니다."onclick = "copynode ()" /> />

</body>

</html>