DOM文档对象模型基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43465434/article/details/114319658

本文介绍了DOM（Document Object Model）的基本概念，包括如何使用`document.write()`和`document.writeln()`输出内容，以及如何通过`document.forms`、`document.getElementById()`、`document.getElementsByTagName()`等方法快速获取和操作网页元素。此外，还讲解了ID、标签、Name和类选择器的选择方式。

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

DOM文档对象模型(Document Object Model)

输出内容（了解）

write()
将内容输出到浏览器中
- 输出的内容支持HTML标记
- 输出位置和代码位置有关
语法：document.write()
writeln()
向文档写入数据并添加换行符

语法：document.writeln()

快速获取元素（了解*）

document.forms⭐（掌握）
获取所有form对象引用

由于form是用来提交数据的，是前后端进行连接的一种技术手段，所以获取form表单的方法一定要掌握

通过JS快速获取表单对象：

document.forms[0] ==> 获取表单返回值为一个DOM元素对象
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMSClCEq-1614757954802)(C:\Users\80596\AppData\Roaming\Typora\typora-user-images\image-20210303155038256.png)]$
document.forms[0].username ==> 获取表单中用户名的元素对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YgJENCI4-1614757954810)(C:\Users\80596\AppData\Roaming\Typora\typora-user-images\image-20210303155046303.png)]$
document.forms[0].username.value ==> 获取表单中用户名的值
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RR8za4tm-1614757954816)(C:\Users\80596\AppData\Roaming\Typora\typora-user-images\image-20210303155147818.png)]$

document.images
返回文档中所有Image对象引用
document.embeds
获取所有嵌入内容的 embed集合
document.links
获取所有的Link对象引用
document.scripts
获取脚本对象引用
document.title
获取文档标题
document.domain
获取文档的域名
document.body
获取文档中的 body元素
document.referrer
获取载入当前文档的文档的URL
document.cookie
获取文档中的所有的cookie

选择器（重点）

ID选择器：根据元素的ID属性来获取指定的元素

语法：document.getElementById(“id名”)
- ID选择器只会选择第一个满足条件的元素
- 若Id名不存在，返回值为null
- 若JS代码写在元素之前，返回值为null，因为文档从上到下进行解析
返回值：文档中拥有此ID名的元素对象

举例：（假设有个id值为tmain的div标签）

  var mainDiv  = document.getElementById('main');//获取id值为‘main’的元素
   cosole.log(mainDiv);

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ILxn1iH9-1614761210184)(C:\Users\80596\AppData\Roaming\Typora\typora-user-images\image-20210303162235152.png)]$

2. 标签选择器：根据标签名选择指定的元素

语法：document.getElementsByTagName(‘标签名’);

标签选择器会获取所有满足条件的元素
因为标签名不止一个，注意要在Element后加s

返回值：文档中拥有此标签名的元素集合

举例：（假设有个标签名为div的多个元素）

 var tags = document.getElementsByTagName('div');//获取标签名为‘div’的元素集合
   cosole.log(tags);

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6eDeCg8k-1614761210203)(C:\Users\80596\AppData\Roaming\Typora\typora-user-images\image-20210303163003143.png)]$

3. Name选择器：根据标签中的name属性值选择元素

语法：document.getElementsByName(‘name名’);

返回值：文档中带有指定name值的对象集合

举例：（假设有个name值为task的input标签）

  var names = document.getElementsByName('task');//获取name值为‘task’的元素集合
   console.log(names);

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UNGc9dPc-1614761210207)(C:\Users\80596\AppData\Roaming\Typora\typora-user-images\image-20210303164120136.png)]$

4. 类选择器：根据标签中的class属性名查找元素

语法：document.getElementsByClassName(‘类名’);

如果写了多个类名，用空格分隔，代表查询的元素必须同时具有多个类名

返回值：文档中所有指定类名的元素集合

举例：（假设有个类名为task的p标签）

   var tasks = document.getElementsByClassName('task');//获取类名为‘task’的元素集合
   cosole.log(tasks);

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X28DUd6M-1614761210214)(C:\Users\80596\AppData\Roaming\Typora\typora-user-images\image-20210303163541080.png)]$

5. 使用CSS选择器选中DOM元素

	语法：document.querySelector('CSS选择器');
	 - 永远返回第一个选中的元素
	 - 必须按照CSS的写法来写，例如#main,.task等等
	返回值：根据CSS选择器获取第一个匹配的元素

	语法：document.querySelectorAll('CSS选择器');
	返回值：根据CSS选择器获取所有匹配元素的列表