第4章操作DOM

https://blog.csdn.net/fengwei4618/article/details/78025522

目標(biāo)

DOM介紹
遍歷DOM
使用DOM

DOM 的作用

獲取DOM是為了將來用js動(dòng)態(tài)操作它沪猴。

DOM介紹

DOM:Document Object Model
他的組成部分介紹：文檔、對(duì)象和模型
1)Document(文檔)：當(dāng)用瀏覽器打開一個(gè)頁面文檔時(shí)拢肆，這個(gè)文檔就會(huì)被轉(zhuǎn)成
document對(duì)象烁兰，然后就可以調(diào)用了。后面會(huì)提到該對(duì)象的用法徊都。
2)Object(對(duì)象)：DOM中的每個(gè)節(jié)點(diǎn)都是對(duì)象沪斟，通過對(duì)象的屬性和方法就能夠操作節(jié)點(diǎn)。
Model(模型)：DOM將整個(gè)文檔劃分成節(jié)點(diǎn)樹結(jié)構(gòu)暇矫，如下：

image.png

節(jié)點(diǎn)種類

<div id="box1">測試div</div>

image.png

元素節(jié)點(diǎn)：其實(shí)就是標(biāo)簽<div></div>
屬性節(jié)點(diǎn)：其實(shí)就是標(biāo)簽的屬性 id="box1"
文本節(jié)點(diǎn):標(biāo)簽里夾的文本測試div

https://www.cnblogs.com/zhaowy/p/9183334.html

1主之、元素節(jié)點(diǎn)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            
            //node-節(jié)點(diǎn)為元素節(jié)點(diǎn)類型,nodeType=1 nodeName 為實(shí)際標(biāo)簽名 nodeValue值為null
            var box=document.getElementById("box");
            alert("節(jié)點(diǎn)類型："+box.nodeType);  //1
            alert("節(jié)點(diǎn)名稱："+box.nodeName);   //div
            alert("節(jié)點(diǎn)值："+box.nodeValue);    //null
        </script>
    </head>
    <body>
          <div id="box">測試div</div>
    </body>
</html>

上面的代碼不會(huì)彈出窗口。為什么
因?yàn)镈OM操作必須等待HTML文檔加載完畢才可以獲取李根。順序執(zhí)行時(shí)還沒有獲取到

方案一：把代碼放在最下面
方案二：把代碼寫到window.onload事件里槽奕。等頁面加載完畢再執(zhí)行

window.onload=function(){
//你的js代碼
}
改寫成這樣：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload=function(){
            //node-節(jié)點(diǎn)為元素節(jié)點(diǎn)類型,nodeType=1 nodeName 為實(shí)際標(biāo)簽名 nodeValue值為null
            var box=document.getElementById("box");
            alert("節(jié)點(diǎn)類型："+box.nodeType);  //1
            alert("節(jié)點(diǎn)名稱："+box.nodeName);   //div
            alert("節(jié)點(diǎn)值："+box.nodeValue);    //null
            }
        </script>
    </head>
    <body>
          <div id="box">測試div</div>
    </body>
</html>

## DOM獲取元素節(jié)點(diǎn)的方法 ##
getElementById()    一個(gè)對(duì)象
getElementsByName()       對(duì)象集合 name
getElementsByClassName()   對(duì)象集合 通過類名
getElementsByTagName()    對(duì)象集合 標(biāo)簽名

getAttribute()
setAttribute()
removeAttribute()

### getElementsByName() ##

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function show(){
                var cs=document.getElementsByName("testName");
                for(var i=0;i<cs.length;i++){
                    alert(cs[i].name);//testName
                    alert(cs[i].nodeName);//input
                    alert(cs[i].nodeValue);//null
                }
            }
        </script>
    </head>
    <body>
    班級(jí)類型：
    <input type="radio" name="testName" value="1"/>社會(huì)個(gè)體
    <input type="radio" name="testName" value="2"/>高校個(gè)體
    <input type="radio" name="testName" value="3"/>小學(xué)期
    <input type="button" value="打印元素情況" onclick="show();"/>
    </body>
</html>

