DOM的相关操作

js中DOM的相关操作

---

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素

---

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树

对象的 HTML DOM 树

方便的展示了家族成员之间的关系，把复杂的关系简明的表示出来

DOM节点操作

1.dom获取（6种方式）

//通过id获取到单个元素
let oBox = document.getElementById('box');
console.log(oBox)     //<div id='box' class="item">123456</div>


//通过class类获取到的是一组元素，不是数组
let oBox2 = document.getElementsByClassName('item');
console.log(oBox2)    //HTMLCollection [div#box.item,box:div#box.item]
console.log(oBox[0]==oBox)  


//通过TagName获取道德是一组元素，与上面相同
let oBox3 = document.getElementsByTagName('div')[0];
console.log(oBox3)


//通过name后去到的是NodeList[div#box.item]，也是集合
let oBox4 = document.getElementsByName('mybox');
console.log(oBox4)   //NodeList[div#box.item]


//h5新加两种
//获取单个
let item = document.querySelector('.item')  //参数为class名称
//获取组合
let items = document.querySelectorAll('.item')
console.log(item,items)

//body
let body = document.body;
//html
let html = document.documentElement;

2.增加节点

let fa = document.querySelectorAll('.father')[0];
fa.append('hello')
fa.innerHTML='<h1>hello</h1>'   //插入html代码携带样式
fa.innerText = '<h1>hello</h1>'			//插入文章不携带样式
fa.innerHTML = fa.innerHTML + 'hello'
console.log(fa.innerHTML)


//创建文本节点
let text = document.createTextNode('hello')
//创建元素节点
let tag = document.createElement('Hi');
tag.appendChild(text)
fa.appendChild(tag)

3.删除

//删除节点
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
//先获取父节点
let oul = document.querySelector('ul')
//在获取子节点
let oLi = document.querySelectorAll('li')[1]

oul.removeChild(oLi)

4.替换

//替换
//获取父节点
let oUl = document.querySelector('ul')
//再次获取子节点
let oLi = document.querySelectorAll('li');
//必须是同一个父亲
oUl.replaceChild(oLi[1],oLi[0])   //将两个节点进行一下替换

5.插入inserBefore()

//先获取父节点
let oUl = document.querySelector('ul')
//在获取子节点
let oLi = document.querySelectorAll('li');
let other = document.createElement('a')
other.innerHTML = '百度'

//必须是同一个父亲
oUl.insertBefore(other,oLi[1])

---

总结：

// 1.创建新节点(document调用)
createDocumentFragment()   //创建一个DOM片段
createElement()    //创建一个具体的元素
createTextNode()   //创建一个文本节点


// 2.添加，移除，替换，插入（父元素调用）
appendChild()   //添加
removeChild()   //移除
replaceChild()   //替换
insertBefore()    //插入


// 3.查找(document调用)
getElementByTagName()       //通过标签名称一组元素
getElementByName()          //通过元素name属性的值，一组元素
getElementById()            //通过元素ID,唯一性单个元素
getElementByClassName()       //通过c元素lass获取，一组元素
qurySelectorAll('选择器')     //通过选择器获取一组元素
qurySelector('选择器')       //通过选择器获取单个元素


//关系（元素调用前三个父元素调用）
childNodes       //获取所有子节点
children         //虎丘所有的子元素节点（常用）
firstElementChild        //获取第一个元素
lastElementChild        //获取最后一个元素
parentNode            //获取当前节点的父节点
previousElementSibling         //获取当前节点的前一个兄弟元素
nextElementSibling           //获取当前节点的最后一个兄弟元素

---

参考资料：
https://blog.csdn.net/weixin_43638968/article/details/109247181