DOM对象模型

2018-07-18 本文已影响0人孟泽_f963

DOM对象模型（Document Object Model）

1.node 节点
2.attribute 属性
3.comment 注释
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

1.什么是DOM

💨DOM是JavaScript操作网页的接口，全称为“文档对象模型”。作用是将网页转为一个JavaScript对象，从而可以用脚本进行操作。

💨DOM树：浏览器会根据DOM模型，将结构化文档解析成一系列的节点，再有这些节点组合成一个数状结构。

💨节点的7种类型
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attribute：网页元素的属性（比如class="a" src='img/a.png'）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段 //不常用
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

2.节点的属性

💨nodeType 返回一个整数值，表示节点的类型
文档节点（document）：9
元素节点（element）：1
属性节点（attribute）：2
文本节点（text）：3
文档片断节点（DocumentFragment）：11
文档类型节点（DocumentType）10
注释节点（Comment）：8，

💨nodeName 返回节点的名称
文档节点（document）：#document
元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）：#text
文档片断节点（DocumentFragment）：#document-fragment
文档类型节点（DocumentType）：文档的类型
注释节点（Comment）：#comment

<div id="div">Hello world</div>
var div = document.getElementById('div');
div.nodeName // DIV

💨nodeValue 返回节点的文本值，可读可写

<div id="div">hello world</div>
var div = document.getElementById('div');
div.nodeValue //null
div.firstChild.nodeValue//hello world

💨textContent 返回当前节点和他所有后代节点的文本。忽略标签。

<div id="div">我是 <span>span</span></div>
document.getElementById('div').textContent  //我是span

同样textContent也是一个可读可写的属性。如果写入的内容包含标签，也会把标签当做文本。

💨nextSibling 返回当前节点的下一个兄弟节点

<div id="d1">hello</div><div id="d2">world</div>
var div1 = document.getElementById('d1');
var div2 = document.getElementById('d2');
console.log(d1.nextSibling)//<div id="d2">world</div>

💨parentNode 返回当前前节点的父级节点。只可能是文档节点或元素节点

console.log(div.parentNode)

💨firstChild 返回当前节点的第一个子节点
💨lastChild 返回当前节点的最后一个子节点

var body=document.getElementsByTagName("body")[0]
        console.log(body.firstChild)
        console.log(body.lastChild)

💨childNodes 返回当前节点中的所有子节点

var body=document.getElementsByTagName("body")[0]
console.log(body.childNodes)

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

3.node的方法

💨appendChild() 用来插入节点
💨hasChildNodes() 用来判断一个节点是否有子节点，返回一个布尔值。
💨cloneNode() 用来克隆一个节点,不会复制事件
💨inserBefore() 讲一个节点插入到指定位置。插入两个值，第一个值为要添加的节点，第二个值为插入到此值前面，，如果第二个值输入unll则插入到最后面。
💨removeChild() 删除一个子节点
💨replaceChild() 替换一个子节点，第一个值为新节点，第二个值为要替换的节点
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

4.父节点和子节点

<div id="div">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <a href=""></a>
</div>

💨children 返回当前节点的所有元素子节点，是一组nodelist数据

var div1=document.getElementById("div")
console.log(div.children)//HTMLCollection(6) [p, p, p, p, p, a]

💨append 向最后添加一个或多个子节点
💨prepend 向最前面添加一个或多个子节点
💨before() 想当前节点前面添加一个或多个节点
💨after() 想当前节点后面添加一个或多个节点

var div1=document.getElementById("div")
        var span=document.createElement("span")
        var span2=document.createElement("span")
        var span3=document.createElement("span")
        document.body.append('www')
        div1.append("wowowow",span,)
        document.body.prepend('www')
        div1.prepend("wowowow",span,)
        div1.before(span,span2)
        div1.after(span3)

💨replaceWith() 替换当前节点。

var div1=document.getElementById("div")
var span=document.createElement("span")
div1.replaceWith(span)