getElementsByClassName()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function show(){
                var cs=document.getElementsByClassName("testName");
                for(var i=0;i<cs.length;i++){
                    alert(cs[i].nodeName);//input
                    alert(cs[i].nodeValue);//null
                }
            }
        </script>
    </head>
    <body>
    班級(jí)類型：
    <input type="radio" class="testName" value="1"/>社會(huì)個(gè)體
    <input type="radio" class="testName" value="2"/>高校個(gè)體
    <input type="radio" class="testName" value="3"/>小學(xué)期
    <input type="button" value="打印元素情況" onclick="show();"/>
    </body>
</html>

getElementsByTagName()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function show(){
                var cs=document.getElementsByTagName("input");
                for(var i=0;i<cs.length;i++){
                    alert(cs[i].nodeName);//input
                    alert(cs[i].nodeValue);//null
                }
            }
        </script>
    </head>
    <body>
    班級(jí)類型：
    <input type="radio" class="testName" value="1"/>社會(huì)個(gè)體
    <input type="radio" class="testName" value="2"/>高校個(gè)體
    <input type="radio" class="testName" value="3"/>小學(xué)期
    <input type="button" value="打印元素情況" onclick="show();"/>
    </body>
</html>

使用建議：

如果獲取的元素節(jié)點(diǎn)是唯一的，最好通過ID方式來獲取房轿，直接返回單一元素對(duì)象粤攒。而其他三種都是返回元素集合，就算只獲取到一個(gè)元素囱持，也要用指定下標(biāo)獲取元素對(duì)象夯接，所以在一次性獲取多個(gè)符合要求的元素節(jié)點(diǎn)時(shí)，使用getElementsXxx()系列方法會(huì)更方便纷妆。
其中通過name屬性值的獲取元素節(jié)點(diǎn)集合方法一般用于表單元素中盔几。

獲取層次節(jié)點(diǎn)/獲取父or子or兄弟元素

parentNode 父級(jí)元素
nextElementSlibing 下一個(gè)兄弟
previousElementSlibing 上一個(gè)兄弟
children 子節(jié)點(diǎn) 忽略空白節(jié)點(diǎn)
childNodes 子節(jié)點(diǎn) 包含空白節(jié)點(diǎn)（不建議）
firstElementChild 第一個(gè)子元素節(jié)點(diǎn)
lastElementChild 最后一個(gè)子元素節(jié)點(diǎn)
firstChild/lastChild 第一個(gè)/最后一個(gè)節(jié)點(diǎn)，包括空白text節(jié)點(diǎn)（不建議）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function() {
            //通過id獲取div_1
            var div_1 = document.getElementById("div_1");
            // parentNode 父級(jí)元素
            console.log("父節(jié)點(diǎn)")
            var parent = div_1.parentNode;
            console.log(parent);
            
            
            
            console.log("兄弟")
            //同輩 nextElementSlibing 下一個(gè)兄弟
            var nextSibling = div_1.nextSibling; //包括空白節(jié)點(diǎn) （空格掩幢，不建議用）
            console.log("nextSibling:" + nextSibling);
            var nextElementSibling = div_1.nextElementSibling; //不包括空白節(jié)點(diǎn)逊拍，用帶Element的
            console.log("nextElementSibling:");
            console.log(nextElementSibling);
            // previousElementSlibing 上一個(gè)兄弟
            var previousElement = div_1.previousElementSibling; //不包括空白節(jié)點(diǎn)，用帶Element的
            console.log("previousElement:");
            console.log(previousElement);

            //小輩 children 子節(jié)點(diǎn) 忽略空白節(jié)點(diǎn)
            // childNodes 子節(jié)點(diǎn) 包含空白節(jié)點(diǎn)（不建議）
            // firstElementChild 第一個(gè)子元素節(jié)點(diǎn)
            // lastElementChild 最后一個(gè)子元素節(jié)點(diǎn)
            // firstChild/lastChild 第一個(gè)/最后一個(gè)節(jié)點(diǎn)际邻，包括空白text節(jié)點(diǎn)（不建議）
        }
    </script>
</head>
<body>
    <div class="div_0">
        0000000
    </div>
    <div id="div_1">
        <p>P元素文本</p>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
        <input type="text" value="NIUBI" id="in_1" />
        <button>按鈕</button>
        <button>按鈕2</button>
    </div>
    <div class="div_2">
        121212
    </div>
</body>
</html>

