Javascript操作DOM常用API總結

Node類型

DOM1級定義了一個Node接口科阎,該接口由DOM中所有節(jié)點類型實現(xiàn)。這個Node接口在JS中是作為Node類型實現(xiàn)的忿族。在IE9以下版本無法訪問到這個類型锣笨,JS中所有節(jié)點都繼承自Node類型蝌矛,都共享著相同的基本屬性和方法。
Node有一個屬性nodeType表示Node的類型错英,它是一個整數(shù)入撒,其數(shù)值分別表示相應的Node類型,具體如下:
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類型中茅逮,我們最常用的就是element,text判哥,attribute献雅,comment,document塌计,document_fragment這幾種類型挺身。
我們簡單來介紹一下這幾種類型:

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

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

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

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

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

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

節(jié)點創(chuàng)建型api

createElement

createElement通過傳入指定的一個標簽名來創(chuàng)建一個元素堕扶,如果傳入的標簽名是一個未知的碍脏,則會創(chuàng)建一個自定義的標簽梭依,注意:IE8以下瀏覽器不支持自定義標簽。
使用如下:
var div = document.createElement("div");

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

createTextNode

createTextNode用來創(chuàng)建一個文本節(jié)點扎狱,用法如下:
var textNode = document.createTextNode("一個TextNode");
createTextNode接收一個參數(shù),這個參數(shù)就是文本節(jié)點中的文本勃教,和createElement一樣淤击,創(chuàng)建后的文本節(jié)點也只是獨立的一個節(jié)點,同樣需要appendChild將其添加到HTML文檔樹中

cloneNode

cloneNode是用來返回調用方法的節(jié)點的一個副本故源,它接收一個bool參數(shù)污抬,用來表示是否復制子元素,使用如下:

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

這段代碼通過cloneNode復制了一份parent元素绳军,其中cloneNode的參數(shù)為true印机,表示parent的子節(jié)點也被復制,如果傳入false门驾,則表示只復制了parent節(jié)點射赛。
這里有幾點要注意:
(1)和createElement一樣,cloneNode創(chuàng)建的節(jié)點只是游離有html文檔外的節(jié)點奶是,要調用appendChild方法才能添加到文檔樹中
(2)如果復制的元素有id楣责,則其副本同樣會包含該id,由于id具有唯一性聂沙,所以在復制節(jié)點后必須要修改其id
(3)調用接收的bool參數(shù)最好傳入秆麸,如果不傳入該參數(shù),不同瀏覽器對其默認值的處理可能不同
除此之外及汉,我們還有一個需要注意的點:
如果被復制的節(jié)點綁定了事件沮趣,則副本也會跟著綁定該事件嗎?這里要分情況討論:
(1)如果是通過addEventListener或者比如onclick進行綁定事件坷随,則副本節(jié)點不會綁定該事件
(2)如果是內(nèi)聯(lián)方式綁定比如
<div onclick="showParent()"></div>
這樣的話房铭,副本節(jié)點同樣會觸發(fā)事件。

createDocumentFragment

createDocumentFragment方法用來創(chuàng)建一個DocumentFragment温眉。在前面我們說到DocumentFragment表示一種輕量級的文檔育叁,它的作用主要是存儲臨時的節(jié)點用來準備添加到文檔中。
createDocumentFragment方法主要是用于添加大量節(jié)點到文檔中時會使用到芍殖。假設要循環(huán)一組數(shù)據(jù),然后創(chuàng)建多個節(jié)點添加到文檔中谴蔑,比如示例

<ul id="list"></ul>
<input type="button" value="添加多項" id="btnAdd" />

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);
    }
}

這段代碼將按鈕綁定了一個事件豌骏,這個事件創(chuàng)建了100個li節(jié)點龟梦,然后依次將其添加HTML文檔中。這樣做有一個缺點:每次一創(chuàng)建一個新的元素窃躲,然后添加到文檔樹中计贰,這個過程會造成瀏覽器的回流。所謂回流簡單說就是指元素大小和位置會被重新計算蒂窒,如果添加的元素太多躁倒,會造成性能問題。這個時候洒琢,就是使用createDocumentFragment了秧秉。
DocumentFragment不是文檔樹的一部分,它是保存在內(nèi)存中的衰抑,所以不會造成回流問題象迎。我們修改上面的代碼如下:

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);
}

優(yōu)化后的代碼主要是創(chuàng)建了一個fragment,每次生成的li節(jié)點先添加到fragment呛踊,最后一次性添加到list.

