前端-js基础-DOM-案例

最新推荐文章于 2023-05-28 00:26:55 发布
最新推荐文章于 2023-05-28 00:26:55 发布
阅读量250 收藏 4
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mm0122/article/details/126925115
版权
本文介绍了前端开发中JavaScript操作DOM的重要概念，包括DOM树、节点、元素，以及DOM操作的核心——创建、增、删、改、查、属性操作和事件操作。通过多个实战案例，如分时显示图片、显示隐藏文本、密码格式验证等，详细解析了DOM在实际应用中的使用。
摘要由CSDN通过智能技术生成

#博学谷IT学习技术支持

目录

DOM树

文档（document）：一个页面就是一个文档

节点（node）：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等）

标签节点（element）：网页中的所有标签，通常称为元素节点，又简称为“元素”

DOM重点核心

关于DOM操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建：document.write innerHTML createElement

增：appendChild insertBefore

删：removeChild

改：主要修改DOM的元素属性，DOM元素的内容、属性、表单的值等

查：主要获取查询DOM的元素

属性操作：主要针对自定义属性。 setAttribute：设置DOM属性； getAttribute：获取DOM属性值；removeAttribute：移出属性

案例

分时显示不同图片，显示不同问候语

仿京东显示隐藏密码

淘宝点击关闭二维码

循环精灵图背景

显示隐藏文本框内容

密码框格式提示错误信息

开关灯

表格隔行变色

百度换肤

⚠️ 表单全选、取消全选案例

⚠️tab栏切换

下拉菜单

简单版发布留言

