当前位置：网站首页>DOM系列之DOM介绍及获取

DOM系列之DOM介绍及获取

2022-07-19 07:34:00 【老__L】

1、什么是DOM

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

2、DOM树

在这里插入图片描述
DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示；
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示；
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示；

3、获取元素

3.1、为什么要获取页面元素？

例如：我们想要操作页面上的某部分（显示/隐藏，动画），需要先获取到该部分对应的元素，再对其进行操作。

3.2、根据ID获取`document.getElementById`

3.2.1、概述

Document的方法 getElementById() 返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

3.2.2、语法

var element = document.getElementById(id);

3.2.3、参数

element是一个 Element 对象。如果当前文档中拥有特定 ID 的元素不存在则返回 null。
id 是大小写敏感的字符串，代表了所要查找的元素的唯一 ID。

3.2.4、返回值

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

3.2.5、示例

<body>
	<div id="time">2019-9-9</div>
	<script> // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 var timer = document.getElementById("time"); console.log(timer); console.log(typeof timer); // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer); </script>
</body>

3.3、根据标签名获取元素`getElementsByTagName`

3.3.1、概述

返回一个包括所有给定标签名称的元素的 HTML 集合 HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的 HTML 集合是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 或 element.getElementsByTagName()。

3.3.2、语法

elements = element.getElementsByTagName(name);
elements = document.getElementsByTagName(name);

3.3.3、参数

elements 是一个由发现的元素出现在树中的顺序构成的动态的 HTML 集合 HTMLCollection，它们的顺序是在子树中出现的顺序。
element 搜索从 element 开始。请注意只有 element 的后代元素会被搜索，不包括元素自己。
name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。考虑到兼容 XHTML，应该使用小写。

3.3.4、示例

<body>
	<ul>
		<li>知否知否，应是等你好久11</li>
		<li>知否知否，应是等你好久22</li>
		<li>知否知否，应是等你好久33</li>
		<li>知否知否，应是等你好久44</li>
		<li>知否知否，应是等你好久55</li>
	</ul>
	<ul id="nav">
		<li>生僻字</li>
		<li>生僻字</li>
		<li>生僻字</li>
		<li>生僻字</li>
		<li>生僻字</li>
	</ul>
	<script> // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的 var lis = document.getElementsByTagName("li"); console.log(lis); console.log(lis[0]); // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式 for (var i = 0; i < lis.length; i++) {
       console.log(lis[i]); } // 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签 var nav = document.getElementById("nav"); // 这个获得nav 元素 var navLis = nav.getElementsByTagName("li"); console.log(navLis); </script>
</body>

3.4、根据类名返回元素对象集合`getElementsByClassName`

3.4.1、概述

返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

3.4.2、语法

var elements = document.getElementsByClassName(names);
var elements = rootElement.getElementsByClassName(names);

3.4.3、参数

elements 是一个实时集合，包含了找到的所有元素。
names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔。
rootElement 是文档中的任一 Element。

getElementsByClassName 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。

3.4.4、示例

// 获取所有 class 为 'test' 的元素：
document.getElementsByClassName("test");
// 获取所有 class 同时包括 'red' 和 'test' 的元素。
document.getElementsByClassName("red test");
// 在 id 为'main'的元素的子节点中，获取所有 class 为'test'的元素
document.getElementById("main").getElementsByClassName("test");

3.5、根据指定选择器返回第一个元素对象`querySelector`

3.5.1、概述

返回文档中与指定选择器或选择器组匹配的第一个 Element 对象。如果找不到匹配项，则返回 null。

3.5.2、语法

element = document.querySelector(selectors);
element = baseElement.querySelector(selectors);

3.5.3、参数

selectors：包含一个或多个要匹配的选择器的 DOM 字符串DOMString。该字符串必须是有效的 CSS 选择器字符串；如果不是，则引发SYNTAX_ERR异常。

3.5.4、返回值

表示文档中与指定的一组 CSS 选择器匹配的第一个元素，一个 Element 对象。如果没有匹配到，则返回 null。

3.5.5、异常

SyntaxError：指定的选择器无效。

3.5.6、示例

var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML = baseElement.querySelector("div span").innerHTML;
var el = document.querySelector(".myclass");

3.6、根据指定选择器返回`querySelectorAll`

3.6.1、概述

返回一个 non-live 的 NodeList，它包含所有元素的非活动节点，该元素来自与其匹配指定的 CSS 选择器组的元素。(基础元素本身不包括，即使它匹配。)

3.6.2、语法

elementList = baseElement.querySelectorAll(selectors);
elementList = document.querySelectorAll(selectors);

3.6.3、参数

elementList会是一个 non-live 的 NodeList 对象。
baseElement 是一个元素对象。
selectors是一组 CSS 选择器。

3.6.4、返回值

一个静态 NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList

3.6.5、异常

SyntaxError：如果指定的选择器不合法，会抛出错误。如$(“##div”)

3.6.6、示例

var allBox = document.querySelectorAll(".box");
console.log(allBox);
var lis = ul.querySelectorAll("li");
console.log(lis);

3.7、返回body元素对象`document.body`

3.7.1、概述

返回当前文档中的<body>元素或者<frameset>元素。

3.7.2、语法

var objRef = document.body;
document.body = objRef;

3.7.3、示例

// 如果 HTML 结构为<body id="oldBodyElement"></body>,则：
alert(document.body.id); // "oldBodyElement"

var aNewBodyElement = document.createElement("body");

aNewBodyElement.id = "newBodyElement";
document.body = aNewBodyElement;
alert(document.body.id); // "newBodyElement"

3.7.4、描述

该属性是可写的，且为该属性赋的值必须是一个<body>元素。

3.8、返回html元素对象`document.documentElement`

3.8.1、概述

document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如 HTML 文档的元素）。

3.8.2、语法

var element = document.documentElement;

3.8.3、示例

const rootElement = document.documentElement;
const firstTier = rootElement.childNodes;

// firstTier 是由根元素的所有子节点组成的一个 NodeList
for (let i = 0; i < firstTier.length; i++) {
    
	// 使用根节点的每个子节点
	// 如 firstTier[i]
}

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

在这里插入图片描述