創(chuàng)建型API總結

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

頁面修改型API

前面我們提到創(chuàng)建型api,它們只是創(chuàng)建節(jié)點愉择,并沒有真正修改到頁面內(nèi)容劫乱,而是要調用appendChild來將其添加到文檔樹中。我在這里將這類會修改到頁面內(nèi)容歸為一類薄辅。
修改頁面內(nèi)容的api主要包括:appendChild要拂,insertBefore,removeChild站楚,replaceChild脱惰。

appendChild

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

parent.appendChild(child);

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

<div id="child">
    要被添加的節(jié)點
</div>
<br/>
<br/>
<br/>
<div id="parent">
    要移動的位置
</div>      
<input id="btnMove" type="button" value="移動節(jié)點" />

document.getElementById("btnMove").onclick = function(){
    var child = document.getElementById("child");
    document.getElementById("parent").appendChild(child);
}

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

insertBefore

insertBefore用來添加一個節(jié)點到一個參照節(jié)點之前窃祝,用法如下:

parentNode.insertBefore(newNode,refNode);

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

<div id="parent">
    父節(jié)點
    <div id="child">                
        子元素
    </div>
</div>
<input type="button" id="insertNode" value="插入節(jié)點" />

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

這段代碼創(chuàng)建了一個新節(jié)點踱侣,然后添加到child節(jié)點之前粪小。
和appendChild一樣,如果插入的節(jié)點是頁面上的節(jié)點抡句,則會移動該節(jié)點到指定位置探膊,并且保留其綁定的事件。

關于第二個參數(shù)參照節(jié)點還有幾個注意的地方:
(1)refNode是必傳的玉转,如果不傳該參數(shù)會報錯
(2)如果refNode是undefined或null突想,則insertBefore會將節(jié)點添加到子元素的末尾

removeChild

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

var deletedChild = parent.removeChild(node);

deletedChild指向被刪除節(jié)點的引用猾担,它等于node,被刪除的節(jié)點仍然存在于內(nèi)存中刺下,可以對其進行下一步操作绑嘹。
注意:如果被刪除的節(jié)點不是其子節(jié)點,則程序將會報錯橘茉。我們可以通過下面的方式來確惫ひ福可以刪除:

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

replaceChild用于使用一個節(jié)點替換另一個節(jié)點,用法如下

parent.replaceChild(newChild,oldChild);

newChild是替換的節(jié)點畅卓,可以是新的節(jié)點擅腰,也可以是頁面上的節(jié)點,如果是頁面上的節(jié)點翁潘,則其將被轉移到新的位置
oldChild是被替換的節(jié)點

頁面修改型API總結

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

節(jié)點查詢型API

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

document.getElementById

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

document.getElementsByTagName

這個接口根據(jù)元素標簽名獲取元素啦膜,返回一個即時的HTMLCollection類型,什么是即時的HTMLCollection類型呢淌喻?我們來看看這個示例

<div>div1</div>
<div>div2</div>
        
<input type="button" value="顯示數(shù)量" id="btnShowCount"/>
<input type="button" value="新增div" id="btnAddDiv"/> 

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元素的個數(shù),另一個按鈕可以新增一個div標簽到文檔中裸删。前面提到HTMLCollcetion元素是即時的表示該集合是隨時變化的八拱,也就是是文檔中有幾個div,它會隨時進行變化涯塔,當我們新增一個div后肌稻,再訪問HTMLCollection時,就會包含這個新增的div匕荸。
使用document.getElementsByTagName這個方法有幾點要注意:
(1)如果要對HTMLCollection集合進行循環(huán)操作爹谭,最好將其長度緩存起來,因為每次循環(huán)都會去計算長度榛搔,暫時緩存起來可以提高效率
(2)如果沒有存在指定的標簽诺凡,該接口返回的不是null,而是一個空的HTMLCollection
(3)“*”表示所有標簽

document.getElementsByName

getElementsByName主要是通過指定的name屬性來獲取元素践惑,它返回一個即時的NodeList對象腹泌。
使用這個接口主要要注意幾點:
(1)返回對象是一個即時的NodeList,它是隨時變化的
(2)在HTML元素中尔觉,并不是所有元素都有name屬性凉袱,比如div是沒有name屬性的,但是如果強制設置div的name屬性穷娱,它也是可以被查找到的
(3)在IE中绑蔫,如果id設置成某個值,然后傳入getElementsByName的參數(shù)值和id值一樣泵额,則這個元素是會被找到的配深,所以最好不好設置同樣的值給id和name

