JavaScript - DOM 方法与属性

在 JavaScript 中，DOM 方法用于对 HTML 元素执行特定操作。DOM 使用逻辑树表示 HTML 文档或网页。在树中，每个分支都以一个节点结束，每个节点都包含对象。DOM 方法允许我们以编程方式访问该树。使用 DOM 方法，您可以更改文档的结构、样式或内容。

例如，您可以使用 DOM 方法通过 id、属性、标签名称、类名等访问 HTML 元素，向文档或 HTML 元素添加事件，向 DOM 添加新的 HTML 元素等。

语法

以下是访问和执行 JavaScript 中 DOM 方法的语法：

window.document.methodName();
OR
document.methodName();

您可以选择使用或不使用“window”对象来访问文档对象的 method。

在这里，我们解释了一些 HTML DOM 方法并举例说明，并在参考中涵盖了其他方法。

JavaScript document.getElementById() 方法

JavaScript 文档对象的 getElementById() 方法是最流行的方法，用于使用 id 访问 HTML 元素。

语法

请按照以下语法使用 document.getElementById() 方法。

const ele = document.getElementById("id");

getElementById() 方法将 HTML 元素的 id 作为参数。

示例

在下面的代码中，“div”元素的 id 为“output”。

在 JavaScript 中，我们使用 document.getElementById() 方法通过其 id 访问 div 元素。

此外，我们使用元素的“innerHTML”属性向“div”元素添加额外的 HTML。

<html>
<body>
   <button onclick = "accessEle()"> Access output and write </button>
   <p id = "output"> </p>
   <script>
      function accessEle() {
         document.getElementById("output").innerHTML = 
			"Hello User! You have just clicked the button!";
      }
   </script>
</body>
</html>

JavaScript document.addEventListener() 方法

addEventListener() 方法用于向文档添加事件。

语法

请按照以下语法使用带有文档的 addEventListener() 方法。

document.addEventListener('mouseover', function () {
// Perform action on the document.
});

addEventListener() 方法将事件名称作为第一个参数，将回调函数作为第二个参数。

示例

在下面的代码中，我们向文档添加了“mouseover”事件。每当您将鼠标悬停在文档上时，它都会将文档正文的背景颜色更改为红色。

<html>
<body>
   <h3>JavaScript – document.addEventListener() Method </h3>
   <p> Hover over here to change background color </p>
   <script>
      document.addEventListener('mouseover', function () {
         document.body.style.backgroundColor = 'red';
      });
   </script>
</body>
</html>

JavaScript document.write() 方法

document.write() 方法将文本或 HTML 添加到文档中。它用作为方法参数传递的 HTML 替换文档的内容。

语法

请按照以下语法使用 document.write() 方法。

document.write(HTML)

您可以用文本或 HTML 替换“HTML”参数。

示例

在下面的代码中，当您单击按钮时，我们将执行 writeText() 函数。

在函数中，我们使用 document.write() 方法向网页添加 HTML。它替换整个网页的 HTML。

<html>
<body>
   <button onclick = "writeText()"> Add HTML </button>
   <script>
      function writeText() {
         document.write("<p>Hello Users, Text is written using the document.write() method. </p>");
      }
   </script>
</body>
</html>

DOM 方法列表

在下表中，我们列出了与 HTML DOM 相关的所有方法：

