JS 中对象和DOM

来源：互联网发布：淘宝皇冠账号多少钱编辑：程序博客网时间：2024/06/08 02:27

基本概念

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”格式，（太难了），感觉从编写过程式函数转换，思维有点跟不上啊~~~

继续努力吧！欢迎指正

0 0