JavaScript中常见的HTML DOM操作

最新推荐文章于 2024-07-26 11:41:15 发布

梦蓝樱飞

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量580

点赞数 2

分类专栏： JavaScript 文章标签： w3c javascript html dom 文档

本文链接：https://blog.csdn.net/menglanyingfei/article/details/52971043

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM是文档对象模型(Document Object Model)的缩写，DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

以下是一段HTML的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML DOM</title>
	</head>
	<body>		
		<h1>DOM的结构</h1>		
		<p><a href="href">链接</a></p>
	</body>		
</html>

同时，DOM解析HTML文档在内存中是以树状形式显示的。

* 元素对象
   * 获取元素对象
       * getAttribute("属性名称");                      获取属性的值
       * setAttribute("属性名称","属性的值");   设置或者修改属性的值
       * removeAttribute("属性名称");          删除属性
   * 获取元素下的所有子节点（*****）
       * ul.getElementsByTagName("li");

* 方法
   巧用this对象
   * hasChildNodes()       检查是否包含子节点
   * hasAttributes()           检查是否包含属性

   * appendChild(node)                父节点调用，在末尾添加子节点
   * insertBefore(new,old)           父节点调用，在指定节点之前添加子节点
   * replaceChild(new,old)           父节点调用，替换节点
   * removeChild(node)               父节点调用, 删除节点

   * cloneNode(boolean)               不是父节点调用,复制节点
       * boolean：      如果是true，复制子节点
                                 如果是false，不复制子节点，默认是false

* Document：代表整个文档
   * 方法：
       document.getElementById("id的值");
       通过元素的id的属性获取元素（标签）对象
       getElementsByName("name属性值");
       通过名称获取元素对象的集合（返回数组）
       getElementsByTagName("标签名称");
       通过标签名称获取元素对象的集合（返回数组）

       * write("文本的内容（html的标签）")       把文本内容写到浏览器上
       * createElement("元素名称");                   创建元素对象
       * createTextNode("文本内容")                    创建文本对象
       * appendChild("子节点")                       添加子节点

在末尾添加子节点示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
		</ul>
	</body>
		<script type="text/javascript">
			//创建元素对象
			var li = document.createElement("li");
			//创建文本的对象
			var text = document.createTextNode("深圳");
			//把文本对象添加到元素对象下面，作为子节点
			li.appendChild(text);
			//获取ul
			var ul = document.getElementsByTagName("ul")[0];
			//把元素对象添加到ul下面，作为子节点
			ul.appendChild(li);		
		</script>
</html>

以及在指定节点之前添加子节点：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<ul id="ul">
				<li>Java</li>
				<li id="C">C++</li>
				<li>PHP</li>
			</ul>	
			<ul>
				<li id="py">Python</li>
			</ul>
			<button οnclick="run()">
				我是按钮
			</button>
	</body>
		<script type="text/javascript">
		//* insertBefore(new,old)		在指定节点之前添加子节点
		function run() {
			var ul = document.getElementById("ul");
			var C = document.getElementById("C");
			var py = document.getElementById("py");
			
			ul.insertBefore(py, C);
			
			alert("Test is successful！");
		}	
		</script>
</html>

梦蓝樱飞

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中常见的HTML DOM操作

DOM是文档对象模型(Document Object Model)的缩写，DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”在末尾添加子节点示例：以及在指定节点之前添加子节点：
复制链接

扫一扫

专栏目录