js를 사용하여 node_javascript 기술 추가, 삭제, 수정, 복사 등의 작업을 완료하세요.-JS 튜토리얼-php.cn

집

js를 사용하여 node_javascript 기술 추가, 삭제, 수정, 복사 등의 작업을 완료하세요.

May 16, 2016 pm 05:05 PM

요구 사항: 노드 추가, 삭제, 수정 및 복사 작업 완료

사용된 방법 및 속성:
1. 특정 노드의 상위 노드 가져오기
parentNode 속성
을 가져옵니다. 특정 노드의 상위 노드 하위 노드 컬렉션
childNodes 속성
3. 새 노드 생성
createTextNode(노드 텍스트 콘텐츠) 문서 개체의 메서드가 일부 브라우저와 잘 호환되지 않습니다
createElement(객체) 문서 객체의 메소드(예: document.createElement("a")
4. 노드 객체에 속성 및 속성 값을 추가합니다.
setAttribute(attribute, attribute value); 예: aNode.setAttribute("href" ,"http://www.baidu.com");
5. 특정 노드 아래의 하위 노드를 교체합니다.
replaceChild(새 노드, 원자 노드); >6. 노드
appendChild(추가할 노드)
에 노드를 추가합니다.

cloneNode()를 전달하는 것은 true를 전달하는 것과 같습니다. 노드 복제에 하위 노드가 포함됨을 의미하는 매개변수

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

 
<!DOCTYPE html> 
<html> 
<head> 
<title>node_CURD.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<style type="text/css"> 
div{ 
border: red 1px solid; 
width: 200px; 
height: 50px; 
margin: 20px 30px; 
padding: 20px; 
} 
#div_1{ 
clear:both; 
background-color:#FF3366; 
} 
#div_2{ 
clear:both; 
background-color:#6699FF; 
} 
#div_3{ 
clear:both; 
background-color:#CCCC99; 
} 
#div_4{ 
clear:both; 
background-color:#00CC33; 
} 
</style> 
<script type="text/javascript"> 
// 增加方式一：给第一个div区域添加文本 
function addText(){ 
//1.获取要添加文本内容的节点 
var div_1Node = document.getElementById("div_1"); 
//2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。 
var TextNode = document.createTextNode("这不就显示了吗？"); 
//3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法 
div_1Node.appendChild(TextNode); 
} 
// 增加方式二：给第一个div区域添加按钮 
function addButton(){ 
//1.获取要添加文本内容的节点 
var div_1Node = document.getElementById("div_1"); 
//2.创建一个节点。document对象的createElement() 
var aNode = document.createElement("input"); 
//3.给指定对象添加属性和属性值 
//aNode.setAttribute("type","button");//和下面一句代码达到的效果一样 
aNode.type="button"; 
aNode.setAttribute("value","按钮"); 
aNode.setAttribute("onclick","deleteText('div_1')"); 
//4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法 
div_1Node.appendChild(aNode); 
} 

// 删除方式一：删除第二个区域的节点的子节点 
function deleteText(NodeId){ 
//1.获取块节点 
var divNode = document.getElementById(NodeId); 
//2.获取子节点，即文本节点 
var chileNode = divNode.childNodes[0]; 
//3.删除，传入一个参数true会删除其下所有子节点 
//chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容 
divNode.removeChild(chileNode); 
} 
// 删除方式二：删除元素 
function deleteElement(){ 
//1.获取块节点 
var div_2Node = document.getElementById("div_2"); 
//2.获取父节点， 
var parentNode = div_2Node.parentNode; 
//3.删除 
parentNode.removeChild(div_2Node); 
} 

// 修改 
function UpdateText(){ 
//1获取要修改字符的区域的节点 
var div_3Node = document.getElementById("div_3"); 
//2.获取第一步中的子节点集合，指定到要修改的节点 
var childNode = div_3Node.childNodes[0]; 
//3.创建一个文本节点 
var newNode = document.createTextNode("哈哈，我把你替换了."); 
//4.用3步创建的节点替换2步骤中的节点 
//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容 
div_3Node.replaceChild(newNode,childNode); 
} 
//克隆 
function copyNode(){ 
//1.获取第四区域节点 
var div_1Node = document.getElementById("div_1"); 
//2.获取第一区域节点 
var div_4Node = document.getElementById("div_4"); 
//3.获得一个新节点通过克隆第四节点 
var newNode = div_4Node.cloneNode();//传入参数true表示克隆整个节点，包括子节点.默认是true参数的结果 
//4.将步骤3的新节点替换掉原来的第一节点 
div_1Node.parentNode.replaceChild(newNode,div_1Node); 
} 
</script> 
</head> 

<body> 
<div id="div_1"></div> 

<div id="div_2">这里是第二个区域</div> 

<div id="div_3">这里是第三个区域</div> 

<div id="div_4">这里是第四个区域</div> 
<hr /> 
<font size="12px">추가: </font> 
<input type="button" value="첫 번째 영역에 추가 " onclick="addText()" /> 
<input type="button" value="첫 번째 영역에 버튼 추가" onclick="addButton()" /> 
< hr / > 
<font size="12px">삭제: </font> 
<input type="button" value="두 번째 영역의 텍스트 내용 삭제" onclick="deleteText ( 'div_2')" /> 
<input type="button" value="두 번째 영역 삭제" onclick="deleteElement()" /> 
<시간 /> 
< 글꼴 크기="12px">변경:</font> 
<input type="button" value="세 번째 영역의 내용 수정" onclick="UpdateText()" /&gt ; <hr /> 
<font size="12px">Clone:</font> 
<input type="button" value="네 번째 영역을 첫 번째 영역으로 복제" onclick= "copyNode()" /> 
</body> 
</html>