教程 DOM 教程：DOM 简介、目录 DOM、简介 DOM 树、 DOM Document 、DOM Node 、DOM Element 、DOM 属性、DOM 内容、DOM 尺寸、...

日考

一：js包括哪几部分？

DOM BOM ES

二、什么是DOM？

DOM：文档对象模型 DOM是操作文档的接口（API）

三、DOM有几大对象？5大

文档对象：document
元素对象：elment 唉理门特
文本对象：text
属性对象：Attribnt 唉吹目
节点对象：node 檽熬的

四：什么是BOM？

BOM：浏览器对象模型 BOM操作浏览器的接口（API）

五：BOM有几大对象？5大

窗口：window
历史记录：history 黑丝蕊
地址栏：location 洛k神
版本信息：navigator 糯雾给的
屏幕：screen 四鬼应的

js包含哪几部分

ES：一门语言，学习ES学习的是语法（ECMA：欧洲计算机协会 ECMAScript）

BOM：浏览器对象模型
用途：提供给ES一个接口来操作浏览器

DOM：文档对象模型
用途：提供给ES一个接口来操作文档

BOM简介

BOM ： Browser Object Model 浏览器对象模型
BOM把浏览器的一切定义成了一个对象模型。
Window：整个浏览器被定义成了window对象
document：把文档定义成了一个对象
Screen：把显式浏览器窗口的屏幕定义成一个对象
Location：把地址栏定义成一个对象
Navigator：把浏览器的介绍信息定义成一个对象
BOM的用途：允许ES来操作浏览器的一切
BOM目前没有标准

DOM简介

DOM：Dcoument Object Model 文档对象模型
用途：DOM就是为了操作文档用的
在DOM眼泪，整个文档的内容都是对象。
DOM把一切内容都定义成了对象。
文档是对象
html元素是对象
文本是对象
属性是对象
样式是对象
DOM是W3C制定的一套标准

DOM树

屏幕截图 2023-02-10 093558.png

Document

Documnet对象表示网页文档
Documnet对象是DOM的核心对象
Documnet 对象是访问文档的入口

用途

Document对象主要用途：

查：获取元素
增：创建元素
删：删除元素
改：替换元素

获取元素的方法

一：传统方法

1.通过id获取元素getElementById()

</article>

window.document.getElementById("id")
//等同于
document.getElementById("id")

2.通过标签名获取元素getElementsByTagName()

window.document.getElementsByTagName("标签名")
//等同于
document.getElementsByTagName("标签名")

3.通过element获取

const U1 = document.getElementById("u1")
const Li = U1.getElementsByTagName("li")//element获取
console.log(Li)//返回一个全是li标签的元素对象

二：H5新增方法

1.通过class选择器：
document.getElementsByClassName("class")
element.getElementsByClassName("class")
2.通过css选择器：document.querySelector("selector")
3.通过css选择器获取一组元素：
document.quenrySelectorAll("sclector")
element.quenrySelectorAll("sclector")

        const arr  = document.getElementsByClassName("l1")
        const arr1 = document.getElementById("u1")
        const l1 = arr1.getElementsByClassName("l1")
        console.log(l1)

三：特殊方法

1.document.title 获取标题标签
document.body 获取主体标签
document.head 获取头部标签
document.documentElement 获取根元素
document.links获取页面中所有的<a>元素
document.forms 获取页面中所有的表单<input>元素
1. document.images获取页面中所有的图片<ung>元素

        console.log(document.title);
        console.log(document.body);
        console.log(document.head);
        console.log(document.documentElement);//重点，获取到html根元素

操作文档内容

在获取完元素之后，接下来我们要学习元素对象之间的关系。
DOM定义了两套API：
1.Node API(节点API)：把DOM树中的的对象看成节点（node）树
2.Element API(元素API)：把DOM树中的对象看成元素树

Node API

定义：Node APL把文档中的一切对象看成是节点（node）。“Node”对象是API的核心对象。
用途：

查找节点的基本信息
查找节点之间的关系：父子，兄弟，后代
操作节点
增
删
改
查

三大基本属性

Node.nodeType
定义：表示节点的类型，节点类型用一个数字表示，Node把节点分为了9种。

节点名称	数字表示
元素节点	1
属性节点	2
文本节点	3
注释节点	8
文档节点	9

1：元素节点