document.getElementsByClassName

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

var elements = document.getElementsByClassName(names);

這個接口有下面幾點要注意:
(1)返回結果是一個即時的HTMLCollection嫁盲,會隨時根據(jù)文檔結構變化
(2)IE9以下瀏覽器不支持
(3)如果要獲取2個以上classname篓叶,可傳入多個classname烈掠,每個用空格相隔,例如

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

document.querySelector和document.querySelectorAll

這兩個api很相似缸托,通過css選擇器來查找元素左敌,注意選擇器要符合CSS選擇器的規(guī)則。
首先來介紹一下document.querySelector俐镐。
document.querySelector返回第一個匹配的元素矫限,如果沒有匹配的元素,則返回null佩抹。
注意叼风,由于返回的是第一個匹配的元素,這個api使用的深度優(yōu)先搜索來獲取元素棍苹。我們來看這個例子:

<div>
    <div>
        <span class="test">第三級的span</span>  
    </div>
</div>
<div class="test">          
    同級的第二個div
</div>
<input type="button" id="btnGet" value="獲取test元素" />

document.getElementById("btnGet").addEventListener("click",function(){
    var element = document.querySelector(".test");
    alert(element.textContent);
})

這個例子很簡單无宿,就是兩個class都包含“test”的元素,一個在文檔樹的前面枢里,但是它在第三級孽鸡,另一個在文檔樹的后面,但它在第一級栏豺,通過querySelector獲取元素時彬碱,它通過深度優(yōu)先搜索,拿到文檔樹前面的第三級的元素冰悠。

document.querySelectorAll的不同之處在于它返回的是所有匹配的元素堡妒,而且可以匹配多個選擇符,用逗號隔開溉卓,我們來看看下面這個例子

<div class="test">
    class為test
</div>
<div id="test">
    id為test
</div>
<input id="btnShow" type="button" value="顯示內(nèi)容" />

document.getElementById("btnShow").addEventListener("click",function(){
    var elements = document.querySelectorAll("#test,.test");    
    for(var i = 0,length = elements.length;i<length;i++){
        alert(elements[i].textContent);
    }   
})

這段代碼通過querySelectorAll皮迟,使用id選擇器和class選擇器選擇了兩個元素,并依次輸出其內(nèi)容桑寨。要注意兩點:
(1)querySelectorAll也是通過深度優(yōu)先搜索伏尼,搜索的元素順序和選擇器的順序無關
(2)返回的是一個非即時的NodeList,也就是說結果不會隨著文檔樹的變化而變化

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

節(jié)點關系型api

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

父關系型api

parentNode:每個節(jié)點都有一個parentNode屬性,它表示元素的父節(jié)點肢藐。Element的父節(jié)點可能是Element故河,Document或DocumentFragment。
parentElement:返回元素的父元素節(jié)點吆豹,與parentNode的區(qū)別在于鱼的,其父節(jié)點必須是一個Element理盆,如果不是,則返回null

兄弟關系型api

previousSibling:節(jié)點的前一個節(jié)點凑阶,如果該節(jié)點是第一個節(jié)點猿规,則為null。注意有可能拿到的節(jié)點是文本節(jié)點或注釋節(jié)點宙橱,與預期的不符姨俩,要進行處理一下。
previousElementSibling:返回前一個元素節(jié)點师郑,前一個節(jié)點必須是Element哼勇,注意IE9以下瀏覽器不支持。

nextSibling:節(jié)點的后一個節(jié)點呕乎,如果該節(jié)點是最后一個節(jié)點,則為null陨晶。注意有可能拿到的節(jié)點是文本節(jié)點猬仁,與預期的不符,要進行處理一下先誉。
nextElementSibling:返回后一個元素節(jié)點湿刽,后一個節(jié)點必須是Element,注意IE9以下瀏覽器不支持褐耳。

子關系型api

childNodes:返回一個即時的NodeList诈闺,表示元素的子節(jié)點列表,子節(jié)點可能會包含文本節(jié)點铃芦,注釋節(jié)點等雅镊。
children:一個即時的HTMLCollection,子節(jié)點都是Element刃滓,IE9以下瀏覽器不支持仁烹。
firstNode:第一個子節(jié)點
lastNode:最后一個子節(jié)點
hasChildNodes方法:可以用來判斷是否包含子節(jié)點。

元素屬性型api

setAttribute

