文檔對象模型

時間 2019-11-08

標籤文檔對象模型简体版

原文原文鏈接

DOM:文檔對象模型

1.DOM

DOM:文檔對象模型,DOM爲文檔提供告終構化表示,並定義瞭如何經過腳原本訪問文檔結構,目的實際上是爲了能讓js操做heml元素而制定的一個規範javascript
DOM就是由節點組成: heml加載完畢,渲染引擎會在內存中把HTML文檔生成一個DOM樹css

由上圖可知,在HTML中一切都是節點很是重要html
- 元素節點: HTML標籤java
- 文本節點: 標籤中的文字(好比標籤之間的空格,換行)node
- 屬性節點: 標籤的屬性ios
- 整個html文檔就是一個文檔節點全部節點都是Object數組
利用DOM能夠完成app
- 找對象(元素節點)函數
- 設置元素的屬性值ui
- 設置元素的樣式
- 動態建立和刪除元素
- 事件的觸發響應: 事件源,事件,事件的驅動程序

2.節點查找

DOM節點的獲取方式其實就是獲取事件源的方式

直接查找:

 var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤
 var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s
 var arr2 = document.getElementsByClassName("hehe"); //方式三：經過 類名 得到 標籤數組，因此有s
 //其中方式2、方式三獲取的是標籤數組，那麼習慣性是先遍歷以後再使用。

特殊狀況

 即使如此，這一個值也是包在數組裏的。這個值的獲取方式以下：
 document.getElementsByTagName("div1")[0];   //取數組中的第一個元素
 document.getElementsByClassName("hehe")[0]; //取數組中的第一個元素

間接查找
- DOM的節點並非孤立的,所以能夠經過DOM節點之間的相對關係對他們進行訪問,節點的訪問呢關係是以屬性的方式存在的
- 獲取父節點
  - ```
    節點.parentNode
```
- 獲取兄弟節點
  - 總結：爲了獲取下一個元素節點，咱們能夠這樣作：在IE678中用nextSibling，在火狐谷歌IE9+之後用nextElementSibling
  - 爲了獲取前一個元素節點，咱們能夠這樣作：在IE678中用previousSibling，在火狐谷歌IE9+之後用previousElementSibling
  - 隨意兄弟節點
    - ```
     節點本身.parentNode.children[index];  //隨意獲得兄弟節點
```
- 獲取子節點
  - 單個子節點
    - 總結：爲了獲取第一個子元素節點，咱們能夠這樣作：在IE678中用firstChild，在火狐谷歌IE9+之後用firstElementChild
    - 總結：爲了獲取最後一個子元素節點，咱們能夠這樣作：在IE678中用lastChild，在火狐谷歌IE9+之後用lastElementChild
  - 全部子節點
    - ```
     子節點數組 = 父節點.childNodes;   //獲取全部節點。
```
- ```
 子節點數組 = 父節點.children;   //獲取全部節點。用的最多。
```
    - ```
     nodeType == 1 表示的是元素節點（標籤） 。記住：元素就是標籤。
     
     nodeType == 2 表示是屬性節點 瞭解
     
     nodeType == 3 是文本節點 瞭解
```

3.節點操做

節點自己操做

建立節點

 新的標籤(元素節點) = document.createElement("標籤名");

好比,建立一個li標籤,或者建立一個不存在的adg標籤,能夠這樣作

 <script type="text/javascript">
     var a1 = document.createElement("li");   //建立一個li標籤
     var a2 = document.createElement("adbc");   //建立一個不存在的標籤
 
     console.log(a1);
     console.log(a2);
 
     console.log(typeof a1);
     console.log(typeof a2);
 </script>

插入節點

 父節點.appendChild(新的子節點);//方式1：父節點的最後插入一個新的子節點。 
 父節點.insertBefore(新的子節點,做爲參考的子節點);//方式2：在參考節點前插入一個新的節點。若是參考節點爲null，那麼他將在父節點最後插入一個子節點。

刪除節點

 父節點.removeChild(子節點);//用父節點刪除子節點。必需要指定是刪除哪一個子節點。
 node1.parentNode.removeChild(node1);//刪除本身這個節點

複製節點（克隆節點）

 要複製的節點.cloneNode();       //括號裏不帶參數和帶參數false，效果是同樣的。不帶參數/帶參數false：只複製節點自己，不復制子節點。
 要複製的節點.cloneNode(true);   //帶參數true：既複製節點自己，也複製其全部的子節點。

替換節點

 父節點.replaceChild(newnode, 某個節點);   //找到這個父標籤裏面的要被替換的子標籤，而後用新的標籤將該子標籤替換掉

節點的屬性操做

獲取節點屬性值

 元素節點.屬性;
 元素節點[屬性];

 元素節點.getAttribute("屬性名稱");

設置節點屬性值

     myNode.src = "images/2.jpg"   //修改src的屬性值
    myNode.className = "image2-box"; //修改class的name

  元素節點.setAttribute(屬性名, 新的屬性值);

刪除節點的屬性

   元素節點.removeAttribute(屬性名);

節點文本操做

獲取文本節點的值

 var divEle = document.getElementById("d1")
 divEle.innerText #輸入這個指令，一執行就能獲取該標籤和內部全部標籤的文本內容
 divEle.innerHTML #獲取的是該標籤內的全部內容，包括文本和標籤