DOM節(jié)點(diǎn)實(shí)現(xiàn)增刪改查

查詢節(jié)點(diǎn)上面已提到芯丧。獲取元素節(jié)點(diǎn)后，可以通過節(jié)點(diǎn)對(duì)象的以下方法對(duì)文檔結(jié)構(gòu)進(jìn)行增刪改外加復(fù)制世曾。

創(chuàng)建

createElement("元素標(biāo)簽") 創(chuàng)建一個(gè)元素節(jié)點(diǎn)注整。
createAttribute("屬性名") 創(chuàng)建屬性節(jié)點(diǎn)(不常用)。使用setAttribute()更方便度硝。
createTextNode("文本內(nèi)容") 創(chuàng)建文本節(jié)點(diǎn)肿轨。

添加

appendChild(element) 向節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾添加新的子節(jié)點(diǎn)
insertBefore(添加的元素節(jié)點(diǎn)，已知子節(jié)點(diǎn)) 在已知子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)

刪除節(jié)點(diǎn)

removeChild(elementNode) 刪除指定的元素節(jié)點(diǎn)
removeAttribute(attributeNode) 刪除指定的屬性節(jié)點(diǎn)

替換節(jié)點(diǎn)

replaceChild(newElement, oldElement) 原有的老節(jié)點(diǎn)消失蕊程，新節(jié)點(diǎn)替換老節(jié)點(diǎn)位置椒袍。注意兩者節(jié)點(diǎn)類型要一致。

復(fù)制節(jié)點(diǎn)

nodeObject.cloneNode(boolean) true克隆當(dāng)前節(jié)點(diǎn)以及所有子節(jié)點(diǎn)藻茂；false只克隆當(dāng)前節(jié)點(diǎn)驹暑。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
//添加P元素到body元素節(jié)點(diǎn)中玫恳，默認(rèn)為子節(jié)點(diǎn)尾部。
document.getElementById("btn_1").onclick = function(){
var creP = document.createElement("p");
creP.innerText = "--創(chuàng)建的P元素節(jié)點(diǎn)--";
document.body.appendChild(creP);
}
//創(chuàng)建一個(gè)p元素節(jié)點(diǎn)优俘，并插入到body元素的第一個(gè)子節(jié)點(diǎn)
document.getElementById("btn_2").onclick = function(){
var creP = document.createElement("p");
creP.innerText = "--插入到第一位的P元素節(jié)點(diǎn)--";
//拿到body元素的第一個(gè)元素節(jié)點(diǎn)京办，將p元素放在它之前
document.body.insertBefore(creP, document.body.firstElementChild);
}
//創(chuàng)建文本節(jié)點(diǎn)并插入到調(diào)用該函數(shù)的元素節(jié)點(diǎn)中
document.getElementById("btn_3").onclick = function(){
var creText = document.createTextNode("創(chuàng)建的文本節(jié)點(diǎn)");
this.appendChild(creText);
}

}
//刪除body元素中第一個(gè)子節(jié)點(diǎn)
function deleteFirstChild(){
var bodys = document.body;
bodys.removeChild(bodys.firstChild);
}
//把body元素節(jié)點(diǎn)第一個(gè)子節(jié)點(diǎn)替換成指定元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
function repalceFirstNode(id){
var firstChild = document.body.firstElementChild;
var idTest = document.getElementById(id);
idTest.replaceChild(firstChild, idTest.childNodes[0]);
}
//把body元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的文本內(nèi)容替換成指定元素節(jié)點(diǎn)的第一個(gè)文本節(jié)點(diǎn)
function repalceText(id){
var firstText = document.body.firstElementChild.innerText; //拿到body元素中的第一個(gè)子節(jié)點(diǎn)的文本內(nèi)容
var creText = document.createTextNode(firstText);//創(chuàng)建文本節(jié)點(diǎn)
var idTest = document.getElementById(id);
idTest.replaceChild(creText, idTest.childNodes[0]);//新文本節(jié)點(diǎn)替換成獲取指定元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)(可能是空白文本)
}
//克隆前三個(gè)按鈕元素節(jié)點(diǎn)
function closeBtn(){
var buttons = document.getElementsByTagName("button");
for(var i = 0; i < 3; i++){
document.getElementById("div_2").appendChild(buttons[i].cloneNode(true)); //深度克隆，包含所有子節(jié)點(diǎn)
}
}
</script>
</head>
<body>
<button id="btn_1">body元素中常規(guī)插入P元素</button>
<button id="btn_2">P元素節(jié)點(diǎn)插入到第一個(gè)</button>
<button id="btn_3">點(diǎn)擊我更換按鈕文本</button><br>
<button id="btn_4" onclick="deleteFirstChild()">刪除body元素中的第一個(gè)子節(jié)點(diǎn)</button>
<button  onclick="repalceText('div_2')">替換文本節(jié)點(diǎn)</button>
<button  onclick="repalceFirstNode('div_2')">替換第一個(gè)子節(jié)點(diǎn)</button>
<button  onclick="closeBtn()">克隆前三個(gè)按鈕到div_2中</button>
<div id="div_1">
第一個(gè)div
</div>
<div id="div_2">
第二個(gè)div
</div>
</body>
</html>