console.log(document.documentElement.nodeType)//1

2：属性节点:元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点

 console.log(document.body.getAttributeNode("id").nodeType)//2

3：文本节点：childNodes，属性可返回指定节点的子节点的节点列表

<body id="home">
    <h2>二级标题</h2>
    <!-- 注释节点 -->
    <script>
        //获取文本节点的方法
       const arr =  document.body.childNodes
        console.log(arr[0].nodeType)//3
    </script>

8：注释节点：childNodes，属性可返回指定节点的子节点的节点列表

<body id="home">
    <h2>二级标题</h2>
    <!-- 注释节点 -->
    <script>
        //获取注释节点的方法
       const arr =  document.body.childNodes
        console.log(arr[3].nodeType)//8
    </script>

9：文档节点:

 console.log(document.nodeType)//=9

2.Node.nodeName

定义：返回节点的名称
示例：

<script>
window.onload = function(){
const nodeLists = document.body.childNodes
console.log(nodeLists);
console.log(nodeLists[0].nodeName);//#text
console.log(nodeLists[1].nodeName);//H2
console.log(nodeLists[3].nodeName);//#comment
console.log(document.nodeName);//#document
 }
</script>
</head>
<body>前⾯
<h2>⼆级标题</h2>后⾯
<!-- 注释 -->
</body>

3.Node.nodeValue

定义：返回节点的值
返回：节点的值
注意
返回:1.只有文本节点、属性节点、注释节点的值
返回2.:元素节点和⽂档节点的是 NULL.
示例：

<h2 id="">hello wolrd</h2>

<body>
    <script>
        const h2 = document.querySelector('h2')
        console.log(h2.nodeName)
        console.log(h2.nodeType)
        console.log(h2.FnodeValue)//返回文本节点、属性节点、注释节点的值
        console.log(h2.firstChild.nodeValue)//拿到第一个子节点  hello wolrd


        //如何获取属性节点:Node.getAttribute 
        const v = h2.getAttribute('id')
        console.log(v)
        console.log(v.nodeValue)

    </script>
</body>

节点定义

父节点：一个节点之上的直接节点就它的父节点

子节点：一个节点之下的直接节点就它的子节点

兄弟节点：具有同父节点下的节点

后代节点：一个节点之下的所有节点

查找节点关系

Node.childNodes:属性可返回指定节点的子节点的节点列表
元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点
Node.parentNode:返回当前节点的父节点
Node.chiIdNodes:返回当前节点的子节点
Node.nextSibling：返回当前节点的下一个子节点
Node.previousSibling：返回当前节点的上一个子节点
Node.firstChild：返回当前节点的第一个子节点
Node.lastChild：返回当前节点的最后一个子节点

Array.from(伪数组名)

将伪数组转成真正的数组

Array.from(document.images)//把伪数组转成真正的数组

1.Node.appendChild()

append ：绑定、添加

定义：从父节点的末尾添加子节点。
语法：

父节点对象.appendChild（**子节点对象**）

父节点对象：就是你获取的元素
子节点对象：1.已有节点、2.新建节点
返回值：添加到末尾的子节点

示例：

  //向ul添加子元素li//appendChild
        const li = document.createElement('li')
        li.innerHTML = 'hello world'
        const ul = document.querySelector('ul')
        ul.appendChild(li)

2.Node.insertBefore()

定义：
方法用于将一个节点添加到指定父节点的子节点列表的开头
语法：

parentNode.insertBefore(newNode（元素）, referenceNode（位置交换）);

insertedNode：被插入节点 (newNode)
parentNode：新插入节点的父节点
newNode ：用于插入的节点
referenceNode newNode：将要插在这个节点之前

返回值：

3.Node.removeChild()

定义：
从父节点身上删除子节点。
语法：

父节点对象.removeChild(子节点对象)

返回值：返回删除的子节点对象或null

4.document.createElement()

定义：
创建一个新元素。(在挂在到DOM之前，新元素存储在内存里)
语法：

document.createElement('标签名')

返回值：返回删除的子节点对象或null

对照表	如下
next 奈可四特：	下一个
Pre 破蕊：	前
看：view 预习：	preview
Previous 破蕊微哦死：	上一个
som
child 孩子（单数） children孩子们（复数）
父母：	parent
sibing：	兄弟姐妹 c搏琳
ndoe ：	节点
element：	元素

