前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）

最新推荐文章于 2023-09-05 09:26:32 发布

浅香沉木

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量487

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Java_53/article/details/106073901

版权

DOM官方定义

DOM,Document Object Model,文档对象模型，我们可以把网页中的所有“东西”看成是对象“；
DOM的官方定义：DOM可以使用脚本，动态的访问或操作，网页的仙鹤，网页外观，网页结构；

DOM的分类

核心DOM：提供了同时操作HTML文档和XML文档的公共属性和方法；
HTML DOM ：针对HTML文档提供的专用的属性方法；
XML DOM ：针对XML文档提供的专用的属性和方法（就业讲）；
CSS DOM :提供了操作CSS的属性和方法；
Event DOM :事件对象模型；如：onclick事件,onload事件等；

HTML节点树(重点：3，节点的创建，追加和删除)

在DOM中，称为“节点”；
在HTML中，称为“标记”；
在JS中，称为“对象”；
例：如图，左边为源代码和右边为节点树

节点关系

根节点：一个HTML文档只有一个根，它就是HTML节点；
子节点：某一个节点的下级节点；
父节点：某一个节点的上级节点；
兄弟节点：两个子节点同属于一个父节点；

DOM节点类型

document文档节点：代表整个网页，不代表任何HTML标记，但它是HTML节点的父节点；
element元素节点：指任何HTML标记，每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点；
attribute属性节点：指HTML标记的属性；
text节点：是节点树的最底层节点；

核心DOM中公共的属性和方法

提示：核心DOM中查找节点（标记），都是从根节点开始的（<html>节点）；

1，节点访问

nodeName :节点名称；
nodeValue :节点的值，只有文本节点才有值，元素节点没有值；nodeValue的值只能是“纯文本”，不能含有任何的HTML或CSS属性，而HTML DOM中的innerHTML包含HTML标记的所有内容，包括HTML标记等；
firstChild :最后一个子节点；
lastChild :最后一个子节点；
childNodes :子节点列表，是一个数组；
barentNode :父节点；

查找DOM节点（标记）

1，查找html节点
var node_html =document.firstChild;
2, 查找body节点
var node_body =node_html.lastChild;
3,查找table节点
var node_table =node_body.first

2，节点属性

3，节点的创建，追加和删除（重点）

1，节点的创建

var obj = createElement(tagName); 创建一个指定的HTML节点（标记）；tagName:是指不带方括号的标记名；新节点创建后需加到某个父节点下；

2，节点的追加

parentNode.appendChild(childNode); 将创建的节点，追加到某个父节点下；
parentNode :代表父节点，父节点必须存在；
childNode :代表子节点;

3，节点的删除

parentNode.removeChild(childNode); 删除子节点；
parentNode :代表父节点，父节点必须存在；
childNode :代表子节点;
例：

@沉木

浅香沉木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）

DOM官方定义DOM,Document Object Model,文档对象模型，我们可以把网页中的所有“东西”看成是对象“；DOM的官方定义：DOM可以使用脚本，动态的访问或操作，网页的仙鹤，网页外观，网页结构；DOM的分类核心DOM：提供了同时操作HTML文档和XML文档的公共属性和方法；HTML DOM ：针对HTML文档提供的专用的属性方法；XML DOM ：针对XML文档提供的专用的属性和方法（就业讲）；CSS DOM :提供了操作CSS的属性和方法；Event DOM :事件对象模
复制链接

扫一扫