小例子##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            var arr=new Array("#80cc80","#c0aac0")
            function create() {
                for (i=0; i < 10; i++) {
                    tmp=document.all.mytable.insertRow().insertCell()
                    tmp.innerText="line"+i;
                    tmp.style.background=arr[i%arr.length]
                }
            }
        </script>
    </head>
    <body bgcolor="#ffffff">
    <TABLE id="mytable"></TABLE>
    <input type="button" value="創(chuàng)建" onclick="create()"/>
    </body>
    </html>


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr=new Array("#80cc80","#c0aac0")
        function create() {
           //1帆焕、需要獲取table
           var table=document.getElementById("mytable");
           
           //循環(huán)創(chuàng)建10個(gè)tr td
           for (var i = 0; i < 10; i++) {
            var tr=document.createElement("tr");//<tr></tr>
            var td=document.createElement("td");//<td></td>
            td.style.backgroundColor=arr[i%2];
            td.innerHTML="line"+i;
            tr.appendChild(td);//<tr><td></td></tr>
            //追加到 table后面
            table.appendChild(tr);
         }
        }
    </script>
</head>
<body bgcolor="#ffffff">
    <TABLE id="mytable"></TABLE>
    <input type="button" value="創(chuàng)建" onclick="create()" />
</body>

2惭婿、DOM操作屬性節(jié)點(diǎn)

屬性是元素的一部分，所以只有獲得元素節(jié)點(diǎn)后叶雹，才能獲取和設(shè)置屬性節(jié)點(diǎn)财饥。

getAttribute("屬性名") 通過指定屬性名，獲取屬性值
setAttribute("屬性名","新屬性值") 如果屬性名存在折晦，則更改屬性值钥星。如果不存在，則創(chuàng)建一個(gè)新屬性并賦值满着。
簡便形式：element.屬性名可以獲取和設(shè)置指定屬性的屬性值谦炒。但該屬性必須存在。
element.removeAttribute("屬性") 刪除元素節(jié)點(diǎn)的指定屬性名
element.attributes 返回元素節(jié)點(diǎn)中包含所有屬性的集合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script>
window.onload=function(){
var inNode = document.getElementById("in");
 //獲取元素節(jié)點(diǎn)
//修改屬性值
inNode.setAttribute("value", "新用戶");
inNode.setAttribute("type", "button");
console.log(inNode.getAttribute("value") + "," + inNode.getAttribute("type"));
//添加新屬性
inNode.setAttribute("newAttr", "瞎搞的");
//簡便方式
inNode.type = "radio";
inNode.value = "單選框";
console.log("簡便方式：" + inNode.type + "," + inNode.value);

inNode.removeAttribute("name"); //刪除name屬性
//獲取當(dāng)前元素節(jié)點(diǎn)的所有屬性
var allAttr = inNode.attributes;
for(var i = 0; i < allAttr.length; i++){
console.log(allAttr[i]);//打印屬性到控制臺(tái)
}
}
</script>

</head>
<body>
<input type="text" id="in" name="username" value="用戶">用戶
</body>
</html>

3风喇、DOM操作文本節(jié)點(diǎn)