删除留言

  • DOM树

    • 文档（document）：一个页面就是一个文档

    • 节点（node）：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等）

    • 标签节点（element）：网页中的所有标签，通常称为元素节点，又简称为“元素”

 

  • DOM重点核心

    • 关于DOM操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

    • 创建：document.write innerHTML createElement

    • 增：appendChild insertBefore

    • 删：removeChild

    • 改：主要修改DOM的元素属性，DOM元素的内容、属性、表单的值等

    • 查：主要获取查询DOM的元素

    • 属性操作：主要针对自定义属性。 setAttribute：设置DOM属性； getAttribute：获取DOM属性值；removeAttribute：移出属性

    • 事件操作：给元素注册事件，采取事件源.事件类型 = 事件处理程序

  • 案例

    • 分时显示不同图片，显示不同问候语

    最低0.47元/天 解锁文章
    mm0122
    关注
    JS学习之DOM及案例
    huangql517的博客
    05-28 2034
    1>DOM简介    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model，简称DOM）。    即当浏览器载入HTML文档时, 它就会成为DOM对象，而在JS中，所有的事物都是节点，    元素、文本等都是节点。可以通过节点进行DOM对象的增删改查。    既然HTML在被浏览器加载时会对应的生成DOM对象，而JS又可以通过节点来操作DOM，所以，JS...
    JS DOM案例1
    qq_45776662的博客
    09-14 471
    JSDOMJS DOM获取元素事件与操作元素表单案例，显示隐藏密码3. 操作元素样式案例：排它思想案例：表格隔行变色案例：表单全选、取消全选案例:tab切换 JS DOM 这系列文章里记录的多半是案例，基础语法很少 获取元素 1. document.getElementById(id) 2. Document.getElementsByTagName() 3. Document.getElementsByClassName() 4. document.querySelector() //查找第一个匹配
    js dom 例子
    CobWeb
    09-29 228
    <html> <head> <title>js dom 动态生成option选项</title> <script type="text/javascript"> function clearSelect() { var mySelect = document.getElementById('ah'); ...
    js_dom 之案例
    weixin_33749242的博客
    05-27 200
    1、模拟微信聊天 2、瀑布流案例（小红书）---理解瀑布流原理： 绝对定位 + 最小高度 + 第一行and其他行 + left、 top 　　a、页面结构 　　　　 　　b、页面样式 　　　　 　　　　c、事件（js） 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　第6步：滚动加载图片 　　　　 　　　　 ...
    DOM 操作元素来改变元素里面的属性（黑马课程总结【侵删】）
    qq_42024229的博客
    10-08 1258
    4. 操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 4.1 改变元素内容 element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行 4.2 常用元素的属性操作 1. innerText、inn...
    WEB前端-案例汇总
    11-08
    通过这个“WEB前端-案例汇总”，学习者不仅可以全面了解前端开发的各个方面，还能通过实践提升解决问题的能力，为成为专业的前端开发者奠定坚实基础。无论是HTML5的新特性，还是前沿的前端框架，都能在这个资源包中...
    JavaScript案例-js购物车
    02-16
    总的来说，"JavaScript案例-js购物车"是一个涵盖JavaScript基础、数组操作、对象处理、AJAX请求以及DOM操作的综合实例。通过实践这个案例，开发者可以更深入地理解和掌握JavaScript在实际项目中的应用。
    JavaScript案例-js表单验证
    02-16
    在这个"JavaScript案例-js表单验证"中，提供的"03_validation"文件很可能包含了上述提到的验证示例代码。你可以深入研究这些代码，了解具体的实现方式，并尝试根据自己的需求进行修改和扩展。通过实践，你将更好地...
    JavaScript前端开发案例教程-PPT(3).rar
    04-29
    《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
    JavaScript之DOM案例练习
    最新发布
    十三阿哥的博客
    05-28 643
    JavaScript之DOM案例练习
    Javascript_Dom操作案例
    01-10
    Javascript_Dom操作案例 总结了一些javascript对DOM操作的案例，希望对大家有所帮助
    初级JS-DOM小案例
    欢迎
    03-24 409
    初级JS---实现表格的添加和删除
    【JavaScript】js基础-DOM（案例1）
    你今天真好看呀
    08-17 427
    文章目录1. innerHTML属性2. 案例1：动态显示时间3. 案例2：全选练习4. 案例3：下拉列表左右选择 1. innerHTML属性 1.这个属性不是DOM的组成部分，但是是大多数浏览器都支持的属性 2.作用： 1.获取文本内容 2.向标签里面设置内容（可以是html代码） <!DOCTYPE html> <html lang="en"> <head...
    js操作dom元素的例子
    wuyujieyuguo的博客
    08-23 247
    js操作dom的代码 <script type="text/javascript"> var count=0; function play(){ alert(count); if(count==0){ var btn=documen
    原生JS学习 DOM （案例）
    m0_64191440的博客
    09-05 790
    JavaScript 中将网页文档中的标签进行解释后，得到标签对应的节点对象，包含节点属性：nodeType，不同的节点属性值不同。1：这是一个标签对象2：这是一个属性对象3：这是一个文本对象.JavaScript 语法中通过节点数（ DOM树 ）
    JavaScript—DOM事件及案例思路总结
    敏敏的博
    12-29 1264
    文章目录前言案例思路及实现案例一 分时问候案例二 仿京东显示密码总结 前言 代码谁都能敲，但不是谁都会敲。电脑执行有很强的逻辑性，要想把我们所需的效果通过代码表达出来，还需要清楚整个事件的具体过程。 代码已经敲的很多了，但是具体敲代码的逻辑思想才是解题的关键。本文记录了几个案例的编程思想，可以跟随思路在脑海中过一遍代码方法，下面一起来看看吧！ 提示：以下是本篇文章正文内容，下面案例可供参考 案例思路及实现 案例一 分时问候 案例描述 根据不同事件，页面显示不同图片，同时显示不同的问候语 如上午打开页面.
    06 JS-DOM之--节点操作（4种）附案例源码
    路遇惊喜
    11-29 758
    节点的操作一共四种： 创建节点（3种） 添加节点（2种） 删除节点（1种） 复制节点
    DOM常见案例大盘点!
    blog_pancc的博客
    04-27 945
    文章目录DOM案例一.DOM操作元素案例1.DOM修改元素内容案例2.分时问候案例3.仿京东显示隐藏密码明文案例4.仿淘宝关闭二维码案例5.遍历精灵图案例6.显示隐藏文本框内容案例7.密码框验证信息案例8.仿世纪佳缘用户名显示隐藏案例9.排他思想(算法)案例10.百度换肤案例11.表格隔行变色案例12.全选反选案例13.tab栏切换案例14.新浪下拉菜单案例15.简单版留言板案例16.动态生成表格案例二.DOM事件高级案例1.鼠标跟随案例2.仿京东按键输入内容案例3.仿京东快递查询单号案例 DOM案例 ​
    通过经典案例教你学Javascript
    04-14
    通过案例，讲解Javascript的各种语法，API和使用方法。
    前端开发案例大全：81个实战项目快速上手
    文件中可能包含有关JavaScript基础语法、DOM操作、事件处理、异步编程（例如使用Ajax和Promise）、以及使用现代JavaScript库和框架（如React, Vue, Angular）来构建单页应用（SPA）等案例和教学内容。 2. meizu-bg ...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值