DOM
节点
节点：Node
元素节点 （element）
属性节点 （attribute）
文本节点 （text）
这是文本节点
div为标签节点、 id和name...等都是属性节点、这是文本节点是文本节点
属性节点操作的相关方法
setAttributeNode 设置属性节点
getAttributeNode 获取属性节点
removeAttributeNode 删除属性节点
方法
cloneNode 方法 （克隆所有节点）
append 添加节点
appendChild 添加节点
replaceChild 替换节点
replaceChildren 替换所有的子节点
insertBefore 插入节点
removeChild 移除子节点
innerHTML 及 innerText
//innerHtml 显示的html(所有) innerText 显示的文本（所有的文本）
console.log(div.innerHTML);
console.log(div.innerText);
div.innerHTML = "hello" //解析html代码的
div.innerText = "hello" //不会解析html代码的
document文档对象
属性
-
document.head //获取head标签
-
document.body //获取body标签
-
document.forms //获取所有的表单标签
HTMLCollection 与 NodeList 的区别
-
NodeList 是一个静态集合，其不受 DOM 树元素变化的影响；
-
相当于是 DOM 树快照，节点数量和类型的快照，就是对节点
增删，NodeList 感觉不到。但是对节点内部内容修改，是可以感觉到的，比如修改
innerHTML。 -
只有 NodeList 对象有包含属性节点和文本节点。
-
HTMLCollection 是动态绑定的，是一个的动态集合，DOM 树发生变化，HTMLCollection 也会随之变化，节点的增删是敏感的。
-
HTMLCollection 元素可以通过
name，id或index索引来获取。NodeList 只能通过index索引来获取。
方法
1.获取全局内容
Element后面有s的都是返回一个伪数组（有长度和下标，但不是数组）
-
通过id获取（document.getElementById()）返回一个元素（Element类型）
-
通过class属性名获取（document.getElementsByClassName() ）（HTMLCollection）
-
通过标签名获取（document.getElementsByTagName() ）（HTMLCollection）
-
通过属性获取（document.getElementsByName() ）（NodeList）
-
通过复合选择器获取（document.querySeletor() ）返回的是第一个查到的元素（Element类型）
（NodeList）
-
通过复合选择器获取（document.querySeletorAll() ）
（NodeList）
-
获取根节点（document.getRootNode()）
2.创建全局的内容
-
创建元素（document.createElement()）返回一个元素
-
创建属性结点（document.createAttribute()）
-
创建文本节点 （document.createTextNode()）
//创建元素的方法
var p = document.createElement('p') //传入的是一个对应的标签名
console.log(p);
//创建属性的方法
var attr = document.createAttribute('password') //创建的是一个属性 默认为空值
//给属性对象赋属性值的操作
attr.value = '123456'
console.log(attr);//
//创建文本
var text = document.createTextNode('文本节点') //创建一个文本节点对象
console.log(text);
Element元素对象
属性
获取父元素
// 相关属性
var div = document.getElementsByTagName('div')[0]
// 获取父元素
console.log(div.parentElement);//body
获取子元素
// 获取子元素
var div = document.getElementsByTagName('div')[0]
console.log(div.childElementCount); //2 子元素个数
console.log(div.children); //[a,span] 获取子元素 （伪数组）
获取兄弟元素
var div = document.getElementsByTagName('div')[0]
//获取前面的兄弟
console.log(div.previousElementSibling);
//得到
//获取后面的兄弟
console.log(div.nextElementSibling)
//得到
方法
-
获取特定的元素
//获取 div 中的 Img document.getElementById('box').getElementsByTagName('img')
-
替换元素
-
replaceChild （用一个新的元素来替换里面的子元素）
-
replaceChildren （用一个元素来替换里面所有的子元素）
var div = document.getElementById('box') div.replaceChildren("hello") //替换所有的子节点 用传入的节点替换里面所有的子节点 var content = document.createElement('div') div.replaceChildren('span') //用content传的替换所有子元素，产生一个content传来的标签 //replaceChild 用前面的替代后面的（一定是属于我们本身的儿子元素） var a = document.createElement('a') div.replaceChild(a,div.children[0]) //使用新的节点来替换对应的子节点 使用a这个元素来替代对应的content这个子元素
-
-
插入元素
-
append 插入任意的子元素到对应的父元素内 插入到后面
-
appendChild 插入一个子元素到对应的父元素内容 插入到后面
-
insertBefore 插入一个元素到另一个子元素的前面
var div = document.getElementById('box') // 插入元素 append inster div.append("hello",content) //追加内容到当前元素里面的最后一个元素的后面 追加多个 // appendChild 追加子元素 var b= document.createElement('b') div.appendChild(content) //追一个元素在当前元素的里面 （同一个元素只能允许加一次 里面存在是不可以添加的） div.appendChild(b) //追一个元素在当前元素的里面 //insertBefore var span = document.createElement('span') //参数1 当前需要插入的元素 参数2 对应的子元素 div.insertBefore(span,div.children[0]) //插入到哪个子元素的前面
-
-
删除元素
div.remove() //全部删除 包括自己 // 清空所有的内容 //建议使用replaceChildren('') -
cloneNode（克隆）
var div = document.getElementById('box') var cloneDiv = div.cloneNode() //进行元素克隆 //默认只会克隆自己 并不会克隆里面包含对应的内容 var div1 = div.cloneNode(true) //里面是true的情况表示深度克隆 他会考虑所有的内容包括事件 console.log(div1); -
获取、创建、删除属性的方法
-
getAttribute
-
setAttribute
-
removeAttribute
//获取 //示例：element.getAttribute(name) box.setAttribute('username','tom') console.log(box.getAttribute('width'));//返回对应的值 一般都是string console.log(box.getAttribute('username'));//返回对应的值 一般都是string //创建 //示例：element.setAttribute(name,value) //不仅可以操作 后续定义的属性 也可以操作本身就有的属性 var box = document.querySelector('div') box.setAttribute('width','100px') //删除 //示例：element.removeAttribute(name) box.removeAttribute('width')
-