DOM

DOM是 JavaScript 操作 HTML 的接口（这里只讨论属于前端范畴的 HTML DOM），属于前端的入门知识，同样也是核心内容，因为大部分前端功能都需要借助 DOM 来实现，比如：监听点击、提交事件；
加载一些脚本或样式文件；

元素对象有一个attributes属性，比如id，class，tagname。因此可以通过下面的方法获取元素对象。

方法都是获取事件源和相关的元素，.绑定事件，写事件的驱动程序

实现上下图片

讲的多，还不如直接来干，比如，实现上下图片的切换,，一共有10张图片

一个img。两个按钮都给定对应的id，然后通过DOM操作，如果是9，下一张就要重新开始，代码如下，自己摸索，去年我也是这么来的

<body><img id="icon" src="img/icon_01.png" alt=""><p></p><button id="prev">上一张</button><button id="next">下一张</button>
<script>window.onload = function () {// 1. 获取需要的标签var icon = document.getElementById("icon");var prev = document.getElementById("prev");var next = document.getElementById("next");// 2. 监听按钮的点击var maxIndex = 9, minIndex = 1, currentIndex = minIndex;# 默认是第一张prev.onclick = function () {if (currentIndex === minIndex){ // 边界值currentIndex = maxIndex;}else { // 正常情况currentIndex --;}icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");console.log(icon.src);};next.onclick = function () {if (currentIndex === maxIndex){ // 边界值currentIndex = minIndex;}else { // 正常情况currentIndex ++;}icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");console.log(icon.src);};}
</script>
</body>

显示隐藏图片

点击隐藏就隐藏图片

<body><button id="btn">隐藏</button><p></p><img src="img/img_01.jpg" alt="">
<script>window.onload = function () {// 1. 获取事件源和相关的元素var btn = document.getElementById("btn");var img = document.getElementsByTagName("img")[0];// 2.绑定事件btn.onclick = function () {// 3. 事件的驱动程序if(btn.innerText === "隐藏"){img.style.display = "none";btn.innerText = "显示";}else {img.style.display = "block";btn.innerText = "隐藏";}}}
</script>
</body>

点击下面的图片，大图就显示出来

‘

点击下面的图片上面两个都换成对应的，难度是比较大的，第一就是布局，大图

<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}body{margin: 50px;}#fj{list-style: none;}#fj li{float: left;margin-left: 10px;}#big_img{margin-left: 10px;}#des{margin: 10px;color: orangered;font-size: 20px;}</style>
</head>
<body><!--大图描述--><p id="des">蒲公英</p><!--大图展示--><img id="big_img" src="img/1.jpg" alt="" width="540"><!--小图列表--><ul id="fj"><li><a href="img/1.jpg" title="蒲公英"><img src="img/1.jpg" width="100" alt="蒲公英"></a></li><li><a href="img/2.jpg" title="热气球"><img src="img/2.jpg" width="100" alt="热气球"></a></li><li><a href="img/3.jpg" title="别致小屋"><img src="img/3.jpg" width="100" alt="别致小屋"></a></li><li><a href="img/4.jpg" title="高山湖水"><img src="img/4.jpg" width="100" alt="高山湖水"></a></li><li><a href="img/5.jpg" title="高速公路"><img src="img/5.jpg" width="100" alt="高速公路"></a></li></ul>
<script>window.onload = function () {// 1. 获取需要的标签var ul = document.getElementById("fj");var aList = ul.getElementsByTagName("a");// console.log(aList[1]);var des = document.getElementById("des");var big_img = document.getElementById("big_img");// 2.绑定事件for(var i=0; i<aList.length; i++){aList[i].onclick = function () {big_img.src = this.href;des.innerHTML = this.title;/* console.log(this.href);console.log(this.title);*/return false;}}}
</script>
</body>
</html>

案例下载：https://download.csdn.net/download/weixin_44510615/12475811

七、深入JavaScript的DOM（三）相关推荐

javascript系列之DOM(三)---事件
javascript系列之DOM(三)---事件原文:javascript系列之DOM(三)---事件事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些 ...
《高性能JavaScript》第三章 DOM编程
3.1 浏览器中的DOM 文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档操作的程序接口(API).在浏览器中,主要用来与HTML文档打交道,同样也用在Web程序中获取XML文档 ...
JavaScript基础——第三章，JavaScript操作DOM对象
JavaScript操作DOM对象 DOM:Document Object Model (文档对象模型) 节点和节点的关系访问节点使用getElement系列方法访问指定节点根据层次关系访问节点 ...
前端入门之——javascript day8 DOM对象(DHTML)
DOM对象(DHTML) 7.1 什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平 ...
前端技术学习第四讲：JavaScript中DOM和BOM
JavaScript中DOM和BOM 一.DOM和BOM DOM:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与 ...
JavaScript有哪三部分组成?
在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...
javascript之DOM操作
一.document.getElementById() 根据Id获取元素节点 <div id="div1"><p id="p1"> ...
JavaScript由哪三部分组成呢？
在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...
JavaScript操作DOM对象
目录一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...

七、深入JavaScript的DOM（三）

文章目录

DOM

实现上下图片

显示隐藏图片

点击下面的图片，大图就显示出来

七、深入JavaScript的DOM（三）相关推荐

最新文章

热门文章