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)
网友评论