js-元素节点

最新推荐文章于 2024-05-06 02:35:52 发布

符号丶

最新推荐文章于 2024-05-06 02:35:52 发布

阅读量342

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35833753/article/details/77198923

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

查看节点

属性	说明
childNodes	获取当前元素节点的所有子节点
firstChild	获取当前元素节点的第一个子节点
lastChild	获取当前元素节点的最后一个子节点
ownerDocument	获取该节点的文档根节点，相当于document
parentNode	获取当前节点的父节点
previousSibling	获取当前节点的前一个同级节点
nextSibling	获取当前节点的后一个同级节点
attributes	获取当前元素节点的所有属性集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul">
    <li>青岛理工大学</li>
    <li id="li2">鲁东大学</li>
    <li>山东工商学院</li>
    <li>烟台大学</li>
    <li>山东科技大学</li>
    <li>中国石油大学</li>
</ul>
</body>
<script>
    /*parentNode:通过子元素获取父元素*/
    /*var li2 = document.getElementById("li2");
     var ul = li2.parentNode;
     console.log(ul);*/

    /*childNodes:通过父元素去查找所有子元素  ->代码不能换行，js会把换行当作一个text，jQuery没有这个bug*/
    /*var ul = document.getElementById("ul");
     var lis = ul.childNodes;
     console.log(lis);*/

    /*firstChild:通过父元素去查找第一个子元素
    *   有bug，元素和元素之间不允许换行
    * firstElementChild:通过父元素查找第一个子元素
    *   允许元素换行   */
    var ul = document.getElementById("ul");
    //var li1 = ul.firstChild;
    var li1 = ul.firstElementChild;
    console.log(li1);

    /*lastChild和lastElementChild同理*/
    //var li6 = ul.lastChild;
    var li6 = ul.lastElementChild;
    console.log(li6);

    /*previousSibling,获取前一个同级元素bug同上*/
    var li2 = document.getElementById("li2");
    //var li1 = li2.previousSibling;
    var li1 = li2.previousElementSibling;
    console.log(li1);
    /*nextSibling,获取后一个同级元素*/
    //var li3 = li2.nextSibling;
    var li3 = li2.nextElementSibling;
    console.log(li3);
    /*attributes,获取当前元素的所有属性*/
    var att = li2.attributes;
    console.log(att);
</script>
</html>

创建和增加节点的方法

createElement( ) :创建节点
cloneNode( ) :克隆节点
appendChild( ) :末尾追加方式插入节点
insertBefore( ) :在指定节点前插入新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="create()">添加新图片</button> <button onclick="clone()">复制图片</button><br>
<img src="../../img/qq.png" id="img1" height="200">
</body>
<script>
    var oldNode = document.getElementById("img1");
    function create() {
        var img = document.createElement("img");
        img.src = "../../img/mail.png";
        document.body.insertBefore(img,oldNode);
    }
    var i = 2;
    function clone() {
        var copyImg = oldNode.cloneNode();
        copyImg.id = "img"+ i++;

        document.body.appendChild(copyImg);
    }
</script>
</html>