基本概念
JavaScript 可以将对象、属性和方法组合在一起构建出相应的程序;也可以看作是由节点组成的树结构(这篇博客的由来)。
如果一个节点包含html 元素,那么它就称为元素节点;
否则,它被称为文本节点;
元素节点也可以包含文本节点。
添加节点
给出一个示例:
html代码:
<!DCCTYPE html>
<html>
<head>
<title>Adding Nodes</title>
</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>
<script src="addNode.js"></script>
</body>
</html>
JS代码:
window.onload = initAll;
function initAll()
{
document.getElementsByTagName("form")[0].onsubmit = addNode;
}
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); //元素节点附加到bosy主体上
return false;
}
我们从JS 中可以看到,节点对象的操作类似数结构的操作。body 是大多数元素的节点的父节点,而元素节点是文本节点的父节点。
创建文本节点的方法是createTextNode();
创建元素节点的方法是createElement();
子节点附加到父节点的方法是:appendChild();
删除节点
function delNode()
{
var allGrafs = document.getElementsByTagName("p"); //获取所有元素节点P
if(allGrafs.length>1)
{
var lastGraf = allGrafs.item(allGrafs.length-1); //获取最后一个元素节点p
var docBody = document.getElementsByTagName("body")[0];
docBody.removeChild(lastGraf); //删除最后一个元素结点
}
else
{
alert("Nothing to remove");
}
return false;
}
删除节点的方法removeChild();
这个删除节点比较简单,表示删除最后一个元素节点,那是否只能删除最后一个节点呢?答案是否定的。
删除特定的节点
我们模拟一下这样的场景:现在页面上有多个“p”节点,然后每个”p”节点我们用一个“select”来进行标号选择,于是就出现了下述代码:
function delNode()
{
var grafChoice = document.getElementById("grafCout").selectedIndex; //从grafCout 中读出段落号。并将其存储在grafChoice中。
var allGrafs = nodeChgArea.getElementsByTagName("p"); // allGrafs 变量设置为nodeChgArea中的所有段落
var olsGraf = allGrafs.item(grafChoice); //将要删除的段落存储在oldGraf 中。
nodeChgArea.removeChild(olsGraf);
}
插入节点
function insertNode()
{
var grafChoice = document.getElementById("grafCout").selectedIndex;
var inText = document.getElementById("textarea").value; //获取内容
var newText = document.createTextNode(inText); //涵盖内容的文本节点
var newGraf = document.createElement("p"); //创建元素节点p
newGraf.appendChild(newText); //元素节点带着文本节点
var allGrafs = nodeChgArea.getElementsByTagName("p"); //收集区域中的所有p标签
var oldGraf = allGrafs.item(grafChoice); //目标位置,我们将在这个段落前面插入新段落。
nodeChgArea.insertBefore(newGraf,oldGraf);
}
简单思路就是:插入节点就是有个目标节点,有个新节点,就是将新节点插入到目标节点之前。
插入节点的方法是insertBefore(新节点,旧节点),仅此而已。
替换节点
function replaceNode()
{
var grafChoice = document.getElementById("grafCout").selectedIndex;
//var inText = document.getElementById("textarea").value; //获取内容
var inText = "jvandpfvhpdfbnpdhbsnhpbdbfnadfsbhtrbisnfgsbnkxcn zp"; //获取内容
var newText = document.createTextNode(inText); //涵盖内容的文本节点
var newGraf = document.createElement("p"); //创建元素节点p
newGraf.appendChild(newText); //元素节点带着文本节点
var allGrafs = nodeChgArea.getElementsByTagName("p"); //收集区域中的所有p标签
var oldGraf = allGrafs.item(grafChoice); //目标位置,我们将在这个段落前面插入新段落。
nodeChgArea.replaceChild(newGraf,oldGraf);
}
简单思路就是:替换节点就是有个目标节点,有个新节点,就是新节点替换目标节点。
插入节点的方法是replaceChild(新节点,旧节点),仅此而已。
以上几乎涵盖了对象节点的基本操作,代码已上传http://download.csdn.net/my/uploads/1。当然,还有其他的书写形式,比如:用对象字面值来编写相应的代码,类似于“json”格式,(太难了),感觉从编写过程式函数转换,思维有点跟不上啊~~~
继续努力吧!欢迎指正