• JS学习记录（DOM补充一）

    层级关系
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级关系</title>
</head>
<body>
<ul id="ul">
    <li>青岛理工大学</li>
    <li id="li2">烟台大学</li>
    <li>鲁东大学</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;
    var li2 = ul.lastElementChild;
    console.log(li1);
    console.log(li2);

</script>
</html>

    结果图：

    层级关系（补充）
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级关系（补充）</title>
</head>
<body>
<ul id="ul">
    <li>青岛理工大学</li>
    <li id="li2" class="uantai" name="yantai" style=" 100px">烟台大学</li>
    <li>鲁东大学</li>
    <li>山东工商学院</li>
</ul>
</body>
<script>
    var li2 = document.getElementById("li2");
    var li3 = li2.attributes;
    console.log(li3)


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

    结果图：

    创建和增加节点
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建和增加节点</title>
</head>
<body>
<img src="../../img/tu2.png" alt="" id="tu2"><br>
<button  onclick="create()">新增图片</button>
<button  onclick="clone()">复制图片</button>
</body>
<script>
    function create() {
        var newImg = document.createElement("img");
        newImg.src="../../img/tu1.png";
        var oldImg = document.getElementById("tu2");
        document.body.insertBefore(newImg,oldImg);/*放在父元素中，body为父元素*/
    }
    function clone() {

        var img=document.getElementById("tu2");
        var cloneImg=img.cloneNode();
        document.body.appendChild(cloneImg);
    }


</script>
</html>

    结果图：

    删除和替换节点
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除和替换节点</title>
</head>
<body>
<img id="tu1" src="../../img/tu4.png" alt=""><br>
<button onclick="remove()">删除图片</button>
<button onclick="replace()">替换图片</button>

</body>
<script>
    function remove() {
        var oldImg = document.getElementById("tu1");
        document.body.removeChild(oldImg);
    }
    function replace() {
        var oldImg = document.getElementById("tu1");
        var newImg = document.createElement("img");
        newImg.src ="../../img/tu2.png";
        document.body.replaceChild(newImg,oldImg);
    }


</script>
</html>

    结果图：

    Table增加、删除行以及单元格，修改内容属性

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table增加、删除行以及单元格，修改内容属性</title>
</head>
<body>
<table border="1" width="400" height="100"
       style="border-collapse: collapse" id="myTable">
    <tr>
        <td>书名</td>
        <td>价格</td>
    </tr>
    <tr id="tr1">
        <td id>看的见风景的房间</td>
        <td>￥30</td>
    </tr>
    <tr>
        <td>幸福从天而降</td>
        <td>￥18.5</td>
    </tr>
    <tr>
        <td>60个瞬间</td>
        <td>￥32</td>
    </tr>
</table>
<button onclick="insert1()">增加一行</button>
<button onclick="delete2()">删除第二行</button>
<button onclick="changeTitle()">修改标题</button>
</body>
<script>
    function insert1() {
        /*核心 Dom*/
        /* var tr = document.createElement("tr");
         var td1 = document.createElement("td");
         td1.innerHTML = "钢铁是怎样炼成的";
         var td2 = document.createElement("td");
         td2.innerHTML = "￥50";
         tr.appendChild(td1);
         tr.appendChild(td2);
         var table = document.getElementById("myTable");
         var tr1 = document.getElementById("tr1");
         table.firstElementChild.insertBefore(tr,tr1);*/
        /*html Dom*/
        var table = document.getElementById("myTable");
        var row = table.insertRow(2);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = "钢铁是怎样炼成的";
        cell2.innerHTML = "￥50";
    }
    /*function delete2() {
     /!*核心（core）Dom*!/
     var tr1 = document.getElementById("tr1");
     var table = document.getElementById("myTable");
     table.firstElementChild.removeChild(tr1);
     }*/
    /*html Dom*/
    function delete2() {
        var table = document.getElementById("myTable");
        table.deleteRow(1);
    }
    function changeTitle() {
        var table = document.getElementById("myTable");
        table.rows[0].cells[0].align = "center";
        table.rows[1].cells[1].align = "right";
    }
</script>
</html>

     结果图：

    表格内的按钮删除行
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格内的按钮删除行</title>
</head>
<body>
<table border="1" width="400" height="100"
       style="border-collapse: collapse" id="myTable">
    <tr>
        <td>书名</td>
        <td>价格</td>
        <td>操作</td>

    </tr>
    <tr id="tr1">
        <td id>看的见风景的房间</td>
        <td>￥30</td>
        <td><button onclick="remove1(this)">删除</button></td>

    </tr>
    <tr>
        <td>幸福从天而降</td>
        <td>￥18.5</td>
        <td> <button onclick="remove2(this)">删除</button></td>

    </tr>
    <tr>
        <td>60个瞬间</td>
        <td>￥32</td>
        <td>
            <button onclick="remove3(this)">删除</button>
        </td>

    </tr>
</table>
</body>
<script>
    function remove1(obj) {
       var index = obj.parentNode.parentNode.rowIndex;
        var table = document.getElementById("myTable");
        table.deleteRow(index)
    }
    function remove2(obj) {
        var index = obj.parentNode.parentNode.rowIndex;
        var table = document.getElementById("myTable");
        table.deleteRow(index)
    }
    function remove3(obj) {
        var index = obj.parentNode.parentNode.rowIndex;
        var table = document.getElementById("myTable");
        table.deleteRow(index)
    }
</script>
</html>

    结果图：按到哪个按钮删除哪一行
  • 相关阅读:
    React个人学习笔记
    electron 学习笔记
    微信小程序学习笔记
    算法
    17 django中间件
    16 django用户认证组件
    15 django_cookie&session
    14 django_forms
    13 django分页器
    12 django_ajax
  • 原文地址：https://www.cnblogs.com/lizuowei/p/7300305.html
Copyright © 2020-2023  润新知