JavaScript基础（补充）个人笔记

来源：互联网发布：传奇荣耀辅助软件编辑：程序博客网时间：2024/06/05 21:15

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>

阅读全文

0 0

JavaScript基础（补充） 个人笔记

JS之层次和节点

JavaScript基础（补充）个人笔记