12-3 DOM操做

時間 2021-04-13

標籤 javascript html java 數組瀏覽器 app dom ide 函數 htm 欄目 HTML 简体版

原文原文鏈接

一 DOM基礎javascript

1 DOM介紹html

DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。java

DOM就是由節點組成的。數組

2 DOM樹瀏覽器

上圖可知，在HTML當中，一切都是節點：（很是重要）app

元素節點：HMTL標籤。dom
文本節點：標籤中的文字（好比標籤之間的空格、換行）ide
屬性節點：：標籤的屬性。函數

整個html文檔就是一個文檔節點。全部的節點都是Object。htm

3 DOM節點的獲取

1 var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤2 3     var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s4 5     var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

4 （獲取，更改，刪除，節點屬性）

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>DOM基礎</title> 6 </head> 7 <body> 8 <img src="./1.jpg" alt="a" id="a1" title="手機圖片" class="image"> 9 <script type="text/javascript">10     //獲取節點屬性值11     var myNode = document.getElementsByTagName("img")[0];12 13     // console.log(myNode.src);14     // console.log(myNode.className);    //注意，是className，不是class15     // console.log(myNode.title);16     //17     // console.log("-----第一種方式-------");18     //19     // console.log(myNode["src"]);20     // console.log(myNode["className"]); //注意，是className，不是class21     // console.log(myNode["title"]);22     // console.log('--------------------第二種方式-----------');23     // console.log(myNode.getAttribute("src"));24     // console.log(myNode.getAttribute("class"));   //注意是class，不是className25     // console.log(myNode.getAttribute("title"));26     //設置節點屬性值27     // console.log("-----第一種方式-------");28     // myNode.src='./2.jpg';29     // myNode.className='image2';30     console.log('--------------------第二種方式------');31      myNode.setAttribute("src","./3.jpg");32     myNode.setAttribute("class","image3-box");33     myNode.setAttribute("id","你好");34     //刪除節點的屬性35     myNode.removeAttribute('class');36     myNode.removeAttribute('id');37 </script>38 </body>39 </html>

View Code

5 （建立添加節點屬性）

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>DOM操做</title> 6 </head> 7 <body> 8 <div id="box"> 9     <p id="p1">1113</p>10 11 12 </div>13 <button id="btn">14     添加元素15 </button>16 <script>17     //獲取文檔18     console.log(document);19     //獲取的html對象20     console.dir(document.documentElement);21     console.dir(document.getElementsByTagName('html')[0]);22     //獲取body23     console.log(document.body);24     var oBtn=document.getElementById('btn');25     var oBox=document.getElementById('box');26     var op1=document.getElementById('p1');27     oBtn.onclick=function () {28         var op=document.createElement('p');//建立標籤29         // // op.innerText=123;//添加文本30         op.innerHTML='<a href="#">123</a>';//添加標籤31         // oBox.appendChild(op);//追加孩子節點32 33         op.style.color='red';34         console.log(op.parentNode);//獲取p標籤的父節點是div35         console.log(op.children[0]);//獲取p標籤的子節點是  a36         console.log(oBox.nextElementSibling.innerHTML);//火狐、谷歌、IE9+版本：都指的是下一個元素節點（標籤）,就是div下面的button標籤37         oBox.insertBefore(op,op1);//在參考標籤以前添加一個標籤，op1是參考標籤，op是要添加的標籤38 39 40 41     }42 43 44 </script>45 46 </body>47 </html>

View Code

二 DOM事件操做

1 實例：效果是點擊瀏覽器上面的盒子，彈出內容

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Title</title> 6     <style> 7         #box1{ 8             width: 200px; 9             height: 200px;10             background-color: red;11         }12     </style>13 </head>14 <body>15 <div id="box1"></div>16 17 <script type="text/javascript">18     // 一、獲取事件源19     var div = document.getElementById("box1");20     // 二、綁定事件21     div.onclick = function () {22         // 三、書寫事件驅動程序23         alert("我是彈出的內容");24     }25 </script>26 27 </body>28 </html>

View Code

常見事件以下

2 利用DOM去更改一些屬性設置盒子切換的大小和顏色

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>DOM事件</title> 6     <style> 7         .box1{ 8             width: 200px; 9             height: 200px;10             background-color: red;11         }12         /*.active{*/13             /*background-color: yellow;*/14         /*}*/15 16     </style>17     <script>18         //js入口函數，當文檔和圖片都加載完成以後，入口函數才調用叫window19         window.onload=function() {20             console.log(111);21             var oDiv=document.getElementById('box');//獲取id22             console.dir(oDiv);23             console.log(oDiv.id);24             console.log(oDiv.className);25             // 第一種寫法26             var isRed=true;27             oDiv.onclick=function () { //添加一個點擊事件28                 if (isRed){29                       oDiv.style.backgroundColor='black';30                       oDiv.style.width='300px';31                       isRed=false32                 }else{33                     oDiv.style.backgroundColor='red';34                     oDiv.style.width='200px';35                     isRed=true;36                 }37                38 39             };40 41         };42     </script>43 </head>44 <body>45     <div id="box" class="box1 active">46     </div>47 48 </body>49 </html>

View Code

3 利用dom去操做圖片的不斷切換

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>DOM事件</title> 6     <style> 7  8  9     </style>10     <script>11 12         // -------------第二種例子，圖片切換--------------------------------13         window.onload=function (ev) {14                 var oimg=document.getElementsByTagName('img')[0];//獲取第一個img標籤15                 console.log(oimg);16                 var obtn=document.getElementsByClassName('btn')[0];//獲取第一個btn類名17                 obtn.style.width='100px';//能夠單獨設置btn按鈕的樣式18                 obtn.style.height='100px';19                 var tu=true;//設置添加爲true20                 obtn.onclick=function(){21 22                     if (tu){23                          oimg.src='./1.jpg';//第一次默認是1圖片24                          console.log(oimg.id);//獲取img的id,至關於get25                          oimg.id='lv';//至關於set26                          tu=false27 28                     }else{29                         oimg.src='./2.jpg';30                         tu=true31                     }32 33 34             }35 36         }37 38     </script>39 </head>40 <body>41     <div id="box" class="box1 active">42     </div>43     <img src="./2.jpg" alt="手機" title="小米" id="one">44     <!--<img src="./3.jpg" alt="手機" title="小米" id="two">-->45     <button class="btn">切換</button>46 </body>47 </html>

View Code