BOM,DOM

時間  2019-11-16
標籤 bom dom 欄目 HTML 简体版
原文   原文鏈接

BOM

BOM的介紹

JavaScript基礎分爲三個部分：javascript

  • ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。css

  • DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。html

  • BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。java

 

什麼是BOM

BOM：Browser Object Model，瀏覽器對象模型。node

BOM的結構圖:linux

從上圖也能夠看出：ios

  • window對象是BOM的頂層(核心)對象，全部對象都是經過它延伸出來的，也能夠稱爲window的子對象。數組

  • DOM是BOM的一部分。瀏覽器

window對象：數據結構

  • window對象是JavaScript中的頂級對象。

  • 全局變量、自定義函數也是window對象的屬性和方法。

  • window對象下的屬性和方法調用時，能夠省略window。

下面講一下 BOM 的常見內置方法和內置對象。

彈出系統對話框

好比說，alert(1)是window.alert(1)的簡寫，由於它是window的子方法。

系統對話框有三種：

    alert();    //不一樣瀏覽器中的外觀是不同的
    confirm();  //兼容很差
    prompt();   //不推薦使用

打開窗口、關閉窗口

一、打開窗口：

window.open(url,target)

參數解釋：

  • url：要打開的地址。

  • target：新窗口的位置。能夠是：_blank 、_self、 _parent 父框架。

複製代碼
複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--行間的js中的open() window不能省略-->
        <button onclick="window.open('https://www.luffycity.com/')">路飛學城</button>
        
        <button>打開百度</button>
        <button onclick="window.close()">關閉</button>
        <button>關閉</button>
        
    </body>
    <script type="text/javascript">
        
        var oBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3];
        
        oBtn.onclick = function(){
                      //open('https://www.baidu.com')
            
            //打開空白頁面
            open('about:blank',"_self")
        }
        closeBtn.onclick = function(){
            if(confirm("是否關閉？")){
                close();
            }
        }
        
    </script>
</html>
複製代碼
複製代碼

location對象

window.location能夠簡寫成location。location至關於瀏覽器地址欄，能夠將url解析成獨立的片斷。

location對象的屬性

  • href：跳轉

  • hash 返回url中#後面的內容，包含#

  • host 主機名，包括端口

  • hostname 主機名

  • pathname url中的路徑部分

  • protocol 協議 通常是http、https

  • search 查詢字符串

 

location.href屬性舉例：

舉例1：點擊盒子時，進行跳轉。

複製代碼
複製代碼 
<body>
<div>smyhvae</div>
<script>

    var div = document.getElementsByTagName("div")[0];

    div.onclick = function () {
        location.href = "http://www.baidu.com";   //點擊div時，跳轉到指定連接
 //     window.open("http://www.baidu.com","_blank");  //方式二
    }

</script>
</body>
複製代碼
複製代碼

舉例2：5秒後自動跳轉到百度。

有時候，當咱們訪問一個不存在的網頁時，會提示5秒後自動跳轉到指定頁面，此時就能夠用到location。舉例：

 

複製代碼
複製代碼 
<script>

    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>
複製代碼
複製代碼

location對象的方法

location.reload()：從新加載

複製代碼
複製代碼 
setTimeout(function(){
         //3秒以後讓網頁整個刷新
    window.location.reload();
            
            
},3000)
複製代碼
複製代碼

window.navigator 的一些屬性能夠獲取客戶端的一些信息。

  • userAgent：系統，瀏覽器)

  • platform：瀏覽器支持的系統，win/mac/linux

 例子：

    console.log(navigator.userAgent);
    console.log(navigator.platform);

history對象

一、後退：

  • history.back()

  • history.go(-1)：0是刷新

二、前進：

  • history.forward()

  • history.go(1)

用的很少。由於瀏覽器中已經自帶了這些功能的按鈕：

在js中的定時器分兩種：一、setTimeout() 二、setInterval()

 計時相關:定時器

1.setTimeOut()

只在指定時間後執行一次

複製代碼
複製代碼 
/定時器 異步運行  
function hello(){  
alert("hello");  
}  
//使用方法名字執行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  
window.clearTimeout(t1);//去掉定時器
複製代碼
複製代碼

2.setInterval()

在指定時間爲週期循環執行

複製代碼
複製代碼 
/實時刷新  時間單位爲毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查詢 */  
function refreshQuery(){  
  console.log('每8秒調一次') 
}
複製代碼
複製代碼

兩種方法根據不一樣的場景和業務需求擇而取之，