Element API(元素接口)	Node API（节点接口）
获取子对象列表	children	childNodes
获取第一个子节点	firstElementChild	firstChild
获取最后一个子对象	lastElementChild	lastChild
获取下一个子节点	nextElementSibling	nextSibling
获取上一个子节点	previousElementSibling	previousSibling
获取子对象的父对象	parentElement	parentNode

Node API	操作节点对照表
父.append(子)
父.insertBefore(新,旧)

一、DOM是什么

1.文档对象模型操作文档的接口
2.w3c制定的一套标准
3.核心对象：document
4.可以对文档进行

添加元素
修改元素
获取元素
删除元素

5.dom把一切都看成了对象
元素对象
样式对象
文本对象
文档对象
属性对象

dom定义两套API
元素 API
节点 API

二、dom树的理解

1.浏览器会解析你的html代码，生成dom树
1. DOM把整个文档定义成了树状模型
3.在DOM眼里，全部文档内容都是对象,其中有五种常见的：
元素对象1
文本对象2
属性对象3
注释对象8
文档对象：其中文档对象是dom的核心对象 9
4.dom定义了许多API ( 属性和方法 ) 操作这些对象

三、对document的认识

定义：

1.Documnet对象表示网页文档
2.Documnet对象是DOM的核心对象
1. Documnet 对象是访问文档的入口

4.用途：
document对象主要用于查找元素,修改文档，创建元素
在查找元素时，有三类方法：

传统方法
H5新增方法
特殊方法（选择元素的快捷键）

四、对象Node API的认识

定义：Node API 把DOM树全部对象看成节点树，并为这些节点定义了大量属性和方法

用途：

查找元素,修改文档，创建元素，删除元素（增，删，改，查）
查找节点之间的关系：父子，兄弟，后代

五、Node API 和document API查找元素的区别

document API查找元素的方式是：直接查找
Node API查找元素的方式是：间接查找，也就是按照元素之间的关系查找。

六、Node API 如何查找节点的基本信息

三大基本属性：
1.node type：查找节点的类型
2.node nome：查找节点名称
3.node value：查找节点值

返回文本节点，属性节点和注释节点的值
元素和文档节点返回null

 <h2>hello wold</h2>
    <script>
        const h2 = document.querySelector("h2")
        console.log(h2)
        console.log(h2.nodeType)//1
        console.log(h2.nodeName)//h2
        console.log(h2.nodeValue)//标签默认null
        console.log(h2.firstChild.nodeValue)//hello wold

 // 元素.getAttributeNode("属性名")
        const aaa = h2.getAttributeNode("id")
        console.log(aaa.nodeType)//2
        console.log(aaa.nodeValue)//aaa
        console.log(aaa.nodeName)//id
    </script>

七、Node APl 操作节点的方法有6种

1.Node.appendChid("子元素")

        const li =document.createElement("li")
        //向ul添加子元素li  Node.appendChid("元素")  Node.insertBefore(元素，元素位置)
        const ul = document.querySelector("ul")
        li.innerHTML = "wold"
        ul.appendChild(li)

2.Node.insertBefore(子元素，子元素位置)

 const li2 =document.createElement("li")
        //向ul添加子元素li  Node.appendChid("元素")  Node.insertBefore(元素，元素位置)
        li2.innerHTML = "hello"
        ul.insertBefore(li2,li)

3.Node.removeChild(node):必须在父级节点上执行removeChild()

定义：在父节点身上删除子节点
语法：

父节点.removeChild(子节点)

返回值：删除的子节点
实例：点击按钮删除div的子节点

<button>按钮</button>
    <div><a href="#">和</a><a href="">魈</a><a href="">宝</a><a href="">6</a></div>
    <script>
        document.querySelector("button").onclick=function(){   
document.querySelector("div").removeChild(document.querySelector("div").firstElementChild)
        }

4.Node.remove():删除父节点

定义：将元素从DOM中删除
语法：

Node.remove()无参数

返回值：无
实例：

<button>按钮</button>
    <script>
        //点击按钮，删除按钮
        document.querySelector("button").onclick=function(){
            this.remove()
        }
    </script>

5.Node.replaceChild(子节点)：在父节点上执行替换子节点的方法

定义：替换子节点为其他节点
语法：

node.replaceChild (newnode,oldnew )

