JavaScript基础（补充）个人笔记

最新推荐文章于 2024-07-26 20:46:33 发布

jredu1996

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量171

点赞数 1

分类专栏： html5 javascript 新手文章标签： javascript 层级和节点

本文链接：https://blog.csdn.net/jredu1996/article/details/77265597

版权

新手同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

JS之层次和节点

层级关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级关系</title>
</head>
<body>

<!--元素不换行的样式-->
<!--<ul id="ul"><li>青岛理工</li><li id="li2">山东科技</li><li>清华大学</li></ul>-->

<ul id="ul">
    <li>青岛理工</li>
    <li id="li2" class="">山东科技</li>
    <li>清华大学</li>
</ul>
</body>
<script>

    /*parentNode:通过子元素获取父元素*/
    var li2 = document.getElementById("li2");
    var ul = li2.parentNode;
    console.log(ul);

    /*childNodes:通过父元素去查找所有的子元素,
     有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：通过父元素去查找最后一个子元素
     *             有bug，元素和元素之间不允许换行
     * lastElementChild:通过父元素去查找最后一个子元素，
     *                   允许元素换行*/
    var ul = document.getElementById("ul");
    //    var li1 = ul.lastChild;
    var li1 = ul.lastElementChild;
    console.log(li1);

    var li2 = document.getElementById("li2");
    //    var li1 = li2.previousSibling;                /*获取前一个同级节点*/
    var li1 = li2.previousElementSibling;
    /*无bug*/
    //    var li3 = li2.nextSibling;                    /*获取后一个同级节点*/
    var li3 = li2.nextElementSibling;
    /*无bug*/
    console.log(li1);
    console.log(li3);

</script>
</html>

创造和增加节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创造和增加节点</title>
</head>
<body>
<img src="../../../img/f3_Android1.png" alt="" id="oldImg">
<button onclick="create()">新增图片</button>
<button onclick="clone()">复制图片</button>
</body>
<script>
    /*创造和增加节点*/
    function create() {
        var newImg = document.createElement("img");
        newImg.src = "../../../img/f3_Android2.png";
        var oldImg = document.getElementById("oldImg");
        document.body.insertBefore(newImg, oldImg);
    }
    function clone() {
        var oldImg = document.getElementById("oldImg");
        var newImg = oldImg.cloneNode(false);
        document.body.appendChild(newImg);
    }
</script>
</html>

remove和replace

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>remove和replace节点</title>
</head>
<body>
<button onclick="remove()">删除图片</button>
<button onclick="replace()">替换图片</button>
<img src="../../../img/f3_Android1.png" alt="" id="img1">
</body>
<script>
    function remove() {
        var img = document.getElementById("img1");
        document.body.removeChild(img)
    }
    function replace() {
        var img = document.getElementById("img1");
        var newImg = document.createElement("img");
        newImg.src = "../../../img/f3_Android3.png";
        document.body.replaceChild(newImg, img);                 //用newImg替换img
    }
</script>
</html>

jredu1996

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础（补充）个人笔记

JS之层次和节点层级关系<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层级关系</title></head><body><!--<ul id="ul"><li>青岛理工</li><li id="li2">山东科技</li><li>清华大学</li></ul
复制链接

扫一扫