html_DOM之创建添加节点

最新推荐文章于 2024-04-10 10:59:25 发布

伊人冰

最新推荐文章于 2024-04-10 10:59:25 发布

阅读量1.2k

点赞数

分类专栏： WEB

WEB 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html dom概念：定义了访问和操作 HTML 文档的标准方法。

HTML DOM 是：HTML 的标准对象模型 html的标准编程接口 w3c标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM 以树结构表达 HTML 文档。

DOM HTML tree

DOM( Document Object Model)概念：

DOM 是 W3C（万维网联盟）的标准。

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

节点：

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

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

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

DOM HTML tree

节点树中的节点彼此拥有层级关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

<html>
  <head>
    <title>DOM Tutorial</title>
  </head>
  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML DOM对象学习</title>
	<script type="text/javascript">
		window.οnlοad=function(){
			//var para=document.createElement("p");
			//var node=document.createTextNode("这是一个新段落。");
			//para.appendChild(node); //<p>这是一个新段落。</p>
			//var element=document.getElementById("div1");
			//element.appendChild(para);
			
			var hn = document.createElement("h1");  //创建一个元素节点
			var ht = document.createTextNode("新节点h1内容"); //创建一个文本节点
			hn.appendChild(ht);  //增加文本节点'ht'到元素节点'hn'上
			var element=document.getElementById("p1"); //获取id为'p1'的元素节点
			element.appendChild(hn);  //添加元素节点'hn'到节点'element'上
		}
	</script>
</head>
<body>
	<div id="div1">
		<p id="p1">
			 这是一个段落。
		     <!--<h1>新节点h1内容</h1>-->
		</p>
		<p id="p2">这是另一个段落。</p>
	</div>
	
</body>
</html>

伊人冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html_DOM之创建添加节点

html dom概念：定义了访问和操作 HTML 文档的标准方法。HTML DOM 是：HTML 的标准对象模型 html的标准编程接口 w3c标准HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。DOM 以树结构表达 HTML 文
复制链接

扫一扫