DOM
- 2022 年 8 月 6 日
- 筆記
- DOM, javascript
DOM
节点
节点：Node
元素节点 （element）
属性节点 （attribute）
文本节点 （text）
<div id='a' name='b'>这是文本节点</div>
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 = "<b>hello</b>" //解析html代码的
div.innerText = "<b>hello</b>" //不会解析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元素对象
<span></span>
<div>
<a></a>
<span></span>
</div>
<p></p>
属性
获取父元素
// 相关属性
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);
//得到<span></span>
//获取后面的兄弟
console.log(div.nextElementSibling)
//得到<p></p>
方法
-
获取特定的元素
<div id='box'> <img></img> <img></img> <img></img> </div> <img></img> //获取 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')
-
