@Author：Runsen
@Date：2020/5/30

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。

文章目录

DOM练习
布局
代码

在之前的文章中，DOM（Document Object Model）是用来操作 XMl 和 HTML 文档的应用程序接口，也是前端中的基础中的基础。

在使用一些高效的API，优先使用document.getElementById,而document.querySelector和document.querySelectorAll在性能上和getElementsBy*API相比较慢。

DOM练习

举例：移动图片，图标的切换。效果如下图所示。

布局

大图用背景填充，五张小图用标签<li>进行填充，因此需要设置 padding-top和widt相同。
`

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;}#box{border: 1px solid #cccccc;width: 360px;height: 70px;padding-top: 360px;margin: 100px auto;background: url("images/01big.jpg") no-repeat;}ul{display: flex;justify-content: center;align-items: center;cursor: pointer;}</style>
</head>
<body><div id="box"><ul><li><img src="data:images/01.jpg" alt=""></li><li><img src="data:images/02.jpg" alt=""></li><li><img src="data:images/03.jpg" alt=""></li><li><img src="data:images/04.jpg" alt=""></li><li><img src="data:images/05.jpg" alt=""></li></ul></div>
<script>window.onload = function () {// 1. 获取需要的标签var box = document.getElementById("box");var allLi = box.getElementsByTagName("li");// 2. 监听鼠标的进入for(var i=0; i<allLi.length; i++){var sLi = allLi[i];sLi.index = i+1;sLi.onmouseover = function () {console.log(this.index);box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';}}}
</script>
</body>
</html>

素材下载；https://download.csdn.net/download/weixin_44510615/12477180

十三、前端基本功：DOM练习相关推荐

前端中DOM是什么，怎样理解dom
前端中DOM是什么,怎样理解? 首先我们来说一下DOM是什么? 文档对象模型(Document Object Model,简称DOM).我个人认为他就是将,通过浏览器的一些规则解析后,在渲染成我们能够 ...
前端中DOM是什么意思？
前端中DOM是什么,怎样理解? 首先我们来说一下DOM是什么? 文档对象模型(Document Object Model,简称DOM).他就是将,通过浏览器的一些规则解析后,在渲染成我们能够看得见的页 ...
前端基本功（三）：javascript中让人脑壳疼的this关键字
javascript 的this关键字 1. this是什么 this是javascript中的关键字之一.他是使用对象自动生成的一个内部对象,只能在对象内部使用.它会根据上下文而进行变化,并且会在不 ...
前端基础（二十三）：DOM基础操作
原生JavaScript-DOM基础操作 getAttribute setAttribute childNodes 空格换行也会被算作节点 attributes nodeType 元素节点-1 属性节 ...
最新云知梦前端基本功与前端基础入门共127课项目实战(完整)
第1集 WEB前端线上开班典礼.mp4 第2集 Sublime软件安装.mp4 第3集 Sublime下vim编辑器启用.mp4 第4集 Sublime快捷键使用.mp4 第5集 Sublime下em ...
前端JavaScript DOM BOM 自学复盘 D3
DOM- 节点操作 1.DOM节点的基本概念 1.1.DOM节点的概念 1.2.节点类型 2.查找节点 2.1.父节点查找: 2.1.1.父节点查找语法: 2.1.2.高级父级查找语法: 2.1.3. ...
web前端之DOM操作——Tab切换栏的使用
Tab切换栏的详细解析下面给出京东某一页面的tab栏页面切换: 举例引入:鼠标悬停时,current元素的背景变色本段我们先举一个例子,因为这里用到了排他思想.对于理解tab切换,很有帮助. 完整 ...
python读取html内容 dom获取_python学习笔记十三 JS，Dom（进阶篇）
JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...
前端 --- 关于DOM的介绍
111 什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解 ...

十三、前端基本功：DOM练习

文章目录

DOM练习

布局

代码

十三、前端基本功：DOM练习相关推荐

最新文章

热门文章