文章/答案/技术大牛

发布

社区首页 >专栏 >新手如何在 ES6 如何操作HTML DOM元素？

新手如何在 ES6 如何操作HTML DOM元素？

用户1418987

发布于 2023-10-21 07:56:00

40700

代码可运行

文章被收录于专栏：codercoder

运行总次数：0

代码可运行

ES6 HTML DOM

DOM代表文档对象**模型。HTML 页面在浏览器中呈现。浏览器将从网络服务器下载的页面中包含的所有元素组装到其内存中。一旦完成，浏览器就会在浏览器窗口中显示这些对象，一旦完成，浏览器就无法再识别单个 HTML 元素。支持 JavaScript 的浏览器能够在 HTML 页面在浏览器中呈现之后识别该页面中的各个对象，因为支持 JavaScript 的浏览器可以识别并使用 DOM。因此，允许随意控制对象的功能。

DOM 的优点：

有助于创建交互式网页，因为它允许浏览器识别单个 HTML 对象，即使它们在浏览器窗口中呈现后也是如此。
允许随意控制对象的功能
帮助更新或修改数据

结构

**导航器：**浏览器。例如：Netscape Navigator，Internet Explorer，Opera，Mosaic等。
窗口： 浏览器的窗口。
文档： 文档显示在浏览器窗口中。它还有自己的多个元素。我们这里只讨论表单。
表单： DOM 层次结构继续向下包含表单的各个元素

DOM 类别： JavaScript 支持三种 DOM 类型，但我们仅讨论适用于 ES6 的类型。

**Legacy DOM：**这是早期版本的 JavaScript 使用的模型。该模型提供只读属性，例如标题、URL 等。它还提供有关整个文档的 LastModified 信息。该模型有很多方法可用于设置和获取文档属性值。

旧版 DOM 的文档属性：

alinkColor：此属性定义激活链接的颜色。

document.alinkColor

anchors[]: 它是每个锚点对象的数组，一个对应于文档中出现的每个锚点。

document.anchors[0],document.anchors[1],...

applets[]: 它是 applet 对象的数组，每个 applet 对应一个出现在文档中的 applet。

document.applets[0],document.applets[1],..

bgColor: 该属性定义文档的背景颜色。

document.bgColor

Cookie: 此属性定义具有特殊行为的值属性，允许设置与要查询的文档关联的 cookie。

document.cookie

Domain: 此属性定义文档所属的域，已用于安全目的。

document.domain

embeds[]: plugins[] 的同义词。它是表示文档中嵌入的数据的对象数组

document.embeds[0],document.embeds[1],...

fgColor: 此属性定义文档的默认文本颜色。

document.fgColor

forms[]: 它是表单对象的数组，每个对象对应一个表单对象，如表单中所示。

document.forms[0],document.forms[1],...

images[]: 它是表单对象的数组，每个元素对应表单中出现的带有

