DOM的概述
DOM：文档对象模型，操作对应的文档（html文档）DOM遵从文档流，属于同步机制
DOM的分类：1.document文档对象（ dom操作中的最大对象，表示当前操作的html文档）
2.element元素对象（标签元素）
3.attribute属性对象（标签里面的属性）
4.text文本对象（html代码里的所有文本）
document
方法（通过对应的标识来获取元素）
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 创建属性节点
//创建一个id属性 默认值伪空字符串
var attr = document.createAttribute('id')
//给当前属性对象指定对应的属性值
attr.value = 'hello world'
console.log(attr);//id = 'hello world'
console.log(typeof attr);//object
属性
获取属于文档的相关内容
document.body 获取body
document.head 获取head
document.froms 获取froms (返回一个HTMLCollection)
document.body
document.head
document.froms
Element 获取的方法（在元素里面获取元素）（跟对应的document的获取元素方法一致）
element.getElementById()
element.getElementsByClassName()
element.getElementsByName()
element.getElementsByTagName()
element.querySelector()
添加的方法 （在元素里面添加元素 或者是添加text 添加到对应的元素中去）
append （追加多个 支持里面传入字符串（字符串会被识别为文本））
appendChild （追加一个 只支持node对象）
//获取元素
var box = document.getElementById('box')
//append添加 child子类
//在append传入对应的string类型的值就是添加文本 传入对应的node可以添加文本 也添加元素
var p = document.createElement('p')
var text = document.createTextNode('我是文本')
//对于已经添加的元素不能重复添加（重复以最后一次为准）
//append 和 appendChild都是追加到末尾
box.append('<b>添加的</b>',p,text)//添加多个 支持添加string类型
box.appendChild(p)//添加一个
var strong = document.createElement('strong')
box.appendChild(strong)//添加一个
insertBefore 插入元素到某个子元素之前 （参数1需要传入的元素、参数2子元素）
//获取元素
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) //错误的 他是孙子节点
insertAdjacentElement 插入element
insertAdjacentHTML 插入HTML代码
insertAdjacentText 插入文本
// '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 删除子元素
修改方法
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);//完整克隆
属性操作的相关方法 (对于所有的属性都可以进行操作)
获取 getAttribute(attrName)
设置 setAttribute(attrName,attrValue)
删除 removeAttribute(attrName)
//获取属性 通过属性名来获取属性值 后面带NS 表示namespace 命令空间
//传递的是属性名
var attrVal = box.getAttribute('hello')
console.log(attrVal);//hi
//设置属性
//第一个参数属性名 第二个参数为属性值(自动发生隐式转换)
box.setAttribute('age',18)//添加
box.setAttribute('age','20')//修改
//移除属性 根据属性名来移除对应的属性 对于本身带的和后续添加的都可以进行操作
box.removeAttribute('hello')
box.removeAttribute('age')
属性
基础属性
id 属性 （获取/设置 id值）
className 属性 （获取/设置 class值）
style 属性 （获取对应的一个样式对象 / 设置相关样式）
title 属性 （获取/设置 title属性）
tagName 属性 （只读属性）
innerHTML 属性 （显示的html内容 编译对应的html代码）
innerText 属性 (显示的文本 不能编译html代码)
节点相关属性（只读属性）
previousElementSibling 前面的元素
nextElementSibling 后面的元素
parentElement 父元素
children 子元素集合 （HTMLCollection）
节点关系的属性 （*）
父子
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); //得到父节点
//获取子节点
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>
节点相关的方法
replaceChild 替换子节点
appendChild 添加子节点
removeChild 删除子节点
insertBefore 插入节点到子节点前面
cloneNode 克隆节点
replaceChildren 替换所有子节点
append 添加多个子节点
remove 移除自己及所有的子节点
操作属性节点的方法
setAttributeNode （属性节点 Attribute对象）
getAttributeNode （返回的是一个属性节点 Attribute）
removeAttributeNode （根据对应的属性节点删除）
<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>
标签：box,console,元素,Day09DOM,document,节点,属性 From： https://www.cnblogs.com/zmfhtml5/p/16782536.html