DOM基础知识

最新推荐文章于 2024-06-05 23:20:10 发布

没错就是这

最新推荐文章于 2024-06-05 23:20:10 发布

阅读量1.3k

点赞数

分类专栏：前端知识 JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_48839439/article/details/126500173

版权

前端知识同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

DOM全称为文档对象模型（Document Object Model）。

是JS操作网页的接口，它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作。

其提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。

一、层级节点

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。节点的类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragmen。

document 节点表示每个文档的根节点。而根节点的唯一子节点是<html>元素，我们称之为文档元素（documentElement）。文档元素始终都是<html>元素。

document 文档节点
Element 元素节点
Attribute 属性节点
Text 文本节点
DocumentType doctype标签
Comment 注释节点
DocumentFragment 文档片段

二、Node类型

Node接口是由所有DOM节点类型实现。Node接口在js中作为Node类型实现，所有节点类型都继承Node类型。所有类型都共享相同的基本属性和方法。

1、属性

属性使用法：（例：console.log(text.nodeType) // 返回：3; 其返回值是3表示文本节点）

（例： console.log(div.nodeValue); // null；其返回值为null表示该节点没有文本值）

nodeType 返回值为一个整数值，以此表示节点的类型

nodeName 返回节点名称

nodeValue 返回一个字符串，表示当前节点本身的文本值，该属性只读写text（文本节点）、comment（注释节点）、attr（属性节点）。

textContent 返回当前节点和它的所有后代节点的内容

nextSibling 返回紧跟在当前节点后面的第一个同级节点，如果没有同级节点，则返回null。

previousSibling 返回当前节点前面的、距离最近的一个同级节点。如果没有，则返回null。

parentNode 返回当前节点的父节点（一个节点的父节点只会有元素节点、文档节点、文档片段节点这三种类型）

parentElement 返回当前节点父元素节点（注意：与父节点不一定相同，父元素节点的节点类型是元素），如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。

firstChild 返回当前节点的第一个子节点，如没有返回null。

lastChild 返回当前节点的最后一个节点，如没有则返回null。

childNodes 返回一个NodeList几何（类似数组的对象），其成员是当前节点的所有子节点。

2、方法

appendChild 将一个节点作为最后一个节点插入当前节点, 参数为要插入的新节点。

<script>
  var a1 = document.createElement('a');  // 创建元素节点p
  a1.innerHTML = 'a标签链接';   // 向a标签插入内容
  document.body.appendChild(a1);  // 将节点插入到body中
</script>

insertBefore 将某个节点插入父节点内部的指定位置，参数为两个：分别为新节点、要插入位置的后面节点（因为新节点将会插入到此节点的前面；此节点为父节点内部的一个子节点）。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

removeChild 将一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

cloneNode 返回调用该方法的节点的一个副本。

var 克隆生成的副本节点名称 = 将要被克隆的节点 . cloneNode(deep);

如果deep的位置是true则该节点的所有后代节点也都会被克隆，如果为false,则只克隆该节点本身。

三、Document类型

getElementById 方法

通过id查找元素

innerHTML 属性

可用于获取或替换 HTML 元素的内容

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表