JavaScript Dom编程

最新推荐文章于 2024-06-03 09:20:03 发布
最新推荐文章于 2024-06-03 09:20:03 发布
阅读量465 收藏
点赞数 6
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67333901/article/details/123261715
版权

表格的添加与删除

<html lang="en">
<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>18.9</td>
            <td>
                <button>删除</button>
            </td>
        </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>🍌🍌🍌🍌</td>
        <td>18.9</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
</table>
<script>
    var fn1=(status)=>{
        var is=document.getElementsByTagName("input")
        for(let i of is){
            i.checked=status
        }
    }

    function load() {
        for(let i of document.querySelectorAll("td button")){
            i.onclick=del
        }
    }

    function del() {
        var tr=this.parentElement.parentElement

        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>

图片的增删与复制

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <img src="img/1.gif" alt="">
    <img id="img" src="img/2.gif" alt="">
    <img src="img/3.gif" alt="">
</div>
<script>
    console.log(img.parentElement)
    img.parentElement.style.background="yellow"
    console.log(div.children);
    console.log(div.children.length);
    console.log(div.childElementCount);
    console.log(div.firstElementChild,div.lastElementChild)
    console.log(img.previousElementSibling)
    console.log(img.nextElementSibling)
    function fn2() {

        var i=document.createElement("img") 
        i.src="img/4.gif"
        div.appendChild(i)
    }
    function fn3() {     
        var i=div.lastElementChild
        div.removeChild(i)
    }
    function fn4() {
        var d=div.cloneNode(true)
        d.setAttribute("id","")
        document.body.appendChild(d)
    }
</script>
<button onclick="fn2()">增加一张图片</button>
<button onclick="fn3()">删除一张图片</button>
<button onclick="fn4()">复制div</button>
</body>
</html>

今天的就到这里吧！！！

颖涛
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript DOM编程
weixin_62270300的博客
03-02 613
目录 一、什么是DOM? 二、动态改变文档内容的原理 三、Element常用属性 四、常用方法 1.创建和增加节点的方法 2.删除和替换节点的方法： 3.其他方法 五、使用JS操作表格 总结： 一、什么是DOM? 文档对象模型（Document Object Model） 通过DOM可以动态改变文档内容 二、动态改变文档内容的原理 解析文档（如HTML）并生成DOM树 通过DOM标准接口+编程语言改变文档内容 解析文档生成DOM树的过程 .
《JavaScript DOM 编程艺术》（第2版）之读后感悟
fcdd123的专栏
01-26 614
在阅读完第一本书——《JavaScript DOM编程艺术》之后，有一些自己的感悟和理解，顺带把书中的一些常用的原生JS所写的方法罗列出来，以供参考和使用。
《JavaScript DOM 编程艺术》-- 总结
m0_61535378的博客
10-05 586
今天看完了JavaScript DOM 编程艺术，大概是用了三个星期的时间陆陆续续看完的。这本书关于JavaScript的知识点不多，但是展现的确实和标题一样，着重的是结构分离和平稳退化的思想，对于刚入门的新手，可以很好地建立良好的编程意识。下面总结一下。
JavaScript DOM 编程
web前端开发
12-07 144
DOM- D：文档 - html 文档或 xml 文档- O：对象 - document 对象的属性和方法- M：模型- DOM 是针对 xml 的基于树的API- DOM 树：节点的层...
《JavaScript DOM 编程艺术》
weixin_36986228的博客
02-01 809
JavaScript DOM编程艺术简略笔记
小賀のBlog
03-28 538
JavaScript DOM编程艺术一书的简略重点笔记
读书笔记：JavaScript DOM 编程艺术（第二版）
lmrylll的博客
05-27 1067
读完还是能学到很多的基础知识，这里记录下，方便回顾与及时查阅。内容也有自己的一些补充。
JavaScript DOM编程艺术(第2版)
qq_32936643的博客
08-30 396
JavaScript DOM编程艺术(第2版)pdf电子版网盘下载链接： https://u18278754.ctfile.com/fs/18278754-307029636
JavaScript与DOM编程
寻梦&之璐
05-05 6194
文章目录JS简介常量与变量 JS简介 JS是一种在浏览器中运行的解释性脚本语言。JS是由ES（ECMAScript），DOM（文档对象模型），BOM（浏览器对象模型）组成 ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，是让JS运行在服务端的开发平台，它使得JS成为与PHP，Py
JavaScript DOM编程艺术——读书笔记1
Hustcw Blog
03-31 323
DOM学习笔记 DOM(Document Object Model)是一个好东西. document 创建一个网页并加载到web浏览器里的时候，根据你的网页文档就会生成一个文档对象 object 网页内容的载体就是object model DOM把文档表示成一棵节点树 节点 DOM的原子是元素节点（元素节点就是p,li,ul等标签） 节点可以包含节点 属...
javascript Dom 编程艺术
08-11
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库...
javascriptDom编程艺术
07-22
资源名称：javaｓｃｒｉｐｔ Dom 编程艺术   资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
JavaScript DOM编程艺术(中文第2版)
09-26
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
JavaScriptDOM编程艺术（第2版）PDF版本下载
基于jeecgboot-vue3的Flowable流程-待办任务（一）
最新发布
宁波阿成的博客
06-03 425
基于jeecgboot-vue3的Flowable流程-待办任务（一）
手写最小的 Agent 系统 — Tiny Agent
安静的软件工程师
06-03 727
手写最小的 Agent 系统 — Tiny Agent
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 805
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
KeyExpirationEventMessageListener监听器的使用
qq_47910339的博客
05-31 516
KeyExpirationEventMessageListener监听器的使用
javascriptdom编程艺术pdf
10-23
《JavaScript DOM编程艺术》是由Jeremy Keith和Jeffrey Sambells合著的一本JavaScript编程指南。该书详细介绍了使用JavaScript与HTML文档对象模型（DOM）交互的技术和方法。 DOM是网页中使用的一个重要的API，它将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值