❮ ❯

JavaScript - DOM 方法和属性

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

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

语法

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

window.document.methodName();
或
document.methodName();

您可以使用"window"对象来访问 document 对象的方法，也可以不使用。

这里，我们通过示例讲解了一些 HTML DOM 方法，并在参考资料中介绍了其他方法。

JavaScript document.getElementById() 方法

JavaScript document 对象的 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 () {
// 对文档执行操作。
});

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 相关的方法 -

Sr.No	方法 &说明
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() 此方法用于返回具有参数中指定的 name 属性的元素集合。
65.	getElementsByClassName() 此方法用于获取文档中所有指定类名的元素集合。
66.	getElementById() 返回指定ID的元素。
67.	createElement() 此方法通过标签名称或元素名称创建一个指定的 HTML 元素。
68.	add() 此方法将参数中指定的一个或多个 token 添加到 DOMTokenList 中。
69.	contains() 此方法检查列表是否包含指定的 token，并相应地返回布尔值。
70.	entries() 此方法返回一个迭代器，用于遍历所有键/值对。
71.	forEach() 此方法按插入顺序对列表中的每个值对调用一次参数中指定的回调函数。
72.	item() 此方法从 DOMTokenList 中返回一个 token，该 token 由 DOMTokenList 中指定的索引指定。参数。
73.	keys() 此方法返回一个迭代器，允许您遍历令牌列表中包含的所有键。
74.	remove() 此方法从 DOMTokenList 中删除参数中指定的一个或多个令牌。
75.	replace() 此方法将 DomTokenList 中的现有 token 替换为参数中指定的新 token。
76.	supports() 此方法检查 DOMTokenList 是否支持参数中指定的 token。
77.	toggle() 此方法动态地从元素的 class 属性中添加或删除 token 或 class。
78.	values() 此方法返回一个迭代器，允许我们遍历标记列表中包含的所有值。

DOM 属性列表

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

Sr.No	方法 &说明
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 返回元素的宽度，包括内边距 (padding)，但不包括外边距 (margin)、边框 (border) 或滚动条宽度。
44.	clientLeft 此属性用于获取元素左边框的宽度，不包括左内边距 (padding) 和外边距 (margin)。
45.	clientHeight 此属性用于获取元素的内部高度，包括内边距 (padding)，但不包括外边距、边框 (border) 或滚动条宽度。
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 文档中存在的所有嵌入元素作为集合返回。
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 此属性用于返回文档中所有小程序元素的列表，但此属性现已弃用。
80.	characterSet 此属性用于获取文档的字符编码。
81.	anchors anchors 属性是一个只读属性，它列出了所有带有 name 属性的"a"标签。文档。
82.	baseURI 用于返回文档的基本统一资源标识符 (URI)。
83.	length 此方法返回令牌列表中令牌的数量。
84.	value 此方法返回序列化为字符串的 DOMTokenList。
85.	domain 用于获取当前正在执行文档的服务器的域名。

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流

JavaScript 函数

JavaScript 对象

面向对象的 JavaScript

JavaScript 版本

JavaScript 异步

JavaScript Cookies

JavaScript 浏览器 BOM

JavaScript Web APIs

JavaScript 事件

JavaScript 错误处理

JavaScript 重要关键字

JavaScript HTML DOM

JavaScript 高级章节

JavaScript 杂项

JavaScript 实用资源

JavaScript - DOM 方法和属性

语法

JavaScript document.getElementById() 方法

语法

示例

JavaScript document.addEventListener() 方法

语法

示例

JavaScript document.write() 方法

语法

示例

DOM 方法列表

DOM 属性列表

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！