設置文本節點的值

 var divEle = document.getElementById("d1")
 divEle.innerText="1"  
 divEle.innerHTML="<p>2</p>" #能識別成一個p標籤

獲取值的操做

elemenNode.value ; 適用於如下標籤 ,用戶輸入或者選擇類型的標籤: input,select,textarea

 var iEle = document.getElementById("i1");
 console.log(iEle.value);
 var sEle = document.getElementById("s1");
 console.log(sEle.value);
 var tEle = document.getElementById("t1");
 console.log(tEle.value);

class的操做

 className  獲取全部樣式類名(字符串)
 首先獲取標籤對象
 標籤對象.classList.remove(cls) 刪除指定類
 classList.add(cls) 添加類
 classList.contains(cls) 存在返回true，不然返回false
 classList.toggle(cls) 存在就刪除，不然添加，toggle的意思是切換，有了就給你刪除，若是沒有就給你加一個

指定css的操做

```
 obj.style.backgroundColor="red"
```

對於沒有中橫線的css屬性直接用style.屬性名便可,如:

 obj.style.margin
 obj.style.width
 obj.style.left
 obj.style.position

對於含有中橫線的css屬性,將中橫線後面的第一個字母換成大寫便可,如

 obj.style.marginTop
 obj.style.borderLeftWidth
 obj.style.zIndex
 obj.style.fontFamily

4.事件

JS是以事件驅動爲核心的一門語言
事件三要素
- 事件源,事件,事件驅動程序

代碼書寫步驟

 （1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 （2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
 （3）書寫事件驅動程序：關於DOM的操做

常見事件以下

獲取事件源

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

綁定事件的方式

直接綁定匿名函數

 <div id="box1" ></div>
 
 <script type="text/javascript">
     var div1 = document.getElementById("box1");
     //綁定事件的第一種方式
     div1.onclick = function () {
         alert("我是彈出的內容");
    }
 </script>

先單獨定義函數,再綁定

 <div id="box1" ></div>
 
 <script type="text/javascript">
     var div1 = document.getElementById("box1");
     //綁定事件的第二種方式
     div1.onclick = fn;   //注意，這裏是fn，不是fn()。fn()指的是返回值。
     //單獨定義函數
     function fn() {
         alert("我是彈出的內容");
    }
 </script>

注意上方代碼的註釋,綁定的時候,是fn,不是寫fn(),fn表明的是整個函數,fn()表明的是返回值

行內綁定

 <!--行內綁定-->
 <div id="box1" onclick="fn()"></div>
 
 <script type="text/javascript">
 
     function fn() {
         alert("我是彈出的內容");
    }
 
 </script>

事件驅動程序

 <style>
         #box {
             width: 100px;
             height: 100px;
             background-color: pink;
             cursor: pointer;
        }
     </style>
 </head>
 
 <body>
 
 <div id="box" ></div>
 
 <script type="text/javascript">
     var oDiv = document.getElementById("box");
     //點擊鼠標時，本來粉色的div變大了，背景變紅了
     oDiv.onclick = function () {
         oDiv.style.width = "200px";   //屬性值要寫引號
         oDiv.style.height = "200px";
         oDiv.style.backgroundColor = "red";   //屬性名是backgroundColor，不是background-Color
    }
 </script>

注意事項:
- 在js裏寫屬性值時，要用引號
- 在js裏寫屬性名時，是backgroundColor，不是CSS裏面的background-Color。記得全部的像css屬性的text-，line-、backgroun-*等在js中都寫成駝峯

onload事件

當頁面加載文本和圖片完畢後,觸發onload事件
有一點咱們要知道：js的加載是和html同步加載的。所以，若是使用元素在定義元素以前，容易報錯。這個時候，onload事件就能派上用場了，咱們能夠把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。

建議是：整個頁面上全部元素加載完畢在執行js內容。因此，window.onload能夠預防使用標籤在定義標籤以前。

onload事件(屏幕可視區域)

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>
     <body>
     </body>
     <script type="text/javascript">
         
         // 屏幕的可視區域
         window.onload = function(){
             
             // document.documentElement 獲取的是html標籤
             console.log(document.documentElement.clientWidth);
             console.log(document.documentElement.clientHeight);
             // 窗口大小發生變化時，會調用此方法
             window.onresize = function(){    
                 console.log(document.documentElement.clientWidth);
                 console.log(document.documentElement.clientHeight);
            }
        
             
        }
     </script>
 </html>

onload事件(offset系列)

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
            *{
                 padding: 0;
                 margin: 0;
            }
         </style>
         
     </head>
     <body style="height: 2000px">
         <div>
             <div class="wrap" style=" width: 300px;height: 300px; color: rgb(153, 153, 119);">>
                 <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">            
                 </div>
             </div>
         </div>
     </body>
     <script type="text/javascript">
         window.onload = function(){
             var box = document.getElementById('box')
             /*
              offsetWidth佔位寬 內容+padding+border
              offsetHeight佔位高 
              * offsetTop: 若是盒子沒有設置定位 到body的頂部的距離,若是盒子設置定位，那麼是以父輩爲基準的top值
              * offsetLeft： 若是盒子沒有設置定位 到body的左部的距離，若是盒子設置定位，那麼是以父輩爲基準的left值
              
              * */
             console.log(box.offsetTop)
             console.log(box.offsetLeft)
             console.log(box.offsetWidth)
             console.log(box.offsetHeight)
             
        }
         
     </script>
 </html>

onscroll事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。