国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS總結篇--[總結]JS操作DOM常用API詳解

malakashi / 1292人閱讀

摘要:文本整理了操作的一些常用的,根據其作用整理成為創建,修改,查詢等多種類型的,主要用于復習基礎知識,加深對原生的認識。方法主要是用于添加大量節點到文檔中時會使用到。

文本整理了javascript操作DOM的一些常用的api,根據其作用整理成為創建,修改,查詢等多種類型的api,主要用于復習基礎知識,加深對原生js的認識。

基本概念

在講解操作DOM的api之前,首先我們來復習一下一些基本概念,這些概念是掌握api的關鍵,必須理解它們。

Node類型

DOM1級定義了一個Node接口,該接口由DOM中所有節點類型實現。這個Node接口在JS中是作為Node類型實現的。在IE9以下版本無法訪問到這個類型,JS中所有節點都繼承自Node類型,都共享著相同的基本屬性和方法。

每個節點都有一個nodeType屬性,用于表明節點的類型。節點類型由在Node類型中定義的下列12個數值常量來表示,任何節點類型必居其一:

Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12

假設我們要判斷一個Node是不是元素,我們可以這樣判斷:

if(someNode.nodeType == 1){
    console.log("Node is a element");
}

開發人員最常用的就是元素和文本節點。

這些Node類型中,我們最常用的就是elementtextattributecommentdocumentdocument_fragment這幾種類型。
我們簡單來介紹一下這幾種類型:

Element類型

Element提供了對元素標簽名,子節點和特性的訪問,我們常用HTML元素比如div,span,a等標簽就是element中的一種。Element有下面幾條特性:
(1)nodeType為1
(2)nodeName為元素標簽名,tagName也是返回標簽名
(3)nodeValue為null
(4)parentNode可能是Document或Element
(5)子節點可能是Element,Text,Comment,Processing_Instruction,CDATASection或EntityReference

Text類型

Text表示文本節點,它包含的是純文本內容,不能包含html代碼,但可以包含轉義后的html代碼。Text有下面的特性:
(1)nodeType為3
(2)nodeName為#text
(3)nodeValue為文本內容
(4)parentNode是一個Element
(5)沒有子節點

Attr類型

Attr類型表示元素的特性,相當于元素的attributes屬性中的節點,它有下面的特性:
(1)nodeType值為2
(2)nodeName是特性的名稱
(3)nodeValue是特性的值
(4)parentNode為null

Comment類型

Comment表示HTML文檔中的注釋,它有下面的幾種特征:
(1)nodeType為8
(2)nodeName為#comment
(3)nodeValue為注釋的內容
(4)parentNode可能是Document或Element
(5)沒有子節點

Document

Document表示文檔,在瀏覽器中,document對象是HTMLDocument的一個實例,表示整個頁面,它同時也是window對象的一個屬性。Document有下面的特性:
(1)nodeType為9
(2)nodeName為#document
(3)nodeValue為null
(4)parentNode為null
(5)子節點可能是一個DocumentType或Element

DocumentFragment類型

DocumentFragment是所有節點中唯一一個沒有對應標記的類型,它表示一種輕量級的文檔,可能當作一個臨時的倉庫用來保存可能會添加到文檔中的節點。DocumentFragment有下面的特性:
(1)nodeType為11
(2)nodeName為#document-fragment
(3)nodeValue為null
(4)parentNode為null

我們簡單地介紹了幾種常見的Node類型,要記住,HTML中的節點并不只是包括元素節點,它還包括文本節點,注釋節點等等。在這里我們只是簡單地說明了幾種常見的節點,想要進一步學習的同學可以查找一下相關資料。

節點創建型api

在這里,我將常用的DOM操作api進行分類,首先要介紹的是創建型的api。這一類型的api,簡而言之就是用來創建節點的。

createElement

createElement通過傳入指定的一個標簽名來創建一個元素,如果傳入的標簽名是一個未知的,則會創建一個自定義的標簽,注意:IE8以下瀏覽器不支持自定義標簽。
使用如下:

var div = document.createElement("div");