對於這兩個方法，須要注意的是若是要求在每隔一個固定的時間間隔後就精確地執行某動做，那麼最好使用setInterval，而若是不想因爲連續調用產生互相干擾的問題，尤爲是每次函數的調用須要繁重的計算以及很長的處理時間，那麼最好使用setTimeout

DOM介紹

什麼是DOM:

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

DOM就是由節點組成的。

　　解析過程:

HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。而後操做的時候修改的是該元素的屬性。

　　DOM樹（一切都是節點）:

DOM的數據結構以下：

 

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

    • 元素節點：HMTL標籤。

    • 文本節點：標籤中的文字（好比標籤之間的空格、換行）

    • 屬性節點：：標籤的屬性。

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

　　DOM能夠作什麼:

    • 找對象（元素節點）

    • 設置元素的屬性值

    • 設置元素的樣式

    • 動態建立和刪除元素

    • 事件的觸發響應：事件源、事件、事件的驅動程序

DOM節點的獲取:

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

操做元素節點，必須首先找到該節點。有三種方式能夠獲取DOM節點：

    var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤

    var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

既然方式2、方式三獲取的是標籤數組，那麼習慣性是先遍歷以後再使用。

特殊狀況：數組中的值只有1個。即使如此，這一個值也是包在數組裏的。這個值的獲取方式以下：

    document.getElementsByTagName("div1")[0];    //取數組中的第一個元素

    document.getElementsByClassName("hehe")[0];  //取數組中的第一個元素

 

　　DOM訪問關係的獲取:

DOM的節點並非孤立的，所以能夠經過DOM節點之間的相對關係對它們進行訪問。以下：

節點的訪問關係，是以屬性的方式存在的。

JS中的父子兄訪問關係：

這裏咱們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。

 

　　獲取父節點:

調用者就是節點。一個節點只有一個父節點，調用方式就是

    節點.parentNode

（1）nextSibling：

     指的是下一個節點（包括標籤、空文檔和換行節點）

      • 火狐、谷歌、IE9+版本：都指的是下一個節點（包括標籤、空文檔和換行節點）。

      • IE678版本：指下一個元素節點（標籤）。

（2）nextElementSibling：

      • 火狐、谷歌、IE9+版本：都指的是下一個元素節點（標籤）。

總結：爲了獲取下一個元素節點，咱們能夠這樣作：在IE678中用nextSibling，在火狐谷歌IE9+之後用nextElementSibling，因而，綜合這兩個屬性，能夠這樣寫：

下一個兄弟節點 = 節點.nextElementSibling || 節點.nextSibling

previous的中文是: 前一個

（1）previousSibling：

      • 火狐、谷歌、IE9+版本：都指的是前一個節點（包括標籤、空文檔和換行節點）。

      • IE678版本：指前一個元素節點（標籤）。

　　（2）previousElementSibling：

      • 火狐、谷歌、IE9+版本：都指的是前一個元素節點（標籤）。

　　總結：爲了獲取前一個元素節點，咱們能夠這樣作：在IE678中用previousSibling，在火狐谷歌IE9+之後用previousElementSibling，因而，綜合這兩個屬性，能夠這樣寫：

 前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling

　　三、補充：得到任意一個兄弟節點：

節點本身.parentNode.children[index];  //隨意獲得兄弟節點

 

　　獲取單個的子節點:

 

一、第一個子節點 | 第一個子元素節點：

（1）firstChild：

  • 火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標籤、空文檔和換行節點）。

  • IE678版本：指第一個子元素節點（標籤）。

（2）firstElementChild：

  • 火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標籤）。

總結：爲了獲取第一個子元素節點，咱們能夠這樣作：在IE678中用firstChild，在火狐谷歌IE9+之後用firstElementChild，因而，綜合這兩個屬性，能夠這樣寫：

 第一個子元素節點 = 節點.firstElementChild || 節點.firstChild

二、最後一個子節點 | 最後一個子元素節點：

（1）lastChild：

  • 火狐、谷歌、IE9+版本：都指的是最後一個子節點（包括標籤、空文檔和換行節點）。

  • IE678版本：指最後一個子元素節點（標籤）。

（2）lastElementChild：

  • 火狐、谷歌、IE9+版本：都指的是最後一個子元素節點（標籤）。

總結：爲了獲取最後一個子元素節點，咱們能夠這樣作：在IE678中用lastChild，在火狐谷歌IE9+之後用lastElementChild，因而，綜合這兩個屬性，能夠這樣寫：

 最後一個子元素節點 = 節點.lastElementChild || 節點.lastChild

 

　　獲取全部的子節點:

 

