添加、删除、插入和替换[文本节点]
2012-08-06 16:56
519 查看
原帖地址
添加、删除、插入和替换[文本节点]
一、何谓节点？页面元素是按树形结构布置的，树形结构的每个部分称为一个节点，节点中含有子节点，节点的终极是文本或图像，对文本而言称为“文本节点”，其他节点统称称“元素节点”。
二、通过表单添加节点实例：
节点位于body中，没有事先创建一个可以避免干扰的全新div区域。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding Nodes</title>
<script language="javascript" type="text/javascript">
window.onload = initAll;
function initAll() {
document.getElementsByTagName("form")[0].onsubmit = addNode;//对第一个表单的按钮定义onsubmit事件
}
function addNode() {
var inText = document.getElementById("textArea").value;//通过id获取表单中文本区域的值
var newText = document.createTextNode(inText);//创建一个文本节点，括号中inText是文本的内容
var newGraf = document.createElement("p");//创建一个元素节点p
newGraf.appendChild(newText);//将上述文本节点置入p元素节点之中
var docBody = document.getElementsByTagName("body")[0];//定义body元素对象为第一个body元素
docBody.appendChild(newGraf);//将元素p置入body元素当中
return false;
}
</script>
</head>
<body>
<form action="#">
<p><textarea id="textArea" rows="5" cols="30"></textarea></p>
<input type="submit" value="Add some text to the page" />
</form>
</body>
</html>
注意：使用上述方法添加节点不会导致页面无效，而使用innerHTML赋值方法可能导致页面无效。
三、添加和删除文本节点实例。
通过表单按钮事件（onsubmit）添加节点，再通过链接点击（onclick）删除节点实例，此例没有创建全新区域div。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Deleting Nodes</title>
<script language="javascript" type="text/javascript">
window.onload = initAll;
function initAll() {
document.getElementsByTagName("form")[0].onsubmit = addNode;
document.getElementById("deleteNode").onclick = delNode;
}
function addNode() {
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
var docBody = document.getElementsByTagName("body")[0];
docBody.appendChild(newGraf);
return false;
}
function delNode() {
var allGrafs = document.getElementsByTagName("p");
if (allGrafs.length > 1) {
var lastGraf = allGrafs.item(allGrafs.length-1);//因为是从0开始的，所以最后一个p元素是allGrafs.length-1
var docBody = document.getElementsByTagName("body")[0];
docBody.removeChild(lastGraf);//删除最后一个p元素
}
else {
alert("Nothing to remove!");
}
return false;
}
</script>
</head>
<body>
<form action="#">
<p><textarea id="textArea" rows="5" cols="30"></textarea></p>
<input type="submit" value="Add some text to the page" />
</form>
<a id="deleteNode" href="#">Delete last paragraph</a>
</body>
</html>
四、创建全新区域来添加和删除特定文本节点实例。
事先在body中创建一个全新div区域，并设其id= modifiable以便javascript调用。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Deleting Selected Nodes</title>
<script language="javascript" type="text/javascript">
window.onload = initAll;
var nodeChgArea;
function initAll() {
document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
nodeChgArea = document.getElementById("modifiable");//获取div元素对象
}
function addNode() {
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
nodeChgArea.appendChild(newGraf);
}
function delNode() {
var grafChoice = document.getElementById("grafCount").selectedIndex;//当前选择的项目
var allGrafs = nodeChgArea.getElementsByTagName("p");
var oldGraf = allGrafs.item(grafChoice);
nodeChgArea.removeChild(oldGraf);
}
function nodeChanger() {
var actionType = -1;
var pGrafCt = nodeChgArea.getElementsByTagName("p").length;
var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
for (var i=0; i<radioButtonSet.length; i++) {
if (radioButtonSet[i].checked) {
actionType = i;
}
}
switch(actionType) {
case 0:
addNode();
break;
case 1:
if (pGrafCt > 0) {
delNode();
break;
}
default:
alert("操作不正确");
}
document.getElementById("grafCount").options.length = 0;
for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {
document.getElementById("grafCount").options[i] = new Option(i+1);
}
return false;
}
</script>
</head>
<body>
<form action="#">
<p><textarea id="textArea" rows="5" cols="30"></textarea></p>
<p><label><input name="nodeAction" type="radio"/>
添加节点</label>
<label><input type="radio" name="nodeAction" />删除节点</label></p>
Paragraph #: <select id="grafCount"></select>
<input type="submit" value="Submit" /></form>
<div id="modifiable"></div>
</body>
</html>
五、添加、删除及插入文本节点实例。
事先要创建一个全新区域div，并定义其id= “modifiable”。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inserting Nodes</title>
<script language="javascript" type="text/javascript">
window.onload = initAll;
var nodeChgArea;
function initAll() {
document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
nodeChgArea = document.getElementById("modifiable");
}
function addNode() {
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
nodeChgArea.appendChild(newGraf);
}
function delNode() {
var grafChoice = document.getElementById("grafCount").selectedIndex;
var allGrafs = nodeChgArea.getElementsByTagName("p");
var oldGraf = allGrafs.item(grafChoice);
nodeChgArea.removeChild(oldGraf);
}
function insertNode() {
var grafChoice = document.getElementById("grafCount").selectedIndex;
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
var allGrafs = nodeChgArea.getElementsByTagName("p");
var oldGraf = allGrafs.item(grafChoice);
nodeChgArea.insertBefore(newGraf,oldGraf);
}
function nodeChanger() {
var actionType = -1;
var pGrafCt = nodeChgArea.getElementsByTagName("p").length;
var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
for (var i=0; i<radioButtonSet.length; i++) {
if (radioButtonSet[i].checked) {
actionType = i;
}
}
switch(actionType) {
case 0:
addNode();
break;
case 1:
if (pGrafCt > 0) {
delNode();
break;
}
case 2:
if (pGrafCt > 0) {
insertNode();
break;
}
default:
alert("操作不正确");
}
document.getElementById("grafCount").options.length = 0;
for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {
document.getElementById("grafCount").options[i] = new Option(i+1);
}
return false;
}
</script>
</head>
<body>
<form action="#">
<p><textarea id="textArea" rows="5" cols="30"></textarea></p>
<p><label><input type="radio" name="nodeAction" />添加节点</label>
<label><input type="radio" name="nodeAction" />删除节点</label>
<label><input type="radio" name="nodeAction" />插入节点在某个节点之前</label></p>
Paragraph #: <select id="grafCount"></select>
<input type="submit" value="Submit" />
</form>
<div id="modifiable"> </div>
</body>
</html>
六、添加、删除、插入和替换文本节点。
事先要创建一个全新区域div，并定义其id= “modifiable”。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replacing Nodes</title>
<script language="javascript" type="text/javascript">
window.onload = initAll;
var nodeChgArea;
function initAll() {
document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
nodeChgArea = document.getElementById("modifiable");
}
function addNode() {
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
nodeChgArea.appendChild(newGraf);
}
function delNode() {
var grafChoice = document.getElementById("grafCount").selectedIndex;
var allGrafs = nodeChgArea.getElementsByTagName("p");
var oldGraf = allGrafs.item(grafChoice);
nodeChgArea.removeChild(oldGraf);
}
function insertNode() {
var grafChoice = document.getElementById("grafCount").selectedIndex;
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
var allGrafs = nodeChgArea.getElementsByTagName("p");
var oldGraf = allGrafs.item(grafChoice);
nodeChgArea.insertBefore(newGraf,oldGraf);
}
function replaceNode() {
var grafChoice = document.getElementById("grafCount").selectedIndex;
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
var allGrafs = nodeChgArea.getElementsByTagName("p");
var oldGraf = allGrafs.item(grafChoice);
nodeChgArea.replaceChild(newGraf,oldGraf);
}
function nodeChanger() {
var actionType = -1;
var pGrafCt = nodeChgArea.getElementsByTagName("p").length;
var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
for (var i=0; i<radioButtonSet.length; i++) {
if (radioButtonSet[i].checked) {
actionType = i;
}
}
switch(actionType) {
case 0:
addNode();
break;
case 1:
if (pGrafCt > 0) {
delNode();
break;
}
case 2:
if (pGrafCt > 0) {
insertNode();
break;
}
case 3:
if (pGrafCt > 0) {
replaceNode();
break
}
default:
alert("操作不正确");
}
document.getElementById("grafCount").options.length = 0;
for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {
document.getElementById("grafCount").options[i] = new Option(i+1);
}
return false;
}
</script>
</head>
<body>
<form action="#">
<p><textarea id="textArea" rows="5" cols="30"></textarea></p>
<p><label><input type="radio" name="nodeAction" />添加文本</label>
<label><input type="radio" name="nodeAction" />删除文本</label>
<label><input type="radio" name="nodeAction" />在第··段前插入文本</label>
<label><input type="radio" name="nodeAction" />替换文本</label></p>
Paragraph #: <select id="grafCount"></select>
<input type="submit" value="Submit" />
</form>
<div id="modifiable"> </div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 11.21课堂笔记-查找节点和创建节点、插入节点和删除节点、复制节点替换节点、包裹节点和属性操作、样式操作、设置和获取HTML、文本和值
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
- javascript 原生方法对dom节点的操作，创建、添加、删除、替换、插入、复制、移动等操作
- DOM节点的创建、插入、删除、查找、替换
- jQuery插入,复制、替换和删除节点
- jQuery:插入,复制,替换和删除节点
- 在shuiguo.xml文件中第三个水果中的苹果节点中添加节点<小苹果>small apple</小苹果>,添加小苹果后将其文本内容修改为“小苹果”，修改该节点后将其父节点苹果（即第三个苹果元素）删除
- jQuery插入,复制、替换和删除节点
- 单向链表小练习--》创建链表头，添加删除链表节点，释放链表内存，选择插入数据
- DOM节点的创建、插入、删除、查找、替换
- #笔记#圣思园 JavaWeb 第72讲——jQuery和DOM，查找、插入、删除、复制、替换、包裹节点
- JS实现添加,替换,删除节点元素的方法
- 链表：创建、清空、插入、添加、删除节点
- 创建新节点，删除节点，替换节点，特定节点前插入节点，特定节点后插入节点
- javawebday05(添加 插入节点 标签 替换复制节点)
- jQuery插入,复制、替换和删除节点
- VB中删除、替换或者插入内容到文本中某一行
- Node节点的添加、替换和删除
- VB中删除、替换或者插入内容到文本中某一行,及文本行列的处理实例
- 操作Cassandra（2）-添加，替换，移动和删除节点