参数：
node：父节点
newnode : 必需，替换元素
oldnew : 必需，被替换是元素。

返回值：成功就返回被替换的节点，失败返回null
实例1.0：

<body>
    <ul>
        <li>嫦娥</li>
        <li>白鹿</li>
    </ul>
    <ul>
        <li>李白</li>
        <li>露丝</li>
    </ul>
    <script>
       console.log( document.body.replaceChild(document.body.firstElementChild,document.body.lastElementChild))
    </script>

实例2.0:点击按钮，将hello替换成你好

<button>按钮</button>
   <div> <h2>hello</h2></div>
    <script>
        //点击按钮，创建新文本“你好”节点
        const btn = document.querySelector("button")
        const h2 =  document.querySelector("h2")

        btn.addEventListener("click",()=>{
            h1 = document.createElement("h1")
            // h1.innerHTML = "你好"
            const text=  document.createTextNode("你好")
            h1.appendChild(text)
            document.querySelector("div").replaceChild(h1,h2)
        })
    </script>

6.Node.hasChidNodes():在父节点身上查询子节点

定义：该方法用来判断一个元素是否有子节点
语法：

父节点.hasChildNodes()//没有参数

返回值：返回值为true或者false

文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用ChildNodes()方法返回值永远为false
如果hasChildNodes()返回值为false，则childNodes，firstChild，lastChild将为空数组或者空字符串
实例：查询ul是否有子节点

 <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        // hasChildNodes()
       console.log( document.querySelector("ul").hasChildNodes())//true
    </script>

Element

用途：查找元素，元素的属性，元素的内容

Element.查找元素

Element.parentElement 查找父元素
Element.children 查找子元素列表
Element.firstElementChild 查找第一个子元素
Element.lastElementChild 查找最后一个子元素
Element.nextElementSibling 查找下一个子元素
Element.previousElementSibling 查找上一个子元素
Element.childElementCount 查找子元素数量

Element. 查找属性

1.元素.getAttributeNode("属性名")
方法从当前元素中通过名称获取属性节点

2.元素.attribute//非标准
返回一个伪数组，包含指定元素的所有属性节点

实例：

<body>
    <div>
        <h2 id="aaa" class="bbb">hello world</h2>
    </div>
    <script>
        const div = document.querySelector("div")
        const h2 = document.querySelector("h2")
        console.log(div.childNodes)
        //元素.getAttributeNode("属性名")
        console.log(h2.getAttributeNode("id"))
        //元素.attribute//非标准
        console.log(h2.attributes)//NamedNodeMap [ id="aaa", class="bbb" ]
        console.log(h2.attributes.id)//id="aaa"

1.操作class，两种方法

利用元素的属性去操作

btn.addEventListener("click",function(){
     div.firstElementChild.nextElementSibling.style.color = "red"
         h2.className = "red"
        console.log(11)
         })

2.H5后：元素.classList 返回一个伪数组

       classList 伪数组三个方法

元素.classList.add()//向class值列表中添加一个值
元素.classList.remove()//向class值列表中删除一个值
元素.classList.toggle()//如果class值有，就执行remove，没有执行add

 btn[0].addEventListener("click",function(){
            //1.点击按钮，让文字变成红色 add
           h2.classList.add("red")
           //2.点击按钮删除边框 remove
        //    h2.classList.remove("blue")
        })

        btn[1].addEventListener("click",function(){
           //3.点击按钮，变黑
            h2.classList.remove("red")
        })

        btn[2].addEventListener("click",function(){
           //3.点击按钮，如果文字为红，就变黑，是黑就变红
           h2.classList.toggle("red")
        })

Element.查找或设置元素内容

Element API（元素接口）与Node API（节点接口）均提供了三种操作元素内容的属性:

*1. Element.innerHTML
*2. Element.innerText
*3. Element.textContent

Node.innerHTML

展示'机读‘内容
返回html代码(把HTML代码看成代码)

Node.innerText

展示’人类可读‘内容 :表示当前的HTML内容。
返回文本内容，忽略标签和空格(把HTML代码看成纯文本)

Node.TextContent

