Dom的概述
Dom文档对象模型,顾名思义他就是用于操作对应的文档化的,也就是操作你写的html文档.Dom是一个遵从文档流的语句.所以他是同步机制
Dom的分类
domcument dom操作中最大的对象(表示当前操作的html文档)
element 元素对象 (表示的是对应的标签元素)
attribute属性对象(表示的所有的html标签里面的属性)
text文本对象(表示在html代码里面写的所有文本)
document(文档对象)
获取通过对应的方法来获取element元素
document.getElementById 通过id获取对应的元素(element)
document.getElementsByClassName 通过className获取 （HTMLCollection）
document.getElementsByTagName 通过标签名获取（HTMLCollection）
document.getElementsByName 通过name属性获取 （NodeList）
document.querySelector 通过选择器获取第一个 （Element）
document.querySelectorAll 通过选择器获取所有（NodeList）
document.getRootNode 获取根节点（Node）
创建的相关方法 创建对应的节点对象
document.createElement创建元素节点
document.createAttribute 创建属性节点
document.createTextNode 创建文本节点
属性
获取属于文档的相关内容
document.body 获取body
document.head 获取head
document.froms 获取froms(返回一个htmlCollection)
Element 元素对象
方法
获取的方法(在元素里面获取元素)(跟对应的document的获取元素方法一致)
添加的方法(在元素里面的添加元素或者添加text 添加到对应的元素中)
添加到末尾的方法
append (追加多个支持里面传入字符串(字符串会被识别成文本))
appendChild(追加一个 支持node对象)
插入到某个子元素之前
insertBefore 插入元素到某个子元素之前 参数1需要传入的元素、参数2子元素）
insertAdjacentElement 插入element
insertAdjacentHTML 插入HTML代码
insertAdjacentText 插入文本
//获取元素
var box = document.getElementById('box')
//第一个是对应需要插入的节点 第二个是对应的子节点
var link = box.getElementsByClassName('link')[0]
var strong1 = document.createElement('strong')
box.insertBefore(strong1,link)
//插入只针对第一层的子元素
var b = document.getElementById('box').getElementsByClassName('link')
[0].getElementsByTagName('b')[0]
box.insertBefore(strong1,b) //错误的 他是孙子节点
// 'beforebegin': 在该元素本身的前面。
// 'afterbegin':只在该元素当中，在该元素第一个子孩子前面。
// 'beforeend':只在该元素当中，在该元素最后一个子孩子后面。
// 'afterend': 在该元素本身的后面。
var hello = document.createElement('hello')
box.insertAdjacentElement('beforebegin',hello)
box.insertAdjacentElement('afterbegin',hello)
box.insertAdjacentElement('beforeend',hello)
box.insertAdjacentElement('afterend',hello)
box.insertAdjacentHTML('beforebegin','<b>我是插入的之前的html代码</b>')
box.insertAdjacentText('beforebegin','文本')
删除方法
remove 删除自身
removeChild 删除子元素
//删除自己里面内容都删除
box.remove()
//删除子元素 传递对应的子元素
修改方法
replaceChild 一对一替换
replaceChildren 替换所有（可以传递多个参数 支持字符串）
克隆的方法
cloneNode
<div>
<a href="hello">你好</a>
</div>
<script>
var box = document.querySelector('div')
//克隆对应的元素 传递的参数是一个布尔类型的值 为true表示深度克隆 为false表示浅克隆
（false）
var element = box.cloneNode()//只克隆对应的第一次 默认为false
console.log(element);//<div></div>
var element = box.cloneNode(true)//只克隆所有的内容包含对应的里面文本和元素及相关事
件
console.log(element);//完整克隆
</script>
属性操作的相关方法 (对于所有的属性都可以进行操作)
获取 getAttribute(attrName)
设置 setAttribute(attrName,attrValue)
删除 removeAttribute(attrName)
属性
基础属性
id 属性 （获取/设置 id值）
className 属性 （获取/设置 class值）
style 属性 （获取对应的一个样式对象 / 设置相关样式）
title 属性 （获取/设置 title属性）
tagName 属性 （只读属性）
innerHTML 属性 （显示的html内容 编译对应的html代码）
innerText 属性 (显示的文本 不能编译html代码)
节点相关属性（只读属性）
previousElementSibling 前面的元素
nextElementSibling 后面的元素
parentElement 父元素
children 子元素集合 （HTMLCollection）
相关获取元素内属性节点集合的属性（只读属性）
attributes
Node
DOM中的节点分类
元素节点 element
属性节点 attributeNode
文本节点 textNode
节点相关的属性
节点划分的属性 （*）
nodeName 节点名
nodeType 节点类型
nodeValue 节点值
节点关系的属性 （*）
父子
parentElement 父元素
parentNode 父节点
childNodes 所有的子节点（包含元素节点和文本节点）
children 所有的元素节点
兄弟关系
previousElementSibling 上一个元素节点
previousSibling 上一个节点
nextElementSibling 下一个元素节点
nextSibling 下一个节点
第一个子节点和最后一个子节点
firstChild 第一个子节点
firstElementChild 第一个子元素节点
lastChild 最后一个子节点
lastElementChild 最后一个子元素节点
<div>
hello
<a href="">你好</a>
<p>
<a href="">前面的元素节点</a>
你好
<a href="">后面的元素节点</a>
</p>
你好
</div>
<script>
//节点的相关关系
var p = document.querySelector('p')
//父子关系
//获取对应的父节点 (一般情况俩者是一样的)
console.log(p.parentElement); //得到父元素
console.log(p.parentNode); //得到父节点
节点相关的方法 （*）
replaceChild 替换子节点
appendChild 添加子节点
removeChild 删除子节点
insertBefore 插入节点到子节点前面
cloneNode 克隆节点
replaceChildren 替换所有子节点
append 添加多个子节点
remove 移除自己及所有的子节点
操作属性节点的方法
setAttributeNode （属性节点 Attribute对象）
getAttributeNode （返回的是一个属性节点 Attribute）
removeAttributeNode （根据对应的属性节点删除）
删除空文本节点的相关方法
//获取子节点
console.log(p.parentNode.childNodes); //获取子节点 （包含元素 包含文本） nodeList
俩个文本 加上一个p标签
console.log(p.parentNode.children); //获取子元素 （只包含元素节点）HTMLCollection
p标签
//兄弟关系
//上一个
console.log(p.previousElementSibling); //上一个元素节点
console.log(p.previousSibling); //上一个节点 （空文本也算节点）
// 下一个
console.log(p.nextElementSibling); //下一个元素节点
console.log(p.nextSibling); //下一个节点
//第一个子节点
console.log(p.firstChild); //空文本
console.log(p.firstElementChild);//a标签
//最后一个子节点
console.log(p.lastChild); //空文本
console.log(p.lastElementChild); //a标签
</script>
<div id="box"></div>
<script>
//运用相对较少
var box = document.getElementById('box')
//获取属性节点 返回时一个attribute对象
//传入一个string类型的属性名
console.log( box.getAttributeNode('id'));
console.log( box.getAttributeNode('id').value);
//设置对应的属性节点 传入的是一个attribute对象
var attr = document.createAttribute('class')
attr.value = 'content'
box.setAttributeNode(attr)
//removeAttributeNode 根据属性节点对象来删除删除对应的属性节点
box.removeAttributeNode(box.attributes[0]) //删除第一个属性节点
</script>
<div>
<a href="">嘻嘻</a>
<b>哈哈</b>
hello
</div>
<script>
var div = document.querySelector('div')
//获取div的所有子节点
console.log(div.childNodes.length);//5
//传入一个元素 删除里面的空文本节点
function deleteEmptyTextNode(element){
//获取所有的子节点
var nodes = element.childNodes
//遍历所有的子节点
for(var node of nodes){
//进行判断 判断当前是否为空文本节点
if(node.nodeType == 3 && /^\s+$/.test(node.nodeValue)){
//删除对应的空文本节点
element.removeChild(node)
}
}
}
deleteEmptyTextNode(div)
console.log(div.childNodes.length);//3
</script>
