DOM基础
关注
分享
扫一扫
沈川希
这个作者很懒，什么都没留下…
展开
-
17-实现最基础的轮播图
实现最基础的轮播图html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head><body> <div class="box" id="box"> <ul id="ulList"> <原创 2020-08-08 17:38:20 · 143 阅读 · 0 评论 -
16-滚动新闻列表
滚动新闻列表dom简单实现html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head><bo原创 2020-08-08 17:01:30 · 111 阅读 · 0 评论 -
15-图片懒加载
图片懒加载简述：当浏览到有图片的位置，图片就进行加载，否则，不进行加载html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link rel="stylesheet" hr原创 2020-08-08 16:34:50 · 118 阅读 · 0 评论 -
14-导航条固定
导航条固定html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head><body>原创 2020-08-08 16:27:17 · 151 阅读 · 0 评论 -
13-传统弹幕
传统弹幕简述：实现最简单的弹幕html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo原创 2020-08-08 16:40:44 · 112 阅读 · 0 评论 -
12-盒子在界面拖拽
盒子拖拽简述：鼠标可以在界面中选中盒子，并在界面中进行拖拽html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &原创 2020-08-08 16:20:02 · 149 阅读 · 0 评论 -
11-tab选项卡
tab选项卡简述：鼠标放在导航栏上面，选中的部分会发生改变，下面的内容也会发生改变。html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit原创 2020-08-08 15:53:46 · 135 阅读 · 0 评论 -
10-小球移动
小球移动简述：小球向一个方向定向移动html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/animate.js"></script>原创 2020-08-08 15:42:12 · 219 阅读 · 0 评论 -
09-回到顶部
回到顶部简述：当屏幕卷上去的高度大于一个屏幕的高度时，显示的回到顶部的小图标,点击小图标，屏幕自动回到顶部。html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu原创 2020-08-06 22:39:37 · 85 阅读 · 0 评论 -
08-小星星评论(简单)
小星星评论（简单）简述：鼠标放在星星上面，鼠标之前的星星都被点亮，鼠标之后的星星都是灰色的，并且星星可以随着鼠标移动而发生变化。图片素材rank_1.gifrank_2.gifrank_3.gifrank_4.gifhtml部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w原创 2020-08-06 22:29:19 · 130 阅读 · 0 评论 -
07-操作属性节点两种方式区别
操作属性节点两种方式区别1）打点方式不能操作自定义属性，这里的操作是指获取和设置2）使用getAttribute和setAttribute可以操作自定义属性3）通过打点方式设置的属性，后期还可以通过打点修改4）使用getAttribute和setAttribute，后期还可以通过打点修改1）标准属性 标签中已经定义好的属性 id=“box”2）自定义属性 程序员自己写的属性 nihao=“hello”示例<!DOCTYPE html><html lang="e原创 2020-08-06 22:09:44 · 156 阅读 · 0 评论 -
06-js电影的添加与删除（简单）
电影的添加与删除（简单）简述：可以删除电影，添加电影列表。如果添加的电影名或者主演为空，将会进行弹窗提示。html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电影的添加原创 2020-08-06 22:03:51 · 594 阅读 · 0 评论 -
05-js灯泡效果
4.灯泡效果简述:点击哪个圆形图案，对应的样式会发生改变html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>灯泡效果</title> </he原创 2020-08-06 21:59:19 · 111 阅读 · 0 评论 -
04-js全选，全不选和反选
全选，全不选和反选代码html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&g原创 2020-08-05 21:59:07 · 151 阅读 · 1 评论 -
03-动态创建行指定删除
动态创建行指定删除简述：点击添加按钮，动态创建行。在输入框中输入你需要删除的行，点击删除按钮，删除对应的行的。代码如下：html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2020-08-05 21:57:00 · 129 阅读 · 0 评论 -
02-遮罩层
遮罩层可以用来设置网页的夜晚或者白天模式代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遮罩层</title> <style>原创 2020-08-01 20:54:42 · 96 阅读 · 0 评论 -
01-初识DOM
初识DOMDOM：Document Object Model，文档对象模型。是一组用来描述js代码怎样与html文档进行交互和访问的web标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式和行为。一、.DOM历史版本1.DOM00级DOM，主要就是针对Document，定义了一些相关的属性和方法 。以下是具体的属性和方法2.DOM1DOM 1制定了两个子规范：DOM Core（核心部分），把xml文档设计为树形节点结构，并为这种结构的运行机制制订了一套规范化标原创 2020-08-01 16:56:53 · 166 阅读 · 0 评论