JS 中对象和DOM

最新推荐文章于 2023-08-22 00:00:00 发布

laola的故事

最新推荐文章于 2023-08-22 00:00:00 发布

阅读量469

点赞数

分类专栏：前端文章标签： javascript 对象

本文链接：https://blog.csdn.net/u013266600/article/details/57083654

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

基本概念

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

继续努力吧！欢迎指正

laola的故事

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 中对象和DOM

基本概念JavaScript 可以将对象、属性和方法组合在一起构建出相应的程序；也可以看作是由节点组成的树结构（这篇博客的由来）。如果一个节点包含html 元素，那么它就称为元素节点；否则，它被称为文本节点；元素节点也可以包含文本节点。添加节点给出一个示例： html代码：<!DCCTYPE html><html> <head> <title>Adding N
复制链接

扫一扫

专栏目录