序号	方法及描述
1.	toString() 用于将 HTML 元素转换为字符串格式。
2.	setAttribute() 此方法允许您为特定元素定义属性。
3.	setAttributeNode() 此方法允许您在特定元素上定义特定属性节点。
4.	scrollIntoView() 它确保可滚动容器网页上的特定元素通过调整滚动位置变得可见。
5.	querySelector() 用于选择并访问文档中与给定 CSS 选择器匹配的第一个 HTML 元素。
6.	querySelectorAll() 此方法允许您选择并访问文档中与给定 CSS 选择器匹配的所有 HTML 元素。
7.	remove() 此方法可以完全从网页中删除元素。
8.	removeAttribute() 此方法用于删除 DOM 结构中 HTML 元素上设置的任何属性。
9.	removeAttributeNode() 它允许您从元素中删除特定的属性节点。
10.	removeChild() 它用于从其父元素中删除选定的子元素。
11.	removeEventListener() 此方法允许您删除之前分配给元素的事件侦听器。
12.	replaceChild() 此方法使我们能够用另一个子元素替换父元素中的一个子元素。
13.	hasAttribute() 它用于检查 HTML 元素中是否存在某个属性。
14.	hasAttributes() 此方法检查 HTML DOM 中的元素是否具有属性。
15.	hasChildNodes() 它用于检查 HTML 元素内部是否有任何子元素。
16.	getAttribute() 它返回属于 HTML 元素的指定属性的值。
17.	getBoundingClientRect() 此方法用于获取元素的大小及其相对于视口的位置。
18.	closest() 此方法返回当前元素（或当前元素本身）与给定 CSS 选择器匹配的最近祖先。如果不存在这样的祖先，则返回 null。
19.	contains() 您可以使用此方法检查 DOM 元素是否在其子树中包含另一个元素。
20.	click() click() 方法在元素上激活鼠标点击。
21.	normalize() 它用于通过删除任何空文本节点来组合 HTML 元素内的相邻文本节点。
22.	isDefaultNamespace() 它用于检查特定的命名空间 URI 是否是文档或元素中元素的默认命名空间。
23.	isEqualNode() 此方法通过比较其属性、类型和子节点来检查两个节点是否相等。
24.	isSameNode() 它检查两个节点引用是否指向 HTML 文档中的同一节点对象。
25.	isSupported() 此方法用于检查 Web 浏览器是否可以支持或处理网页上的特定功能。
26.	insertAdjacentElement() 此方法允许您将新的 HTML 元素精确地插入网页上另一个元素的相对位置。
27.	insertBefore() 此方法允许您在父元素内添加新的子元素，并指定其相对于另一个子元素的位置。
28.	blur() 此方法允许您动态地从 HTML DOM 中的元素中删除焦点。
29.	matches() 此方法检查元素是否与给定的 CSS 选择器匹配。
30.	insertAdjacentHTML() 它帮助您在相对于调用此方法的元素的特定位置插入指定的 HTML 代码。
31.	addEventListener() 它用于向元素注册事件处理程序。
32.	cloneNode() 它复制节点，包括其属性和子节点。
33.	appendChild() 此方法用于将新的子节点（元素）作为指定父节点的最后一个子节点添加。
34.	compareDocumentPosition() 它可以通过比较两个 DOM 元素（节点）的位置来理解文档结构，并返回一个位掩码（数值）。
35.	focus() 此方法将焦点设置到特定的网页元素。
36.	getAttributeNode() 它用于获取属性节点对象。
37.	getBoundingClientRect() 此方法用于获取元素的大小及其相对于视口的位置。
38.	getElementsByClassName() 此方法检索与文档或特定元素中指定的类名匹配的元素的活动 HTMLCollection。
39.	getElementsByTagName() 它检索与指定标签名匹配的元素的活动 HTMLCollection。
40.	insertAdjacentText() 它允许您在相对于调用此方法的元素的特定位置插入文本内容。
41.	namedItem() 它用于获取集合中第一个 ID 或名称与参数中提到的名称匹配的元素。
42.	item() 它返回参数中指定索引位置的 HTMLCollection 中的元素。
43.	entries() 此方法检索一个迭代器，它允许我们遍历对象中的所有键/值对。
44.	forEach() 此方法根据插入顺序，对列表中的每个值对调用参数中提到的回调函数一次。
45.	item() 此方法从参数中指定的索引处检索 NodeList 中的节点。
46.	keys() 此方法检索一个迭代器，它允许我们遍历 NodeList 中包含的所有键。
47.	writeln() 此方法提供将 HTML 或 JavaScript 表达式直接写入文档的功能。它在每个语句后添加一个换行符。
48.	write() 此方法提供将 HTML 或 JavaScript 表达式直接写入文档的功能。
49.	hasFocus() 它用于确定文档或文档中的任何元素是否具有焦点。
50.	renameNode() 它用于重命名节点。
51.	open() 此方法打开文档以进行写入。
52.	normalizeDocument() 此方法规范化整个 HTML 文档。
53.	normalize() 它删除空文本节点，并将父节点中的相邻文本节点连接起来。
54.	adoptNode() 此方法将另一个文档中的节点采用到当前文档中。
55.	addEventListener() 它用于设置一个函数，该函数将在指定事件传递到目标时被调用。
56.	execCommand() 此方法用于对用户选择的可编辑部分执行指定的命令。
57.	createTextNode() 它用于使用指定的文本创建文本节点。
58.	createEvent() 它用于创建事件对象，其事件类型在参数中指定。
59.	createDocumentFragment() 它创建一个新的空文档片段，该片段驻留在内存中。
60.	createComment() 此方法用于使用给定文本创建注释节点。
61.	createAttribute() 它用于使用 JavaScript 为 HTML 元素创建具有特定名称的属性，并返回 Attr 对象。
62.	close() 它关闭输出流。
63.	getElementsByTagName() 它是一个只读方法，用于获取文档中所有具有参数中指定标签名的元素的集合。
64.	getElementsByName() 此方法用于返回具有参数中指定名称属性的元素集合。
65.	getElementsByClassName() 此方法用于获取文档中所有具有指定类名的元素的集合。
66.	getElementById() 它返回给定 ID 的元素。
67.	createElement() 此方法创建由标签名或元素名指定的 HTML 元素。
68.	add() 此方法将参数中指定的令牌添加到 DOMTokenList 中。
69.	contains() 此方法检查列表是否包含指定的令牌，并相应地返回布尔值。
70.	entries() 此方法返回一个迭代器，允许遍历所有键/值对。
71.	forEach() 此方法根据插入顺序，对列表中的每个值对调用参数中提到的回调函数一次。
72.	item() 此方法从参数中指定的索引处返回 DOMTokenList 中的令牌。
73.	keys() 此方法返回一个迭代器，允许您遍历令牌列表中包含的所有键。
74.	remove() 此方法从 DOMTokenList 中删除参数中指定的令牌。
75.	replace() 此方法用参数中指定的新的令牌替换 DomTokenList 中现有的令牌。
76.	supports() 此方法检查参数中指定的令牌是否在 DOMTokenList 中受支持。
77.	toggle() 此方法动态地向元素类属性添加或删除令牌或类。
78.	values() 此方法返回一个迭代器，允许我们遍历令牌列表中包含的所有值。

