发布于 2017-01-18 01:28:22 | 180 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


本文为大家详细介绍下使用js完成节点的增删改复制等的操作,具体的实现如下,感兴趣的朋友可以参考下
需求:完成节点的增删改复制的操作

用到的方法和属性:
1.获取某个节点的父节点
parentNode属性
2.获取某个节点的子节点集合
childNodes属性
3.创键一个新的节点
createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好
createElement(对象) document对象的方法 例如:document.createElement("a");
4.给某个节点对象添加属性和属性值
setAttribute(属性,属性值); 例如:aNode.setAttribute("href","http://www.baidu.com");
5.替换某个节点下的子节点
replaceChild(新节点,原子节点);
6.将某个节点添加到一个节点下
appendChild(要添加的节点)
7.克隆某个节点

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()" /> 
<hr /> 
<font size="12px">改:</font> 
<input type="button" value="修改第三个区域中的内容" onclick="UpdateText()" /> 
<hr /> 
<font size="12px">克隆:</font> 
<input type="button" value="将第四区域克隆到第一区域" onclick="copyNode()" /> 
</body> 
</html> 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务