二阶段JavaScript-Day12知识点整理(DOM节点)

最新推荐文章于 2024-10-17 09:40:47 发布

是天音鸭

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量924

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44153295/article/details/121926140

版权

本文详细介绍了DOM（Document Object Model）中的节点概念，包括元素节点、属性节点、文本节点等五种主要类型，并展示了如何通过节点关系获取和操作节点。此外，还讲解了如何获取元素的行间和非行间样式，以及提供了创建、添加、替换和删除节点的方法。

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

1.什么是DOM节点

节点：w3c规范，页面上所有的内容都可以称为节点，DOM的最小单元就是节点。

节点的种类：节点的种类有12种，这里只列举5种。

1.元素节点，标签，nodeType：1

2.属性节点，属性，nodeType：2

3.文本节点，文本，nodeType：3

4.注释节点，注释，nodeType：8

5.文档节点，文档，nodeType：9

节点.nodeName：元素节点的nodeName值都是大写的标签名。

DOM以树状的形式出现（倒立的树），方便程序员对dom进行增删改查。

2.如何获取节点

通过节点关系（父子关系，兄弟关系）来获取。

//获取父元素的第一个子节点
父节点.firstChild

//获取节点的下一个兄弟节点
节点.nextSibling

//获取节点的上一个兄弟节点
节点.previousSibling

//获取父节点的最后一个子节点
父节点.lastChild

//获取节点的父节点
节点.parentNode

//获取所有的子节点（伪数组形式）
父节点.childNodes

3.获取元素节点

//获取父元素的第一个元素节点
父节点.firstElementChild

//获取节点的下一个兄弟元素节点
节点.nextElementSibling

//获取节点的上一个兄弟元素节点
节点.previousElementSibling

//获取父节点的最后一个元素节点
父节点.lastElementChild

//获取节点的父元素节点（有兼容性问题）
节点.parentElement

//获取所有的子元素节点（伪数组形式）
父节点.children

4.节点的操作

//1.创建节点，返回创建好的元素节点
document.createElement('标签名');

//2.追加节点，将子节点追加到父元素的尾部
父节点.appendChild(子节点);

//3.插入节点，将子节点插入到父节点指定位置
父节点.insertBefore(子节点, 插入位置节点);

//4.替换节点，旧节点替换为新节点
父节点.replaceChild(新节点, 旧节点);

//5.删除节点
父节点.removeChild(子节点);
节点.remove();//常用

//6.克隆节点，默认false
//true：代表克隆元素本身和元素的子元素，完全克隆。
//false：代表只克隆元素本身，子元素不会克隆。
节点.cloneNode(true/false);

5.获取行间样式和非行间样式

var tianIn = document.querySelector('div');

//获取行间样式
tianIn.style.width
window.getComputedStyle(tianIn, null)['width'];

//获取非行间样式
window.getComputedStyle(tianIn, null)['width'];