DOM 属性列表

下表显示了与 HTML DOM 相关的所有属性 -

序号	方法及描述
1.	title 它帮助我们访问和更新存储在元素的 title 属性中的值。
2.	textContent 此属性用于访问和更新 HTML 元素及其所有子元素的文本内容，作为一个字符串。
3.	tagName 它以大写形式提供定义网页上元素的 HTML 标签的名称。
4.	style 使用此属性，您可以获取直接为特定元素设置的 CSS 样式。
5.	tabIndex 它用于访问和更新元素的 tabIndex 属性的值。
6.	scrollLeft 此属性用于访问和更新元素内容水平滚动的距离。
7.	scrollTop 它用于访问和更新元素内容垂直滚动的距离。
8.	scrollWidth 此属性以像素为单位提供元素内容的总水平宽度。
9.	scrollHeight 您可以使用此属性获取元素内容的总垂直高度（以像素为单位）。
10.	id id 属性用于设置和检索元素的 id 属性的值。
11.	innerText 它允许我们检索或更改网页上 HTML 元素内的可见文本内容。
12.	isContentEditable 它用于检查网页元素是否可以由用户直接编辑。
13.	lang lang 属性是 HTML 元素的属性，用于指定语言代码。
14.	lastChild lastChild 属性返回一个节点，该节点指向特定父元素的最后一个子节点。
15.	lastElementChild 它返回一个节点，该节点包含父元素的最后一个子元素。
16.	namespaceURI 元素的 namespaceURI 属性提供分配给元素的命名空间 URI。
17.	nextElementSibling 使用此属性，您可以获取特定元素序列中的下一个节点。
18.	nextSibling 它用于访问 DOM 树中当前节点序列中的下一个节点。
19.	nodeName 此属性用于根据节点内容识别节点的类型和名称。
20.	nodeType nodeType 属性返回一个整数，表示节点的类型。
21.	nodeValue 它用于访问和更新节点的值。
22.	offsetHeight 此属性用于获取网页上该元素的完整可见高度，包括其垂直填充和边框，以像素为单位。
23.	offsetLeft 它返回元素左边界到其最近定位的父元素左边界的距离（以像素为单位）。
24.	offsetParent 它用于查找影响另一个元素定位的最接近的祖先元素。
25.	offsetWidth 元素的 offsetWidth 属性提供网页上该元素的总可见宽度。
26.	outerHTML outerHTML 属性获取元素的整个 HTML 代码。
27.	outerText 此属性可以访问或更新 HTML 元素的文本内容，包括其所有嵌套文本和元素。
28.	ownerDocument 它为您提供包含特定元素的文档节点的对象。
29.	parentElement 它允许您访问 HTML 元素中特定元素的直接父元素。
30.	parentNode 此属性用于访问 HTML 元素中特定节点的直接父节点。
31.	classList 它充当一个活动容器，该容器包含分配给元素的 class 属性的 CSS 类集合。
32.	childNodes 它用于检索元素的所有子节点，包括元素、文本节点和注释。
33.	className 您可以使用此属性访问或修改元素的 class 属性的值。
34.	clientTop 它用于在网页布局中获取准确的元素定位和尺寸计算。
35.	firstElementChild 它提供给定父元素中的第一个子元素。
36.	offsetTop 使用此属性，您可以获取元素顶部边缘与其最近的定位祖先顶部边缘之间的基于像素的垂直距离。
37.	attributes 它返回包含 HTML 元素属性集合的“NameNodeMap”。
38.	accesskey 此属性允许您为网页上的元素分配键盘快捷键。
39.	firstChild 它帮助您访问 HTML DOM 中给定父元素的第一个子节点。
40.	innerHTML 此属性允许我们读取元素的现有 HTML 内容并使用新的 HTML 内容更新它。
41.	dir 它提供访问权限，用于设置和检索 HTML 中任何元素的 dir 属性的值。
42.	contentEditable 您可以使用此属性使 HTML 元素内部的文本内容可编辑。
43.	clientWidth 它返回元素的宽度，包括内边距，但不包括外边距、边框或滚动条宽度。
44.	clientLeft 此属性用于获取元素左侧边框的宽度，不包括左侧内边距或外边距。
45.	clientHeight 它用于获取元素的内部高度，包括内边距，但不包括外边距、边框或滚动条宽度。
46.	children 此属性返回子元素的集合。
47.	childElementCount 它返回指定元素的直接子元素的数量。
48.	src 此属性用于 <img>、<script> 或 <iframe> 等元素来获取或设置源 URL。
49.	href 此属性用于锚 <a> 元素来获取或设置超链接引用。
50.	checked 此属性用于获取或设置复选框或单选按钮的选中状态。
51.	disabled 此属性用于获取或设置输入元素的禁用状态。
52.	length 它返回 HTMLCollection 中元素的数量。
53.	length 此方法返回 NodeList 中项目的数量。
54.	value 此属性用于设置或获取属性的值。
55.	specified 它检查是否指定了提到的属性。
56.	name 它用于获取元素上使用的属性的名称。
57.	isId 此属性确定 HTML 属性是否为“id”属性。
58.	URL 它是一个只读属性，返回文档的完整 URL，包括协议。
59.	title 此属性用于设置或获取文档的标题。
60.	strictErrorChecking 它用于确定文档是否强制执行严格错误检查。
61.	scripts 它是一个只读属性，用于将 HTML 文档中存在的所有脚本元素作为集合返回。
62.	links links 是一个只读属性，它返回所有链接的集合，这些链接对应于具有 href 属性的 a 和 area 元素。
63.	lastModified 此属性返回当前文档上次修改时的日期和时间。
64.	inputEncoding inputEncoding 属性返回一个字符串，该字符串表示文档的字符编码。
65.	implementation 这将返回与当前文档关联的 DOMImplementation 对象。
66.	images 它是一个只读属性，用于将 HTML 文档中存在的所有 img 元素作为集合返回。
67.	head head 属性返回 HTML head 元素。
68.	forms forms 是一个只读属性，用于将 HTML 文档中存在的所有表单元素作为集合返回。
69.	embeds 它是一个只读属性，返回 HTML 文档中存在的所有 embed 元素的集合。
70.	domConfig 此属性已弃用，因此将在所有新浏览器中返回 undefined。
71.	documentURI 此属性用于设置或返回文档的位置。
72.	documentMode documentMode 属性是 IE8 属性，它确定浏览器使用的呈现模式。
73.	documentElement 它将 documentElement 作为 Element 对象返回。
74.	doctype 此属性返回与当前 HTML 文档关联的 DTD（文档类型声明）。
75.	designMode 它帮助我们确定整个文档是否可编辑。
76.	defaultView 它用于返回文档的窗口对象。
77.	cookie HTML DOM document cookie 属性用于创建、读取和删除 cookie。
78.	charset 它返回 HTML 文档的字符编码。
79.	applets 它用于返回文档中所有 applet 元素的列表，但此属性现已弃用。
80.	characterSet 此属性用于获取文档的字符编码。
81.	anchors anchors 属性是一个只读属性，它列出文档中所有具有 name 属性的“a”标签。
82.	baseURI 它用于返回文档的基本统一资源标识符 (URI)。
83.	length 此方法返回令牌列表中的令牌数。
84.	value 此方法返回作为字符串序列化的 DOMTokenList。
85.	domain 它用于获取当前正在执行文档的服务器的域名。

打印页面