返回文本内容，只忽略标签
获取节点和后代节点的HTML内容
注意：Node.textContent和HTMLElement.innerText很相似，但有区别。
示例: innerText、innerHTML和textContent区别
示例：

 <div>
        hello world! <a href="#">欢迎来到我的叫车站</a>
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        const div = document.querySelector("div")
        const ul = document.querySelector("ul")
        //元素.innerHTML:返回html代码(把HTML代码看成代码)
        console.log(div.innerHTML)//hello world! <a href="#">欢迎来到我的叫车站</a>
        ul.firstElementChild.innerHTML = div.innerHTML
        //innerText：返回文本内容，忽略标签和空格(把HTML代码看成纯文本)
        console.log(div.innerText)//hello world! 欢迎来到我的叫车站
        ul.firstElementChild.nextElementSibling.innerText = div.innerHTML
        //TextContent：返回文本内容，只忽略标签
        console.log(div.textContent)
        ul.lastElementChild.textContent = div.textContent

创建元素(4个方法)

1.Document.createElement()

定义：用于创建一个新的元素节点
语法：

document.createTextNode(元素)

实例：

  <div>
        <button>按钮</button>
        <h1>抽到0号获得神秘大奖</h1>
    </div>
    <script>
        let h1 = document.createElement("h1")
        document.querySelector("button").onclick = function () {
            let str = document.createTextNode(Math.round(Math.random()*(10000-1)+1))
            h1.innerHTML = str.nodeValue
            document.querySelector("div").appendChild(h1)
        }
    </script>

2. Document.createTextNode()

定义：用于创建一个新的文本节点
语法：

document.createTextNode("新文本")

返回值：返回Text文本节点对象
实例：

<button>按钮</button>
   <div> <h2>hello</h2></div>
    <script>
        //点击按钮，创建新文本“你好”节点
        const btn = document.querySelector("button")
        const h2 =  document.querySelector("h2")
    let h1 
        btn.addEventListener("click",()=>{
            h1 = document.createElement("h1")
            // h1.innerHTML = "你好"
            const text=  document.createTextNode("你好")
            h1.appendChild(text)
            document.querySelector("div").replaceChild(h1,h2)
        })
    </script>

3. Node.insertBefore(子元素，子元素位置)

定义：
方法用于把新节点添加到父节点的指定子节点之前
语法：

Node.insertBefore(新子元素，位置节点)

返回值：新节点
实例：

    <div>
        <button>按钮</button>
       <ul>

       </ul>
    </div>
    <script>
        let btn = document.querySelector("button")
        let num = 0
        btn.addEventListener("click",()=>{
            num++
            let li = document.createElement("li")
            let str = document.createTextNode(num+"哈密boy￥"+Math.round(Math.random()*(10000-1)+1))
            li.appendChild(str)
            if(document.querySelector("ul").children.length !== 0){
                document.querySelector("ul").insertBefore(li,document.querySelector("ul").firstElementChild)
            }else{
                document.querySelector("ul").appendChild(li)
            }
        })

    </script>

4.element.insertAdjacentElement()

定义：
向目标元素的指定位置添加新元素
语法：

元素.insertAdjacentElement("position",新元素)

"position"该参数是一个字符串，它有四个值（不区分大小写），表示插入新元素的方法

boforeBegin 在开始标签之前
beforeEnd 在结束标签之前
afterEnd 在结束标签之后
afterbegin在开始标签之后

begin ：理解为目标元素的开始标签 end：理解为目标的结束标签
返回值：返回新元素
实例：

    <button>前插</button><button>后插</button><button>内前插</button><button>内后插</button>
    <ul>
        <li>项目</li>
    </ul>
    <script>
        const btn = document.querySelectorAll("button")
        const ul = document.querySelector("ul")

        btn[0].onclick = ()=>{
            let li = document.createElement("li")
            li.innerHTML = "我在目标元素外前面"
            ul.insertAdjacentElement("beforebegin",li)
        }
        btn[1].onclick = ()=>{
            let li = document.createElement("li")
            li.innerHTML = "我在目标元素后面"
            ul.insertAdjacentElement("afterend",li)
        }
        btn[2].onclick = ()=>{
            let li = document.createElement("li")
            li.innerHTML = "我在目标元素前面"
            ul.insertAdjacentElement("afterbegin",li)
            console.log( ul.insertAdjacentElement("afterbegin",li));
        }
        btn[3].onclick = ()=>{
            let li = document.createElement("li")
            li.innerHTML = "我在目标元素外后面"
          let m = ul.insertAdjacentElement("beforeend",li)
          console.log(m)
        }