setAttribute:根據(jù)名稱和值修改元素的特性咧虎,用法如下卓缰。

element.setAttribute(name, value);

其中name是特性名,value是特性值砰诵。如果元素不包含該特性征唬,則會創(chuàng)建該特性并賦值。
如果元素本身包含指定的特性名為屬性茁彭,則可以直接訪問屬性進行賦值总寒,比如下面兩條代碼是等價的:

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

element.id = "test";

getAttribute

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

var value = element.getAttribute("id");

元素樣式型api

window.getComputedStyle

window.getComputedStyle是用來獲取應用到元素后的樣式击罪,假設某個元素并未設置高度而是通過其內(nèi)容將其高度撐開,這時候要獲取它的高度就要用到getComputedStyle贪薪,用法如下:

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

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

getBoundingClientRect

getBoundingClientRect用來返回元素的大小以及相對于瀏覽器可視窗口的位置竣稽,用法如下:

var clientRect = element.getBoundingClientRect();

clientRect是一個DOMRect對象,包含left霍弹,top毫别,right,bottom典格,它是相對于可視窗口的距離岛宦,滾動位置發(fā)生改變時,它們的值是會發(fā)生變化的耍缴。除了IE9以下瀏覽器砾肺,還包含元素的height和width等數(shù)據(jù)

總結

本文主要總結了原生js中常用的操作DOM的api接口,主要為了復習基礎知識防嗡。平時開發(fā)用多了jQuery等類庫变汪,對基礎知識的了解可能就漸漸地遺忘,但這些基礎知識才是我們立足的根本蚁趁,只有掌握原生的js裙盾,才能真正做好js的開發(fā)。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末他嫡,一起剝皮案震驚了整個濱河市番官,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌钢属,老刑警劉巖鲤拿,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異署咽,居然都是意外死亡近顷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門宁否,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窒升,“玉大人,你說我怎么就攤上這事慕匠”バ耄” “怎么了?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵台谊,是天一觀的道長蓉媳。 經(jīng)常有香客問我譬挚,道長,這世上最難降的妖魔是什么酪呻? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任减宣,我火速辦了婚禮,結果婚禮上玩荠,老公的妹妹穿的比我還像新娘漆腌。我一直安慰自己,他們只是感情好阶冈,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布闷尿。 她就那樣靜靜地躺著,像睡著了一般女坑。 火紅的嫁衣襯著肌膚如雪填具。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天匆骗,我揣著相機與錄音灌旧,去河邊找鬼。 笑死绰筛,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的描融。 我是一名探鬼主播铝噩,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼窿克!你這毒婦竟也來了骏庸?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤年叮,失蹤者是張志新(化名)和其女友劉穎具被,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體只损,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡一姿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了跃惫。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叮叹。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖爆存,靈堂內(nèi)的尸體忽然破棺而出蛉顽,到底是詐尸還是另有隱情,我是刑警寧澤先较,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布携冤,位于F島的核電站悼粮,受9級特大地震影響,放射性物質發(fā)生泄漏曾棕。R本人自食惡果不足惜扣猫,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望睁蕾。 院中可真熱鬧苞笨,春花似錦、人聲如沸子眶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽臭杰。三九已至粤咪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間渴杆,已是汗流浹背寥枝。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留磁奖,地道東北人囊拜。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像比搭,于是被迫代替她去往敵國和親冠跷。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 什么是DOM身诺?蜜托?? DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的...
    熒惑3_3閱讀 1,393評論 0 1
  • 原文 鏈接 關注公眾號獲取更多資訊 一霉赡、基本類型介紹 1.1 Node類型 DOM1級定義了一個Node接口橄务,該接...
    程序員poetry閱讀 3,938評論 7 34
  • 我想 在我的想象中,有這樣一個你穴亏。星子都睡了蜂挪,淺黃色的燈光把我的身影映的更加孤寂,仿佛一根枯木艱難地撐起了一方不起...
    伍幺柒517閱讀 192評論 0 1
  • 聲明 轉載請注明來源 關鍵字 Mac Mc 安裝 Mod 蘋果電腦 我的世界 安裝mod 環(huán)境 當前教程的環(huán)境就是...
    趙曉天閱讀 23,898評論 1 4
  • 在山里嗓化,如果有大樹锅劝,那么大樹之下就缺少陽光;同樣蟆湖,在學校里故爵,如果有好班級的存在,那么注定會有一些暫時還不是“好”的...
    吳理數(shù)閱讀 295評論 0 2