JS-DOM

最新推荐文章于 2023-03-31 10:17:26 发布

我是一个被it搞的帅哥

最新推荐文章于 2023-03-31 10:17:26 发布

阅读量85

点赞数

文章标签： java

本文链接：https://blog.csdn.net/m0_68804273/article/details/124158833

版权

本文介绍了JavaScript中的DOM概念，包括DOM树和DOM标准接口，详细阐述了Core DOM的操作，如查看、创建、增加和删除节点的方法。此外，还探讨了HTML DOM的特有对象和操作，特别是表格相关对象的属性和方法，以及如何通过DOM操作实现订单的增删改。

摘要由CSDN通过智能技术生成

1.DOM概念

1.1什么是DOM

对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。
对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。
在这里插入图片描述

1.2什么是DOM树

HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，这些dom节点构成了一个树形结构
在这里插入图片描述

W3C规定的三类DOM标准接口
Core DOM（核心DOM），适用于各种结构化文档
XML DOM 专用于XML文档
HTML DOM，专用于HTML文档
选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、-JavaScript、C#等

2.Core DOM的操作

2.1查看节点

2.1.1 访问指定节点的方法

getElementById( ) ：返回一个节点对象
getElementsByName( )：返回多个（节点数组）
getElementsByTagName( ) ：返回多个（节点数组）

2.1.2 查看/修改属性节点

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
根据层次关系查找节点
parentNode
firstChild
lastChild

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取属性</title>
	</head>
	<body>
		<input type="text" name="na" id="da" class="ca" />
		<br>
		<hr>
		<button type="button" onclick="fa()">获取input标签的属性值</button>
		<button type="button" onclick="fb()">修改input标签的属性值</button>
		<hr>
		<div id="">
			<!-- 要获取 span的父标签 -->
			<span id="da">1</span>
			<span id="da">1</span>
			<span id="da">1</span>
			<span id="da">1</span>
			<span id="da">1</span>
		</div>
	</body>
	<script type="text/javascript">
		function fa() {
   
			//　获取 input标签
			var da = document.getElementById("da");
			// 获取 id属性值
			var id = da.getAttribute("id");
			// 获取 name属性值
			var name = da.getAttribute("name");
			// 获取 class属性值
			var ca = da.getAttribute("class");
			// 获取 value属性值
			var value = da.value;
			// 获取 type属性值
			var tp = da.getAttribute("type");

			console.info("id = " + id)
			console.info("name = " + name)
			console.info("class = " + ca)
			console.info("value = " + value)
			console.info("type = " + tp)
		}

		function fb() {
   
			//　获取 input标签
			var da = document.getElementById("da");
			console.info("da = " + da)
			var sb = document.getElementById("sb");
			console.info("sb = " + sb)
			// 修改id type name class属性
			da.setAttribute("id", "sb");
			da.setAttribute("type", "button");
			da.setAttribute("name", "sn");
			da.setAttribute("class