（1）childNodes：標準屬性。返回的是指定元素的子節點的集合（包括元素節點、全部屬性、文本節點）。是W3C的親兒子。

    • 火狐 谷歌等高本版會把換行也看作是子節點。（瞭解）

用法：

子節點數組 = 父節點.childNodes;   //獲取全部節點。

（2）children：非標準屬性。返回的是指定元素的子元素節點的集合。【重要】

    • 它只返回HTML節點，甚至不返回文本節點。
    • 在IE6/7/8中包含註釋節點（在IE678中，註釋節點不要寫在裏面）。

雖然不是標準的DOM屬性，但它和innerHTML方法同樣，獲得了幾乎全部瀏覽器的支持。

用法：（用的最多）

子節點數組 = 父節點.children;   //獲取全部節點。用的最多。

nodeType

這裏講一下nodeType。

    • nodeType == 1 表示的是元素節點（標籤） 。記住：元素就是標籤。

    • nodeType == 2 表示是屬性節點 瞭解

    • nodeType == 3 是文本節點 瞭解

DOM節點操做（重要）:

　　建立節點:

格式以下：

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

好比，若是咱們想建立一個li標籤，或者是建立一個不存在的adbc標籤，能夠這樣作：

複製代碼
複製代碼 
<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>
複製代碼
複製代碼

結果：

 

　　插入節點:

插入節點有兩種方式，它們的含義是不一樣的。

方式1：

 父節點.appendChild(新的子節點);

解釋：父節點的最後插入一個新的子節點。

方式2：

父節點.insertBefore(新的子節點,做爲參考的子節點);

解釋：

    • 在參考節點前插入一個新的節點。
    • 若是參考節點爲null，那麼他將在父節點最後插入一個子節點。

　　刪除節點:

格式以下：

  父節點.removeChild(子節點);

解釋：用父節點刪除子節點。必需要指定是刪除哪一個子節點。

若是我想刪除本身這個節點，能夠這麼作：

node1.parentNode.removeChild(node1);

　　複製節點（克隆節點）:

格式以下：

  要複製的節點.cloneNode();       //括號裏不帶參數和帶參數false，效果是同樣的。

  要複製的節點.cloneNode(true);

括號裏帶不帶參數，效果是不一樣的。解釋以下：

    • 不帶參數/帶參數false：只複製節點自己，不復制子節點。

    • 帶參數true：既複製節點自己，也複製其全部的子節點。

　　設置節點的屬性:

　　　　一、獲取節點的屬性值:　　　　　　

方式1：

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

舉例：（獲取節點的屬性值）

複製代碼
複製代碼 
<body>
<img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1">

<script type="text/javascript">
    var myNode = document.getElementsByTagName("img")[0];

    console.log(myNode.src);
    console.log(myNode.className);    //注意，是className，不是class
    console.log(myNode.title);

    console.log("------------");

    console.log(myNode["src"]);
    console.log(myNode["className"]); //注意，是className，不是class
    console.log(myNode["title"]);
</script>
</body>
複製代碼
複製代碼

方式2：（推薦）

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

例子：

    console.log(myNode.getAttribute("src"));
    console.log(myNode.getAttribute("class"));   //注意是class，不是className
    console.log(myNode.getAttribute("title"));

方式1和方式2的區別在於：前者是直接操做標籤，後者是把標籤做爲DOM節點。推薦方式2。

　　　　二、設置節點的屬性值:

方式1舉例：（設置節點的屬性值）

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

方式2：（推薦）

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

方式2舉例：（設置節點的屬性值)

    myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

補充：

innerHTML、innerText 、value

 

　　　　三、刪除節點的屬性:

格式：

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

舉例：（刪除節點的屬性）

    myNode.removeAttribute("class");
    myNode.removeAttribute("id");

 

DOM事件操做

1、JavaScript的組成:

JavaScript基礎分爲三個部分：

    • ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。

    • DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。

    • BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。

2、事件:

ps: JS 就是以事件驅動爲核心的一門語言.

　　事件的三要素:   事件源、事件、事件驅動程序:

 

　　　　 事件源：引起後續事件的html標籤。

 

 

　　　　 事件：js已經定義好了（見下圖）。

事件名 說明
onclick 鼠標單擊
ondblclick 鼠標雙擊
onkeyup 按下並釋放鍵盤上的一個鍵時觸發
onchange 文本內容或下拉菜單中的選項發生改變
onfocus 得到焦點, 表示文本框等得到鼠標光標
onblur 失去焦點, 表示文本框等失去鼠標光標
onmouseover 鼠標懸停, 即鼠標停留在圖片等的上方
onmouseout 鼠標移出, 即離開圖片等所在的區域
onload 網頁文檔加載事件
onunload 關閉網頁時
onsubmit 表單提交事件

