當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
七、深入JavaScript的DOM（三）
生活随笔
收集整理的這篇文章主要介紹了
七、深入JavaScript的DOM（三）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
@Author：Runsen
@Date：2109/03/23
JavaScript基礎分為三個部分：
-
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
-
DOM：文檔對象模型（Document object Model），操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
-
BOM：瀏覽器對象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
文章目錄
- DOM
- 實現上下圖片
- 顯示隱藏圖片
- 點擊下面的圖片，大圖就顯示出來
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
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的七、深入JavaScript的DOM（三）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华夏银行卡跨行取款收手续费吗
- 下一篇： 十一、深入JavaScript的定时器（