DOM属性操作

DOM属性主要是指使用脚本操作标签的属性，主要包括：

1.定义属性
2.操作属性
- 查询属性
- 删除属性
- 添加属性
- 修改属性
classList ：H5新增
DataSet数据集：H5新增

1.定义属性：

HTMl标签是有属性的，她的属性是属性名 / 值构成

<div class = "aa" id="bb" style="color:red" title="cc"></div>

Document API获取元素之后，我们拿到的是js元素对象

const div = document.querySelector("div")
console.log(div) //[object HTMLDivElement] 是标签<div>对应的元素名

为了操作标签的属性，DOM为JS脚本定义了一个属性的映射集，映射了所有的HTML属性。改映射中的属性都是元素对象的属性，它对应HTML属性
转换属性规则：

如果HTML元素属性名是一个单词，那么元素对象属性也是单词
如果HTML元素属性名是一个JS保留字，那么要做特殊转换
class => className
for=> htmlFor
所有的属性值都是字符串，但是有两个例外
input标签的checked 的属性值是布尔
option标签的selected 的属性值是布尔

<form>
<input type="checkbox" />
<input type="radio" />
<sele>
</form>

查找元素的属性(2种)

1.Element.getAttribute()

定义：查找元素的属性
语法：

元素.getAttribute("属性名")

返回值：返回字符串值或null（找不到）
实例：

    <h1 id="aaa" class="bbb" style="color:#333;"></h1>
    <script>
        const h1= document.querySelector("h1")
        //读取属性的方法
        console.log(h1.id);
        console.log(h1['style']);
        console.log(h1.getAttribute("class"));
    </script>

2.attributes

定义：属性用于查询指定元素的所有属性。
语法：

元素.attributes

返回值：返回NamedNodeMap对象，该对象包含指定元素的所有属性节点的实时集合。
NamedNodeMap对象不是数组，也不是伪数组，而是一个包含字符串的键值对。可以使用for...of枚举。
实例：

console.log(h1.attributes);//NamedNodeMap(3) [ id="aaa", class="bbb", style="color:#333;" ]

删除属性

1.Element.removeAttribute()

定义：用于查询指定元素是否具有指定的属性。
语法：

元素.removeAttribute('属性名')

返回值：无
实例：

 h1.removeAttribute("class")

检测属性

1.Element.hasAttribute()

定义：Element.hasAttribute() 方法用于查询指定元素是否具有指定属性。
语法：

元素.hasAttribute('元素名')

返回值：布尔值，找到了返回true 找不到返回false
实例：

 <div class="aaa" id="bbb" ></div>
    <script>
        // 元素.hasAttribute('元素名')
    const div=    document.querySelector("div")
    console.log(div.hasAttribute("class"))//true
    console.log(div.hasAttribute("abc"))//false

设置元素的属性

1.Element.setAttribute()

定义：Element.setAttribute()方法用于设置指定元素的属性值。如果该属性已经存在，则更新该值；
语法：

Element.setAttribute("属性名"," 属性值")

没有返回值
实例：

  div.setAttribute("id","hello")
    console.log(div["id"])

classList

classList 伪数组三个方法

元素.classList.add()//向class值列表中添加一个值
元素.classList.remove()//向class值列表中删除一个值
元素.classList.toggle()//如果class值有，就执行remove，没有执行add

 btn[0].addEventListener("click",function(){
            //1.点击按钮，让文字变成红色 add
           h2.classList.add("red")
           //2.点击按钮删除边框 remove
        //    h2.classList.remove("blue")
        })

编程能力有几种

基础知识储备的能力
描述能力，提炼出app包含几种功能
选中目标元素，点击前插可在目标元素前面插入新元素，后插亦然
选中新元素，也可在新元素前后插入新元素
还可以重置，恢复初始状态

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,864评论 6赞 494
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,175评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,401评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,170评论 1赞 286
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,276评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,364评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,401评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,179评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,604评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,902评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,070评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,751评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,380评论 3赞 319
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,077评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,312评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,924评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,957评论 2赞 351

教程 DOM 教程 ：DOM 简介、 目录 DOM、简介 DOM 树、 DOM Document 、DOM Node 、DOM Element 、DOM 属性 、DOM 内容 、DOM 尺寸 、...