使用createElement要注意:通過createElement創建的元素并不屬于html文檔,它只是創建出來,并未添加到html文檔中,要調用appendChild或insertBefore等方法將其添加到HTML文檔樹中。

createTextNode

createTextNode用來創建一個文本節點,用法如下:

var textNode = document.createTextNode("一個TextNode");

createTextNode接收一個參數,這個參數就是文本節點中的文本,和createElement一樣,創建后的文本節點也只是獨立的一個節點,同樣需要appendChild將其添加到HTML文檔樹中。

cloneNode

cloneNode是用來返回調用方法的節點的一個副本,它接收一個bool參數,用來表示是否復制子元素,使用如下:

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 傳入true
parent2.id = "parent2";

這段代碼通過cloneNode復制了一份parent元素,其中cloneNode的參數為true,表示parent的子節點也被復制,如果傳入false,則表示只復制了parent節點。

我們看看這個例子:

我是父元素的文本
我是子元素
var parent = document.getElementById("parent"); document.getElementById("btnCopy").onclick = function(){ var parent2 = parent.cloneNode(true); parent2.id = "parent2"; document.body.appendChild(parent2); }

這段代碼很簡單,主要是綁定button事件,事件內容是復制了一個parent,修改其id,然后添加到文檔中。
這里有幾點要注意:

(1)和createElement一樣,cloneNode創建的節點只是游離有html文檔外的節點,要調用appendChild方法才能添加到文檔樹中
(2)如果復制的元素有id,則其副本同樣會包含該id,由于id具有唯一性,所以在復制節點后必須要修改其id
(3)調用接收的bool參數最好傳入,如果不傳入該參數,不同瀏覽器對其默認值的處理可能不同

除此之外,我們還有一個需要注意的點:
如果被復制的節點綁定了事件,則副本也會跟著綁定該事件嗎?這里要分情況討論:
(1)如果是通過addEventListener或者比如onclick進行綁定事件,則副本節點不會綁定該事件
(2)如果是內聯方式綁定比如:

這樣的話,副本節點同樣會觸發事件。

createDocumentFragment