document.images[0[,document.images[1],...

lastModified: 此属性定义最近更新的日期。

document.lastModified

linkColor: 此属性定义未访问链接的颜色，它与vlinkColor相反。

document.linkColor

links[]: 文档链接数组。

document.links[0],document.links[1],...

Location: 该属性保存文档的 URL。

document.location

plugins[]: 此属性是 embeds[] 的同义词。

document.plugins[0],document.plugins[1],...

Referrer: 包含文档 URL（如果与任何文档链接）的字符串。

document.referrer

Title: 标签的内容。

<!DOCTYPE html>
<html>

<head>
	<title>Legacy DOM example</title>
	<script type="text/javascript">
		function func1() {
			var a = document.title;
			alert("Document title: " + a);

		}

		function func2() {
			var b = document.URL;
			var c = document.lastModified;
			var d = document.location;

			document.write("Document URL: " + b);
			document.write("Document last modified: " + c);
			document.write("Document location: " + d);

		}

		function func3() {
			var n = document.forms[1];
			document.write("Second form elements: " + n);
		}
	</script>
</head>

<body>
	<center>
		<h1 style="color: green">GeeksforGeeks</h1>
		<b>Document to try Legacy DOM elements.</b>
		<form name="form1">
<p>Section 1:</p>
			<button name="b1" id="1"
					value="title" onclick="func1()">
			Title
			</button>
			<button name="b2" id="2"
					value="INFO" onclick="func2()">
			URL
			</button>
		</form>
		<br>

		<form name="form2">
			Section 2:
			<br>
			<br>
			<button name="bt1" id="1"
					value="submit" onclick="func3()">
			Elements
			</button>
		</form>
</center>
</body>

</html>

输出:

W3C DOM: 该 DOM 遵循万维网联盟标准，其中规定：

“文档对象模型是一个平台和语言中立的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。”*

该模型主要关注语言中立性，以便使脚本编写和样式化文档变得容易。

W3C DOM 中的文档属性：

body: 标签的内容。

document.body

defaultView: 表示显示文档的窗口。

document.defaultView

documentElement: 对文档标签的引用。

document.documentElement

implementation: 表示 DOMImplementation 对象，该对象表示创建此文档的实现。

document.implementation

W3C DOM 中的文档方法：

createAttribute(name_of_attr): 返回一个新创建的具有指定名称的 Attr 节点。

document.createAttribute(name_of_attr)

createComment(text): 创建并返回一个包含指定文本的新注释节点。

document.createComment(some_text)

createDocumentFragment(): 创建并返回一个空的 DocumentFragment 节点。

document.createDocumentFragment()

createElement(tagname_of_new_ele): 创建并返回具有指定标记名的新 Element 节点。

document.createElement(tagname_of_new_ele)

createTextNode(text): 创建并返回一个包含指定文本的新文本节点。

document.createTextNode(text)

getElementById(Id): 从具有提到的 Id 的元素的文档中返回值。

document.getElementById(Id)

getElementsByName(name): 从文档中返回具有指定名称的节点数组。

document.getElementsByName(name)

getElementsByTagName(tagname): 返回文档中具有指定标记名的所有元素节点的数组。

document.getElementsByTagName(tagname)

importNode(importedNode, deep): 从适合插入到此文档中的其他文档创建并返回节点的副本。如果 deep 参数为真，它也会递归地复制该节点的子节点。

document.importNode(importedNode, deep)

示例:

<!DOCTYPE html>
<html>

<head>
	<title>W3c example</title>
	<script type="text/javascript">
		function hello() {
			var n = document.getElementById('2').value;
			document.write("Hello " + n);

			var a = document.body;
			document.write("</br>Document body:" + a);

			var b = document.defaultView;
			document.write("</br>Document default view: " + b);

		}
	</script>
</head>

<body>
	<center>

		<h1 style="color: green">
	hello demo!
		</h1>
<p>
		Hello from GeeksforGeeks, this is 
		an example representation.
		</p>
		<form name="myform">
			<b>Name:</b>
			<input type="text" name="name" id="2">
			<input type="submit" name="submit"
				value="submit" onclick="hello()">

		</form>
	</center>
</body>
</html>

输出:

3. IE4 DOM：该DOM是在Internet Explorer版本4中引入的。

后续版本进行了扩展并继续包含 W3C DOM 的功能。

IE4 DOM 中的文档属性：

activeElement：指当前活动的输入元素。

document.activeElement

all[]: 文档中所有元素对象的可索引数组。

document.all[]
  
 此函数用于检查网页中是否存在特定元素，但现在已被视为已弃用，
 因为它仅适用于 Internet Explorer，并且在其他浏览器中不受支持。

charset: 文档的字符集。

document.charset

children[]: 包含文档直接子级 HTML 元素的数组。

document.children[]

defaultCharset: 文档的默认字符集。

document.defaultCharset

expando: 当此属性设置为 false 时，它会阻止客户端对象扩展。

document.expando

parentWindow: 包含窗口的文档。

document.parentWindow

readyState: 指定文档的加载状态。

document.readyState

uninitialized: 文档尚未开始加载。

document.uninitialized

loading: 文档正在加载

document.loading

interactive: 文档已加载到足以供用户交互。

document.interactive

complete: 文档已加载。

document.complete

IE4 DOM 中的文档方法：

elementFromPoint(x,y): 返回位于指定点的元素。

document.elementFromPoint(x,y)

Example:

<!DOCTYPE html>
<html>

<head>
	<title>IE4 DOM example</title>
	<script type="text/javascript">
		function func1() {
			var a = document.all["greetings"];
			alert("Hey, " + a.innerHTML);

		}

		function func2() {
			var b = document.activeElement;
			document.write("Active element: " + b);

		}
	</script>
</head>

<body>
	<center>
		<h1 style="color: green">
		demo
		</h1>
	
		<h4 id="greetings">
		Hello from GeeksforGeeks, this is 
		an example representation.
		</h4>
	
		<form name="myform">
			<input type="submit" name="b1"
				value="Greet" onclick="func1()">
			<input type="text" name="text1">
			<input type="submit" name="b2"
				onclick="func2()">
		</form>
	</center>

</body>

</html>