DOM將元素中的文本內(nèi)容當(dāng)作節(jié)點(diǎn)層次之一编饺，即文本節(jié)點(diǎn)，文本節(jié)點(diǎn)是TextNode對(duì)象响驴。
下面文本節(jié)點(diǎn)的屬性我只列出了一個(gè)文本節(jié)點(diǎn)獨(dú)有屬性data透且，但文本節(jié)點(diǎn)也是Node對(duì)象，所以依然可用其他節(jié)點(diǎn)屬性豁鲤，例如nodeName/Type/Value秽誊、獲取相關(guān)層次節(jié)點(diǎn)等屬性，而length屬性和data.length差不多琳骡。
文本節(jié)點(diǎn)中最容易出現(xiàn)的兼容問題就是空白文本節(jié)點(diǎn)锅论，后面會(huì)說到怎么解決。
除了通過文本節(jié)點(diǎn)的方法和屬性來處理文本節(jié)點(diǎn)(前提是要獲取到文本節(jié)點(diǎn))楣号；還可以將文本內(nèi)容提取成字符串最易，處理后，再放回去炫狱。關(guān)于這兩種操作的用法后面會(huì)依次介紹藻懒。

屬性

data 設(shè)置或獲取 TextNode 對(duì)象的值。

方法

appendData(string) 添加字符串到文本節(jié)點(diǎn)末尾處视译。
insertData(offset, string) 從offset指定位置插入string
deleteData(offset, count) 從offset起刪除count個(gè)字符
replaceData(off,count,string) 從off起將count個(gè)字符用string替換
splitText(offset) 從offset起將文本節(jié)點(diǎn)分割
substringData(offset, count) 返回從offset起的count個(gè)字符

關(guān)于空白文本節(jié)點(diǎn)

導(dǎo)致空白文本節(jié)點(diǎn)的原因：當(dāng)標(biāo)簽換行嬉荆，就會(huì)產(chǎn)生一個(gè)換行符，或者打一個(gè)空格酷含，瀏覽器解析時(shí)會(huì)把他們當(dāng)做空白文本節(jié)點(diǎn)鄙早。
在獲取第一個(gè)子節(jié)點(diǎn)時(shí)極容易獲取到空白文本節(jié)點(diǎn)汪茧。那怎么避免空白文本節(jié)點(diǎn)呢？
一是所有標(biāo)簽寫一行限番，但這不符合代碼美感舱污。
二是將文本內(nèi)容單獨(dú)存儲(chǔ)在一個(gè)元素子節(jié)點(diǎn)中，避免元素子節(jié)點(diǎn)同時(shí)存在文本節(jié)點(diǎn)和元素節(jié)點(diǎn)弥虐，這樣再通過firstElementChild和children等屬性就只拿到元素節(jié)點(diǎn)扩灯，再單獨(dú)對(duì)該節(jié)點(diǎn)進(jìn)行處理。

解決空白節(jié)點(diǎn)后躯舔，下面開始操作文本節(jié)點(diǎn)，這里采用文本節(jié)點(diǎn)的方法來處理文本內(nèi)容省古，使用方法類似于字符串粥庄。下面是一個(gè)綜合案例：

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
      </head>
    <body>
    <div id="p_2">
    <div>面朝大海</div>
    <p>春暖化開</p>
    <button onclick="appendStr()">添加文本</button>
    <button onclick="insertStr()">插入文本</button>
    <button onclick="deleteStr()">刪除指定文本</button>
    <button onclick="replaceStr()">替換文本</button>
    <button onclick="split()">切割文本</button>
    <button onclick="subString()">保留前2個(gè)文本字符</button>
    </div>
    <script>
    var cd = document.getElementById("p_2").children; //獲取所有的有效元素子節(jié)點(diǎn)，全局變量
    //給所有的文本節(jié)點(diǎn)增加一段話
    function appendStr(){
    for(var i = 0; i < cd.length; i++){
    //獲取每個(gè)元素子節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)豺妓，這里是文本節(jié)點(diǎn)
    var tmp = cd[i].firstChild;
    tmp.appendData("給文本節(jié)點(diǎn)中附加一小段話~");
    }
    }
    //從文本節(jié)點(diǎn)第一個(gè)字符開始插入
    function insertStr(){
    for(var i = 0; i < cd.length; i++){
    //拿到每個(gè)元素子節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)惜互，這里是文本節(jié)點(diǎn)
    var tmp = cd[i].firstChild;
    tmp.insertData(0, "從第一個(gè)字符插入文本");
    }
    }
    //刪除[0, 2)區(qū)間的字符文本
    function deleteStr(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    tmp.deleteData(0, 2);
    }
    }
    //[0,2)區(qū)間用replace字符串代替
    function replaceStr(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    tmp.replaceData(0, 2, "replace");
    }
    }
    //把文本節(jié)點(diǎn)從中間切割成兩部分
    function split(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    //保留后面的部分
    var objs=tmp.splitText(tmp.data.length/2).data;
    alert(objs);//大海
    alert(tmp.data);//面朝
    debugger;
    }
    }
    //截取文本節(jié)點(diǎn)的[0, 2)區(qū)間字符
    function subString(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    tmp.data = tmp.substringData(0,2);
    //tmp.replaceData(0,tmp.length,tmp.substringData(0,2));
    }
    }
    </script>
    </body>
    </html>

