HTML DOM入门基础篇

最新推荐文章于 2023-12-28 14:40:45 发布

就是二二二二婷

最新推荐文章于 2023-12-28 14:40:45 发布

阅读量408

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML DOM

本文链接：https://blog.youkuaiyun.com/qq_34474324/article/details/94554179

HTML DOM 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML DOM的基础知识，包括DOM的定义、节点概念及常用方法。详细讲述了如何通过ID、标签名、类名和属性获取元素节点，并解析了获取属性节点和内容节点的步骤。适合HTML初学者入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. HTML DOM简介

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。
HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM 是把HTML里面的各种数据当作对象进行操作的一种思路。在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

二. 常用概念

1. 节点概念

DOM把所有的html都转换为节点，即：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点树中的节点彼此拥有层级关系。我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

注意：对这一部分不理解的可以点我看详细讲解哟。

2. HTML DOM 方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。下列有一些常用的HTML方法 DOM方法，如：

getElementById(id)：获取带有指定 id 的节点（元素）
getElementsByTagName：通过标签名称获取元素节点
getElementsByClassName：通过类名获取元素节点
getElementsByName：通过表单元素的name获取元素节点

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

innerHTML ：节点（元素）的文本值
parentNode：节点（元素）的父节点
注意：parentNode、parentNode、parentNode，没有s重要的事情说三遍。
childNodes：节点（元素）的子节点
attributes：节点（元素）的属性节点

三、获取节点

1. 获取元素节点

通过ID获取元素节点，使用doucument.getElementById。
在设计HTML的时候，一个元素对应的ID应该是唯一的，可以通过doucument.getElementById获取某个元素对应的元素节点对象。
通过标签名称获取元素节点，使用关键字getElementByTagName。
通过类名获取元素节点，使用关键字getElementByClassName。
通过表单元素的name获取元素节点，使用关键字getElementByName。

2. 获取属性节点

首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue。

<html>
  
<div id="ytt" align="student" class="communication">hello YTT!</div>
<script>
var　div1 = document.getElementById("ytt");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");　
document.write("属性名"+as[i].nodeName);
document.write(":");
document.write("属性值"+as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);

</script>
</html>

3. 获取内容节点

首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。


<html>
  
<div id="ytt" align="student" class="communication">hello YTT!</div>
<script>
var　div1 = document.getElementById("ytt");
var content = div1.childNodes[0];
var as = div1.attributes;
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
document.write("<br>");
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");　
document.write("属性名"+as[i].nodeName);
document.write(":");
document.write("属性值"+as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);

</script>
</html>

推荐使用在线编辑器，请点击。