createDocumentFragment方法用來創建一個DocumentFragment。在前面我們說到DocumentFragment表示一種輕量級的文檔,它的作用主要是存儲臨時的節點用來準備添加到文檔中。
createDocumentFragment方法主要是用于添加大量節點到文檔中時會使用到。假設要循環一組數據,然后創建多個節點添加到文檔中,比如示例:

    document.getElementById("btnAdd").onclick = function(){ var list = document.getElementById("list"); for(var i = 0;i < 100; i++){ var li = document.createElement("li"); li.textContent = i; list.appendChild(li); } }

    這段代碼將按鈕綁定了一個事件,這個事件創建了100個li節點,然后依次將其添加HTML文檔中。這樣做有一個缺點:每次一創建一個新的元素,然后添加到文檔樹中,這個過程會造成瀏覽器的回流。所謂回流簡單說就是指元素大小和位置會被重新計算,如果添加的元素太多,會造成性能問題。這個時候,就是使用createDocumentFragment了。
    DocumentFragment不是文檔樹的一部分,它是保存在內存中的,所以不會造成回流問題。我們修改上面的代碼如下:

    document.getElementById("btnAdd").onclick = function(){
        var list = document.getElementById("list");    
        var fragment = document.createDocumentFragment();
    
        for(var i = 0;i < 100; i++){
          var li = document.createElement("li");
            li.textContent = i;
            fragment.appendChild(li);
        }
    
        list.appendChild(fragment);
    }

    優化后的代碼主要是創建了一個fragment,每次生成的li節點先添加到fragment,最后一次性添加到list。

    創建型API總結

    創建型api主要包括createElement,createTextNode,cloneNode和createDocumentFragment四個方法,需要注意下面幾點:
    (1)它們創建的節點只是一個孤立的節點,要通過appendChild添加到文檔中
    (2)cloneNode要注意如果被復制的節點是否包含子節點以及事件綁定等問題
    (3)使用createDocumentFragment來解決添加大量節點時的性能問題

    頁面修改型API

    前面我們提到創建型api,它們只是創建節點,并沒有真正修改到頁面內容,而是要調用appendChild來將其添加到文檔樹中。我在這里將這類會修改到頁面內容歸為一類。
    修改頁面內容的api主要包括:appendChild,insertBefore,removeChild,replaceChild。

    appendChild

    appendChild我們在前面已經用到多次,就是將指定的節點添加到調用該方法的節點的子元素的末尾。調用方法如下:

    parent.appendChild(child);

    child節點將會作為parent節點的最后一個子節點。
    appendChild這個方法很簡單,但是還有有一點需要注意:如果被添加的節點是一個頁面中存在的節點,則執行后這個節點將會添加到指定位置,其原本所在的位置將移除該節點,也就是說不會同時存在兩個該節點在頁面上,相當于把這個節點移動到另一個地方。我們來看例子:

    要被添加的節點



    要移動的位置
    document.getElementById("btnMove").onclick = function(){ var child = document.getElementById("child"); document.getElementById("parent").appendChild(child); }

    這段代碼主要是獲取頁面上的child節點,然后添加到指定位置,可以看到原本的child節點被移動到parent中了。
    這里還有一個要注意的點:如果child綁定了事件,被移動時,它依然綁定著該事件。

    insertBefore

    insertBefore用來添加一個節點到一個參照節點之前,用法如下:

    parentNode.insertBefore(newNode,refNode);

    parentNode表示新節點被添加后的父節點
    newNode表示要添加的節點
    refNode表示參照節點,新節點會添加到這個節點之前
    我們來看這個例子:

    父節點
    子元素
    var parent = document.getElementById("parent"); var child = document.getElementById("child"); document.getElementById("insertNode").onclick = function(){ var newNode = document.createElement("div"); newNode.textContent = "新節點" parent.insertBefore(newNode,child); }

    這段代碼創建了一個新節點,然后添加到child節點之前。
    和appendChild一樣,如果插入的節點是頁面上的節點,則會移動該節點到指定位置,并且保留其綁定的事件。

    關于第二個參數參照節點還有幾個注意的地方:

    (1)refNode是必傳的,如果不傳該參數會報錯
    (2)如果refNode是undefined或null,則insertBefore會將節點添加到子元素的末尾

    removeChild

    removeChild顧名思義,就是刪除指定的子節點并返回,用法如下:

    var deletedChild = parent.removeChild(node);

    deletedChild指向被刪除節點的引用,它等于node,被刪除的節點仍然存在于內存中,可以對其進行下一步操作。
    注意:如果被刪除的節點不是其子節點,則程序將會報錯。我們可以通過下面的方式來確保可以刪除:

    if(node.parentNode){
        node.parentNode.removeChild(node);
    }

    通過節點自己獲取節點的父節點,然后將自身刪除。

    replaceChild

    replaceChild用于使用一個節點替換另一個節點,用法如下:

    parent.replaceChild(newChild,oldChild);

    newChild是替換的節點,可以是新的節點,也可以是頁面上的節點,如果是頁面上的節點,則其將被轉移到新的位置
    oldChild是被替換的節點

    頁面修改型API總結

    頁面修改型api主要是這四個接口,要注意幾個特點:
    (1)不管是新增還是替換節點,如果新增或替換的節點是原本存在頁面上的,則其原來位置的節點將被移除,也就是說同一個節點不能存在于頁面的多個位置
    (2)節點本身綁定的事件會不會消失,會一直保留著。

    節點查詢型API

    節點查詢型API也是非常常用的api,下面我們分別說明一下每一個api的使用。

    document.getElementById

    這個接口很簡單,根據元素id返回元素,返回值是Element類型,如果不存在該元素,則返回null。
    使用這個接口有幾點要注意:
    (1)元素的Id是大小寫敏感的,一定要寫對元素的id
    (2)HTML文檔中可能存在多個id相同的元素,則返回第一個元素
    (3)只從文檔中進行搜索元素,如果創建了一個元素并指定id,但并沒有添加到文檔中,則這個元素是不會被查找到的

    document.getElementsByTagName

    這個接口根據元素標簽名獲取元素,返回一個即時的HTMLCollection類型,什么是即時的HTMLCollection類型呢?我們來看看這個示例:

    div1
    div2
    var divList = document.getElementsByTagName("div"); document.getElementById("btnAddDiv").onclick = function(){ var div = document.createElement("div"); div.textContent ="div" + (divList.length+1); document.body.appendChild(div); } document.getElementById("btnShowCount").onclick = function(){ alert(divList.length); }

    這段代碼中有兩個按鈕,一個按鈕是顯示HTMLCollection元素的個數,另一個按鈕可以新增一個div標簽到文檔中。前面提到HTMLCollcetion元素是即時的表示該集合是隨時變化的,也就是是文檔中有幾個div,它會隨時進行變化,當我們新增一個div后,再訪問HTMLCollection時,就會包含這個新增的div。

    使用document.getElementsByTagName這個方法有幾點要注意:

    (1)如果要對HTMLCollection集合進行循環操作,最好將其長度緩存起來,因為每次循環都會去計算長度,暫時緩存起來可以提高效率
    (2)如果沒有存在指定的標簽,該接口返回的不是null,而是一個空的HTMLCollection
    (3)“*”表示所有標簽

    document.getElementsByName

    getElementsByName主要是通過指定的name屬性來獲取元素,它返回一個即時的NodeList對象。
    使用這個接口主要要注意幾點:

    (1)返回對象是一個即時的NodeList,它是隨時變化的
    (2)在HTML元素中,并不是所有元素都有name屬性,比如div是沒有name屬性的,但是如果強制設置div的name屬性,它也是可以被查找到的
    (3)在IE中,如果id設置成某個值,然后傳入getElementsByName的參數值和id值一樣,則這個元素是會被找到的,所以最好不好設置同樣的值給id和name

    document.getElementsByClassName

    這個API是根據元素的class返回一個即時的HTMLCollection,用法如下:

    var elements = document.getElementsByClassName(names);

    這個接口有下面幾點要注意:

    (1)返回結果是一個即時的HTMLCollection,會隨時根據文檔結構變化
    (2)IE9以下瀏覽器不支持
    (3)如果要獲取2個以上classname,可傳入多個classname,每個用空格相隔,例如:

    var elements = document.getElementsByClassName("test1 test2");
    document.querySelector和document.querySelectorAll

    這兩個api很相似,通過css選擇器來查找元素,注意選擇器要符合CSS選擇器的規則。
    首先來介紹一下document.querySelector。
    document.querySelector返回第一個匹配的元素,如果沒有匹配的元素,則返回null。
    注意,由于返回的是第一個匹配的元素,這個api使用的深度優先搜索來獲取元素。我們來看這個例子:

    第三級的span
    同級的第二個div
    document.getElementById("btnGet").addEventListener("click",function(){ var element = document.querySelector(".test"); alert(element.textContent); })

    這個例子很簡單,就是兩個class都包含“test”的元素,一個在文檔樹的前面,但是它在第三級,另一個在文檔樹的后面,但它在第一級,通過querySelector獲取元素時,它通過深度優先搜索,拿到文檔樹前面的第三級的元素。

    document.querySelectorAll的不同之處在于它返回的是所有匹配的元素,而且可以匹配多個選擇符,我們來看看下面這個例子:

    class為test
    id為test
    document.getElementById("btnShow").addEventListener("click",function(){ var elements = document.querySelectorAll("#test,.test"); for(var i = 0,length = elements.length;i

    這段代碼通過querySelectorAll,使用id選擇器和class選擇器選擇了兩個元素,并依次輸出其內容。要注意兩點:

    (1)querySelectorAll也是通過深度優先搜索,搜索的元素順序和選擇器的順序無關
    (2)返回的是一個非即時的NodeList,也就是說結果不會隨著文檔樹的變化而變化

    兼容性問題:querySelector和querySelectorAll在ie8以下的瀏覽器不支持。

    節點關系型api

    在html文檔中的每個節點之間的關系都可以看成是家譜關系,包含父子關系,兄弟關系等等,下面我們依次來看看每一種關系。

    父關系型api

    parentNode:每個節點都有一個parentNode屬性,它表示元素的父節點。Element的父節點可能是Element,Document或DocumentFragment。

    parentElement:返回元素的父元素節點,與parentNode的區別在于,其父節點必須是一個Element,如果不是,則返回null

    兄弟關系型api

    previousSibling:節點的前一個節點,如果該節點是第一個節點,則為null。注意有可能拿到的節點是文本節點或注釋節點,與預期的不符,要進行處理一下。

    previousElementSibling:返回前一個元素節點,前一個節點必須是Element,注意IE9以下瀏覽器不支持。

    nextSibling:節點的后一個節點,如果該節點是最后一個節點,則為null。注意有可能拿到的節點是文本節點,與預期的不符,要進行處理一下。

    nextElementSibling:返回后一個元素節點,后一個節點必須是Element,注意IE9以下瀏覽器不支持。

    子關系型api

    childNodes:返回一個即時的NodeList,表示元素的子節點列表,子節點可能會包含文本節點,注釋節點等。
    children:一個即時的HTMLCollection,子節點都是Element,IE9以下瀏覽器不支持。
    firstChild:第一個子節點。
    lastChild:最后一個子節點。
    hasChildNodes方法:可以用來判斷是否包含子節點。

    元素屬性型api setAttribute

    setAttribute:根據名稱和值修改元素的特性,用法如下:

    element.setAttribute(name, value);

    其中name是特性名,value是特性值。如果元素不包含該特性,則會創建該特性并賦值。
    如果元素本身包含指定的特性名為屬性,則可以世界訪問屬性進行賦值,比如下面兩條代碼是等價的:

    element.setAttribute("id","test");
    
    element.id = "test";
    getAttribute

    getAttribute返回指定的特性名相應的特性值,如果不存在,則返回null或空字符串。用法如下:

    var value = element.getAttribute("id");
    元素樣式型api 直接修改元素的樣式
    elem.style.color = "red";
    elem.style.setProperty("font-size", "16px");
    elem.style.removeProperty("color");
    動態添加樣式規則
    var style = document.createElement("style");
    style.innerHTML = "body{color:red} #top:hover{background-color: red;color: white;}";
    document.head.appendChild(style);
    window.getComputedStyle

    通過element.sytle.xxx只能獲取到內聯樣式,借助window.getComputedStyle可以獲取應用到元素上的所有樣式,IE8或更低版本不支持此方法。

    var style = window.getComputedStyle(element[, pseudoElt]);

    element是要獲取的元素,pseudoElt指定一個偽元素進行匹配。
    返回的style是一個CSSStyleDeclaration對象。
    通過style可以訪問到元素計算后的樣式

    getBoundingClientRect

    getBoundingClientRect用來返回元素的大小以及相對于瀏覽器可視窗口的位置,兼容性非常好(IE6+),用法如下:

    var clientRect = element.getBoundingClientRect();

    clientRect是一個DOMRect對象,包含left,top,right,bottom,它是相對于可視窗口的距離,滾動位置發生改變時,它們的值是會發生變化的。除了IE9以下瀏覽器,還包含元素的height和width等數據,具體可查看鏈接。

    參考

    轉載地址:http://luopq.com/2015/11/30/j...
    參考地址:http://blog.liuxianan.com/jav...

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83223.html

    相關文章

    • 個人分享--web前端學習資源分享

      摘要:前言月份開始出沒社區,現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區,現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...

      sherlock221 評論0 收藏0
    • 前端文檔收集

      摘要:系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術點 常用meta整理 網頁性能管理詳解 HTML5 ...

      jsbintask 評論0 收藏0
    • 前端文檔收集

      摘要:系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術點 常用meta整理 網頁性能管理詳解 HTML5 ...

      muddyway 評論0 收藏0

    發表評論

    0條評論

    malakashi

    |高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <