DOM的遍历

最新推荐文章于 2022-10-06 19:44:31 发布

无心-无忧

最新推荐文章于 2022-10-06 19:44:31 发布

阅读量1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wuxingwuyou/article/details/124442711

版权

本文详细介绍了DOM中的节点遍历方法，如children、childNodes、firstChild等属性，以及父级节点和兄弟节点的查找。同时，阐述了如何通过DOM进行元素的创建、插入、替换和删除，为前端开发中的DOM操作提供了清晰的指导。

摘要由CSDN通过智能技术生成

一.DOM的遍历
1. 父元素查找
children 返回（元素）子节点
   console.log(box.children);//HTMLCollection(3) [div.box1, div.box2, ul.list]
childNode 返回子节点（包含文本（空）节点）
   console.log(box.childNodes);//NodeList(7) [text, div.box1, text, div.box2, text, ul.list, text]
firstChild 返回第一个子节点（包含文本）
   console.log(box.firstChild);//#text
firstElementChild 返回第一个子（元素）节点
   console.log(box.firstElementChild);//div.box1
lastChild 返回最后一个子节点（包含文本）
   console.log(box.lastChild);//#text
lastElementChild 返回最后一个子（元素）节点
   console.log(box.lastElementChild);//ul.list
parentNode 返回父级节点
   console.log(box1.parentNode);//div.box
parentElement 返回父级（元素节点）
   console.log(box2.parentElement);//div.box
offsetParent 相对关系返回第一个由定位属性的祖元素，如果没有，返回body
   console.log(list1.offsetParent);//body
2.兄弟元素同胞元素
nextElementSibling 返回下一个兄弟元素节点
console.log(box1.nextElementSibling);
nextSibling 返回下一个兄弟节点包含文本
console.log(box1.nextSibling);
nextElementSibling 返回上一个兄弟元素节点
console.log(box2.previousElementSibling);
nextSibling 返回上一个兄弟节点包含文本
console.log(box1.previousSibling);
二、DOM节点的增删改查
创建元素
var arr1=document.createElement('P')
arr1.innerText='段落标签6';
arr1.style.backgroundColor='yellow'
var arr2=document.createElement('P')
arr2.innerText='段落标签7';
arr2.style.backgroundColor='hotpink'
var arr3=document.createElement('P')
arr3.innerText='段落标签8';
arr3.style.backgroundColor='lightblue'
插入元素
   aBtn.insertBefore(arr2,aBoxs[1])
替换元素
   aBtn.replaceChild(arr3,aBoxs[4])
删除元素
   aBtn.removeChild(aBoxs[3])