12-3 DOM操做
一 DOM基礎javascript
1 DOM介紹html
DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。java
DOM就是由節點組成的。數組
2 DOM樹瀏覽器
上圖可知，在HTML當中，一切都是節點：（很是重要）app
-
元素節點：HMTL標籤。dom
-
文本節點：標籤中的文字（好比標籤之間的空格、換行）ide
-
屬性節點：：標籤的屬性。函數
整個html文檔就是一個文檔節點。全部的節點都是Object。spa
3 DOM節點的獲取
1 var div1 = document.getElementById("box1"); //方式一：經過id獲取單個標籤 2 3 var arr1 = document.getElementsByTagName("div1"); //方式二：經過 標籤名 得到 標籤數組，因此有s 4 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，不是class 15 // console.log(myNode.title); 16 // 17 // console.log("-----第一種方式-------"); 18 // 19 // console.log(myNode["src"]); 20 // console.log(myNode["className"]); //注意，是className，不是class 21 // console.log(myNode["title"]); 22 // console.log('--------------------第二種方式-----------'); 23 // console.log(myNode.getAttribute("src")); 24 // console.log(myNode.getAttribute("class")); //注意是class，不是className 25 // 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>
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 //獲取body 23 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標籤的父節點是div 35 console.log(op.children[0]);//獲取p標籤的子節點是 a 36 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>
二 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 // 1、獲取事件源 19 var div = document.getElementById("box1"); 20 // 2、綁定事件 21 div.onclick = function () { 22 // 3、書寫事件驅動程序 23 alert("我是彈出的內容"); 24 } 25 </script> 26 27 </body> 28 </html>
常見事件以下
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入口函數，當文檔和圖片都加載完成以後，入口函數才調用叫window 19 window.onload=function() { 20 console.log(111); 21 var oDiv=document.getElementById('box');//獲取id 22 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=false 32 }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>
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;//設置添加爲true 20 obtn.onclick=function(){ 21 22 if (tu){ 23 oimg.src='./1.jpg';//第一次默認是1圖片 24 console.log(oimg.id);//獲取img的id,至關於get 25 oimg.id='lv';//至關於set 26 tu=false 27 28 }else{ 29 oimg.src='./2.jpg'; 30 tu=true 31 } 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>
相關文章
- 1. DOM操做
- 2. jQuery操做dom
- 3. jquery操做DOM
- 4. DOM、BOM 操做
- 5. 12-3 DOM操做
- 6. jquery DOM操做（一）
- 7. DOM操做筆記
- 8. 操做DOM
- 9. JavaScript操做Dom
- 10. dom的操做
- 更多相關文章...
- • SQL IN 操作符 - SQL 教程
- • SVN 檢出操作 - SVN 教程
- • RxJava操作符（十）自定義操作符
- • RxJava操作符（四）Combining
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. DOM操做
- 2. jQuery操做dom
- 3. jquery操做DOM
- 4. DOM、BOM 操做
- 5. 12-3 DOM操做
- 6. jquery DOM操做（一）
- 7. DOM操做筆記
- 8. 操做DOM
- 9. JavaScript操做Dom
- 10. dom的操做