onreset

 重置表單時.

 

　　　　 事件驅動程序：對樣式和html的操做。也就是DOM。

代碼書寫步驟以下：（重要）

    • （1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

    • （2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };

    • （3）書寫事件驅動程序：關於DOM的操做

　　　　一、獲取事件源的方式（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>
複製代碼
複製代碼

注意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。由於綁定的這段代碼不是寫在js代碼裏的，而是被識別成了字符串。

　　　　三、事件驅動程序:

咱們在上面是拿alert舉例，不只如此，咱們還能夠操做標籤的屬性和樣式。舉例以下：

複製代碼
複製代碼 
  <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事件。

舉例：

<script type="text/javascript">
    window.onload = function () {
        console.log("小馬哥");  //等頁面加載完畢時，打印字符串
    }
</script>

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

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

　

 

 

 

 

DOM介紹

什麼是DOM:

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

DOM就是由節點組成的。

　　解析過程:

HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。而後操做的時候修改的是該元素的屬性。

　　DOM樹（一切都是節點）:

DOM的數據結構以下：

 

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

    • 元素節點：HMTL標籤。

    • 文本節點：標籤中的文字（好比標籤之間的空格、換行）

    • 屬性節點：：標籤的屬性。

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

　　DOM能夠作什麼:

    • 找對象（元素節點）

    • 設置元素的屬性值

    • 設置元素的樣式

    • 動態建立和刪除元素

    • 事件的觸發響應：事件源、事件、事件的驅動程序

DOM節點的獲取:

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

操做元素節點，必須首先找到該節點。有三種方式能夠獲取DOM節點：

    var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤

    var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

既然方式2、方式三獲取的是標籤數組，那麼習慣性是先遍歷以後再使用。

特殊狀況：數組中的值只有1個。即使如此，這一個值也是包在數組裏的。這個值的獲取方式以下：

    document.getElementsByTagName("div1")[0];    //取數組中的第一個元素

    document.getElementsByClassName("hehe")[0];  //取數組中的第一個元素

 

　　DOM訪問關係的獲取:

DOM的節點並非孤立的，所以能夠經過DOM節點之間的相對關係對它們進行訪問。以下：

節點的訪問關係，是以屬性的方式存在的。

JS中的父子兄訪問關係：

這裏咱們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。

 

　　獲取父節點:

調用者就是節點。一個節點只有一個父節點，調用方式就是

    節點.parentNode

（1）nextSibling：

     指的是下一個節點（包括標籤、空文檔和換行節點）

      • 火狐、谷歌、IE9+版本：都指的是下一個節點（包括標籤、空文檔和換行節點）。

      • IE678版本：指下一個元素節點（標籤）。

（2）nextElementSibling：

      • 火狐、谷歌、IE9+版本：都指的是下一個元素節點（標籤）。

總結：爲了獲取下一個元素節點，咱們能夠這樣作：在IE678中用nextSibling，在火狐谷歌IE9+之後用nextElementSibling，因而，綜合這兩個屬性，能夠這樣寫：

下一個兄弟節點 = 節點.nextElementSibling || 節點.nextSibling

previous的中文是: 前一個

（1）previousSibling：

      • 火狐、谷歌、IE9+版本：都指的是前一個節點（包括標籤、空文檔和換行節點）。

      • IE678版本：指前一個元素節點（標籤）。

　　（2）previousElementSibling：

      • 火狐、谷歌、IE9+版本：都指的是前一個元素節點（標籤）。

　　總結：爲了獲取前一個元素節點，咱們能夠這樣作：在IE678中用previousSibling，在火狐谷歌IE9+之後用previousElementSibling，因而，綜合這兩個屬性，能夠這樣寫：

 前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling

　　三、補充：得到任意一個兄弟節點：

節點本身.parentNode.children[index];  //隨意獲得兄弟節點

 

　　獲取單個的子節點:

 

一、第一個子節點 | 第一個子元素節點：

（1）firstChild：

  • 火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標籤、空文檔和換行節點）。

  • IE678版本：指第一個子元素節點（標籤）。

（2）firstElementChild：

  • 火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標籤）。

總結：爲了獲取第一個子元素節點，咱們能夠這樣作：在IE678中用firstChild，在火狐谷歌IE9+之後用firstElementChild，因而，綜合這兩個屬性，能夠這樣寫：

 第一個子元素節點 = 節點.firstElementChild || 節點.firstChild

