JavaScriptDOM高级编程04

最新推荐文章于 2024-07-21 22:27:18 发布

摘不到卤蛋

最新推荐文章于 2024-07-21 22:27:18 发布

阅读量97

点赞数 5

文章标签： java javascript 前端

本文链接：https://blog.csdn.net/T278lk/article/details/123244389

版权

大家好，这是我今天为大家所分享的东西：

在这里插入图片描述

让我们进入正题吧：

一.了解DOM之类父类图
在这里插入图片描述
从上方图片可以看出html是head和body父类，其实html、head、body还有一个共同的父类。
那就是 document（它是网页中最大的父级元素）

二.Element常用属性 （代码如下）

//详细代码
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">//定义块状标签，取id为div
    <img src="img/1.gif" alt="">//div的子类
    <img src="img/2.gif" id="img"  alt="">
    <img src="img/3.gif" alt="">
</div>
<script>
 
    //获取父级元素
    console.log(img.parentElement)
    //给img的父元素设置一个背景颜色
    img.parentElement.style.background="yellow"
 
    //查询div中所有的子元素
    console.log(div.children);
    //知道div有几个子元素
    console.log(div.children.length);
    console.log(div.childElementCount);
 
    //第一个子节点，最后一个子节点
    console.log(div.firstElementChild,div.lastElementChild)
    
    //获取上一个相邻元素
    console.log(img.previousElementSibling)
    //获取下一个相邻元素
    console.log(img.nextElementSibling)
</script>
</body>
</html>

三.使用JS操作表格（例题）
在这里插入图片描述
例题代码

//详细代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border id="table">
        <tr>
            <td><input type="checkbox" onclick="fn1(this.checked)"></td>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>商品操作</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>车厘子</td>
            <td>189</td>
            <td>
                <button>删除</button>
            </td>
        </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>榴莲</td>
        <td>199</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>菠萝</td>
        <td>18</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苹果</td>
        <td>19</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>香蕉</td>
        <td>119</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
</table>
<script>
    var fn1=(status)=>{
        //找到页面中所有的输入框（多选框）
        //页面中拿元素: id,标签名，类名，名字
        var is=document.getElementsByTagName("input")
        //设置状态和status相同
        for(let i of is){
            i.checked=status
        }
    }
 
    function load() {
        //css选择器来选择元素
        for(let i of document.querySelectorAll("td button")){
            //i是表格中每一个按钮
            i.onclick=del
        }
    }
 
    function del() {
        //找到tr
        //this 谁调用了这个函数  this就是谁
        var tr=this.parentElement.parentElement
        //根据tr拿到父元素  根据父元素删除tr
 
        //tr.parentElement.removeChild(tr)
        //table.firstElementChild.removeChild(tr)
 
        //去除该标签中的内容
        //tr.innerHTML=""
 
        tr.outerHTML=""
 
    }
 
    function delLast(){
        if(table.rows.length>1)
            table.deleteRow(-1)
    }
 
    function delAll() {
        while(table.rows.length>1){
            table.deleteRow(-1)
        }
    }
 
    function addRow() {
        var tr=table.insertRow()
        var d1=tr.insertCell()
        var d2=tr.insertCell()
        var d3=tr.insertCell()
        var d4=tr.insertCell()
        //内容
        d1.innerHTML='<input type="checkbox">'
        d2.textContent="🍉🍉🍉🍉🍉"
        d3.textContent="90.0"
        d4.innerHTML="<button>删除</button>"
        load()//重新给按钮设置点击事件
    }
 
    load()
</script>
<button onclick="delLast()">删除表格最后一行</button>
<button onclick="delAll()">删除表格所有数据</button>
<button onclick="addRow()">增加表格数据</button>
</body>
</html>

执行结果如下：

在这里插入图片描述

在这里插入图片描述 四.Element常用方法

代码如下：

//详细代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <img src="img/img/1.gif" alt="">
    <img src="img/img/2.gif" id="img" alt="">
    <img src="img/img/3.gif" alt="">
</div>
<script>
 
    //获取父级元素
    console.log(img.parentElement)
    //给img的父元素设置一个背景颜色
    img.parentElement.style.background="yellow"
 
    //查询div中所有的子元素
    console.log(div.children);
    //知道div有几个子元素
    console.log(div.children.length);
    console.log(div.childElementCount);
 
    //第一个子节点，最后一个子节点
    console.log(div.firstElementChild,div.lastElementChild)
    
    //获取上一个相邻元素
    console.log(img.previousElementSibling)
    //获取下一个相邻元素
    console.log(img.nextElementSibling)
    
    function fn1() {
        //先创建一个图片标签
        var i=document.createElement("img")
        //设置标签上的属性
        //i.setAttribute("src","img/4.gif")
 
        //这种方式不是所有的属性都能用
        i.src="img/4.gif"
 
        //吧图片标签放到div中
        div.appendChild(i)
    }
 
    //Node Element 看作是一种东西
    function fn2() {
        //每点击一次  删除最后一张
        var i=div.lastElementChild
        //删除 通过父元素 来删除 子元素
        div.removeChild(i)
    }
 
    function fn3() {
        //复制节点
        var d=div.cloneNode(true)
        //节点复制的时候把属性带过去了
        // d.id=""
        d.setAttribute("id","")
        //加到body中
        document.body.appendChild(d)
    }
 
</script>
<button onclick="fn1()">增加一张图片</button>
<button onclick="fn2()">删除一张图片</button>
<button onclick="fn3()">复制div</button>
</body>
</html>

在这里插入图片描述
下面一行是可以执行操作的

实现思路
“修改”按钮函数editRow()、 “确定”按钮函数upRow()，两个函数传递的参数都是当前行的id号
函数editRow()：使用lastChild访问最后一个单元格中的“修改”按钮，并改变value值为“确定”
函数upRow()：使用firstChild和value获取当前数量值，同样改变按钮上显示的文本和调用的函数

总结：今天我继续为大家分享到这，后续我会继续更新。

摘不到卤蛋

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScriptDOM高级编程04

大家好，这是我今天为大家所分享的东西：让我们进入正题吧：一.了解DOM之类父类图从上方图片可以看出html是head和body父类，其实html、head、body还有一个共同的父类。那就是 document（它是网页中最大的父级元素）二.Element常用属性（代码如下）//详细代码<html><head> <meta charset="UTF-8"> <title>Title</title></h
复制链接

扫一扫