學(xué)生練習(xí)：

1）動(dòng)態(tài)添加多行，并奇偶變色
2）請(qǐng)使用Javascript代碼補(bǔ)全doSomething ()方法琳拭，實(shí)現(xiàn)文本框輸入內(nèi)容训堆，div根據(jù)輸入內(nèi)容調(diào)整的功能。
要求：
（1）當(dāng)輸入的內(nèi)容是red白嘁，blue或black時(shí)坑鱼，對(duì)應(yīng)更改div中的字體顏色。
（2）當(dāng)輸入的內(nèi)容是算數(shù)表達(dá)式時(shí)(如：2+3*5)絮缅，在div中顯示計(jì)算結(jié)果鲁沥。
（3）當(dāng)輸入的內(nèi)容是文字時(shí)，在div中顯示這些文字耕魄。
<input type="text" id="input">
<input type="button" value="輸入" onClick="doSomething();">
<div id="output">welcome</div>

最后編輯于：2020.02.27 11:24:32

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末画恰，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子吸奴，更是在濱河造成了極大的恐慌允扇，老刑警劉巖，帶你破解...
沈念sama閱讀 217,657評(píng)論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件则奥，死亡現(xiàn)場離奇詭異考润，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)读处，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,889評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門额划，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人档泽，你說我怎么就攤上這事俊戳∫靖埃” “怎么了？”我有些...
開封第一講書人閱讀 164,057評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵抑胎，是天一觀的道長燥滑。經(jīng)常有香客問我，道長阿逃，這世上最難降的妖魔是什么铭拧？我笑而不...
開封第一講書人閱讀 58,509評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮恃锉，結(jié)果婚禮上搀菩，老公的妹妹穿的比我還像新娘。我一直安慰自己破托，他們只是感情好肪跋，可當(dāng)我...
茶點(diǎn)故事閱讀 67,562評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著土砂，像睡著了一般州既。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上萝映，一...
開封第一講書人閱讀 51,443評(píng)論 1贊 302
城市分裂傳說
那天吴叶，我揣著相機(jī)與錄音，去河邊找鬼序臂。笑死蚌卤，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的奥秆。我是一名探鬼主播造寝，決...
沈念sama閱讀 40,251評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼吭练！你這毒婦竟也來了诫龙？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,129評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤鲫咽，失蹤者是張志新（化名）和其女友劉穎签赃，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體分尸，經(jīng)...
沈念sama閱讀 45,561評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡锦聊，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,779評(píng)論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了箩绍。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孔庭。...
茶點(diǎn)故事閱讀 39,902評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出圆到，到底是詐尸還是另有隱情怎抛，我是刑警寧澤，帶...
沈念sama閱讀 35,621評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布芽淡，位于F島的核電站马绝，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏挣菲。R本人自食惡果不足惜富稻，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,220評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望白胀。院中可真熱鬧椭赋，春花似錦、人聲如沸或杠。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,838評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽廷痘。三九已至蔓涧，卻和暖如春件已，著一層夾襖步出監(jiān)牢的瞬間笋额，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,971評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工篷扩，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留兄猩，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,025評(píng)論 2贊 370
代替公主和親
正文我出身青樓鉴未，卻偏偏與公主長得像枢冤，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子铜秆，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,843評(píng)論 2贊 354

第4章 操作DOM