二、最後一個子節點 | 最後一個子元素節點：

（1）lastChild：

  • 火狐、谷歌、IE9+版本：都指的是最後一個子節點（包括標籤、空文檔和換行節點）。

  • IE678版本：指最後一個子元素節點（標籤）。

（2）lastElementChild：

  • 火狐、谷歌、IE9+版本：都指的是最後一個子元素節點（標籤）。

總結：爲了獲取最後一個子元素節點，咱們能夠這樣作：在IE678中用lastChild，在火狐谷歌IE9+之後用lastElementChild，因而，綜合這兩個屬性，能夠這樣寫：

 最後一個子元素節點 = 節點.lastElementChild || 節點.lastChild

 

　　獲取全部的子節點:

 

（1）childNodes：標準屬性。返回的是指定元素的子節點的集合（包括元素節點、全部屬性、文本節點）。是W3C的親兒子。

    • 火狐 谷歌等高本版會把換行也看作是子節點。（瞭解）

用法：

子節點數組 = 父節點.childNodes;   //獲取全部節點。

（2）children：非標準屬性。返回的是指定元素的子元素節點的集合。【重要】

    • 它只返回HTML節點，甚至不返回文本節點。
    • 在IE6/7/8中包含註釋節點（在IE678中，註釋節點不要寫在裏面）。

雖然不是標準的DOM屬性，但它和innerHTML方法同樣，獲得了幾乎全部瀏覽器的支持。

用法：（用的最多）

子節點數組 = 父節點.children;   //獲取全部節點。用的最多。

nodeType

這裏講一下nodeType。

    • nodeType == 1 表示的是元素節點（標籤） 。記住：元素就是標籤。

    • nodeType == 2 表示是屬性節點 瞭解

    • nodeType == 3 是文本節點 瞭解

DOM節點操做（重要）:

　　建立節點:

格式以下：

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

好比，若是咱們想建立一個li標籤，或者是建立一個不存在的adbc標籤，能夠這樣作：

複製代碼
複製代碼 
<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>
複製代碼
複製代碼

結果：

 

　　插入節點:

插入節點有兩種方式，它們的含義是不一樣的。

方式1：

 父節點.appendChild(新的子節點);

解釋：父節點的最後插入一個新的子節點。

方式2：

父節點.insertBefore(新的子節點,做爲參考的子節點);

解釋：

    • 在參考節點前插入一個新的節點。
    • 若是參考節點爲null，那麼他將在父節點最後插入一個子節點。

　　刪除節點:

格式以下：

  父節點.removeChild(子節點);

解釋：用父節點刪除子節點。必需要指定是刪除哪一個子節點。

若是我想刪除本身這個節點，能夠這麼作：

node1.parentNode.removeChild(node1);

　　複製節點（克隆節點）:

格式以下：

  要複製的節點.cloneNode();       //括號裏不帶參數和帶參數false，效果是同樣的。

  要複製的節點.cloneNode(true);

括號裏帶不帶參數，效果是不一樣的。解釋以下：

    • 不帶參數/帶參數false：只複製節點自己，不復制子節點。

    • 帶參數true：既複製節點自己，也複製其全部的子節點。

　　設置節點的屬性:

　　　　一、獲取節點的屬性值:　　　　　　

方式1：

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

舉例：（獲取節點的屬性值）

複製代碼
複製代碼 
<body>
<img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1">

<script type="text/javascript">
    var myNode = document.getElementsByTagName("img")[0];

    console.log(myNode.src);
    console.log(myNode.className);    //注意，是className，不是class
    console.log(myNode.title);

    console.log("------------");

    console.log(myNode["src"]);
    console.log(myNode["className"]); //注意，是className，不是class
    console.log(myNode["title"]);
</script>
</body>
複製代碼
複製代碼

方式2：（推薦）

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

例子：

    console.log(myNode.getAttribute("src"));
    console.log(myNode.getAttribute("class"));   //注意是class，不是className
    console.log(myNode.getAttribute("title"));

方式1和方式2的區別在於：前者是直接操做標籤，後者是把標籤做爲DOM節點。推薦方式2。

　　　　二、設置節點的屬性值:

方式1舉例：（設置節點的屬性值）

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

方式2：（推薦）

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

方式2舉例：（設置節點的屬性值)

    myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

補充：

innerHTML、innerText 、value

 

　　　　三、刪除節點的屬性:

格式：

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

舉例：（刪除節點的屬性）

    myNode.removeAttribute("class");
    myNode.removeAttribute("id");
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程