飞火在线文章-HTML DOM 节点|FFY在线文章-HTML DOM 节点

HTML DOM 节点学习笔记

HTML DOM (HTML Document Object Model) 是指 HTML 文档的对象模型，它定义了访问和操作 HTML 文档的标准方法。

HTML 节点

在 HTML DOM 中，HTML 文档中的每个部分都是一个节点：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
HTML 元素中的文本是文本节点
每个 HTML 属性是一个属性节点
注释是注释节点

下面是一些常见的 HTML 节点：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>HTML DOM 节点学习笔记</title>
</head>
<body>
	<h1>HTML DOM</h1>
	<p>HTML DOM （HTML Document Object Model）是指 HTML 文档的对象模型，它定义了访问和操作 HTML 文档的标准方法。</p>
	<ul>
		<li>文档节点</li>
		<li>元素节点</li>
		<li>文本节点</li>
		<li>属性节点</li>
		<li>注释节点</li>
	</ul>
</body>
</html>

获取 HTML 节点

在 HTML DOM 中，可以使用 JavaScript 来获取 HTML 元素。

以下是一些常用的获取 HTML 元素的方法：

通过 ID 获取元素

javascriptCopy Code
var elem = document.getElementById("myId");

通过标签名获取元素

javascriptCopy Code
var elems = document.getElementsByTagName("p");
for (var i=0; i<elems.length; i++) {
  console.log(elems[i].innerHTML);
}

通过类名获取元素

javascriptCopy Code
var elems = document.getElementsByClassName("myClass");
for (var i=0; i<elems.length; i++) {
  console.log(elems[i].innerHTML);
}

通过选择器获取元素

javascriptCopy Code
var elem = document.querySelector("p.intro");
console.log(elem.innerHTML);

var elems = document.querySelectorAll("p");
for (var i=0; i<elems.length; i++) {
  console.log(elems[i].innerHTML);
}

改变 HTML 节点

可以使用 JavaScript 来改变 HTML 元素。

以下是一些常用的改变 HTML 元素的方法：

改变 HTML 内容

javascriptCopy Code
var elem = document.getElementById("myId");
elem.innerHTML = "新的内容";

改变 HTML 属性

javascriptCopy Code
var elem = document.getElementById("myImg");
elem.src = "newImg.jpg";

改变 CSS 样式

javascriptCopy Code
var elem = document.getElementById("myId");
elem.style.color = "red";

创建 HTML 节点

可以使用 JavaScript 来创建 HTML 元素。

以下是一些常用的创建 HTML 元素的方法：

创建元素节点

javascriptCopy Code
var elem = document.createElement("div");
document.body.appendChild(elem);

创建文本节点

javascriptCopy Code
var text = document.createTextNode("这是一个文本节点");
var elem = document.getElementById("myId");
elem.appendChild(text);

创建属性节点

javascriptCopy Code
var elem = document.getElementById("myId");
elem.setAttribute("class", "myClass");

删除 HTML 节点

可以使用 JavaScript 来删除 HTML 元素。

以下是一些常用的删除 HTML 元素的方法：

删除子节点

javascriptCopy Code
var parent = document.getElementById("myId");
var child = document.getElementById("childId");
parent.removeChild(child);

删除自身

javascriptCopy Code
var elem = document.getElementById("myId");
elem.parentNode.removeChild(elem);

以上就是 HTML DOM 节点学习笔记中涉及到的内容和实例。