前端开发_JavaScript_DOM基本操作

最新推荐文章于 2024-07-12 09:36:48 发布

魔笛手7

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量382

点赞数 1

分类专栏：前端文章标签： javascript 前端 html DOM dom操作

本文链接：https://blog.csdn.net/u013185175/article/details/122338699

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

DOM

1.引入

在之前的学习中，我们学习了很多的对象，下面我们一起来学习JavaScript中一个重要的知识点DOM。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

2.DOM概述

DOM 是一项 W3C (World Wide Web Consortium) 标准。DOM 定义了访问文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
(1)、Core DOM - 所有文档类型的标准模型
(2)、XML DOM - XML 文档的标准模型
(3)、HTML DOM - HTML 文档的标准模型

下面我们将主要讲解HTML DOM的相关内容:

DOM(Document Object Model)即文档对象模型，为HTML文档提供了一种结构化的表示方法，通过该方法可以改变文档的内容和展示形式。在实际的运用中，DOM就像是一座桥梁，通过它可以实现跨平台、跨语言的标准访问。我们在就行页面操作的时候可以使用document对象提供的四种常用方式(id属性、name属性、class属性和标签名称)就行页面元素的查找，然后通过document对象改变HTML的输出流、内容样式以及属性。使用DOM中的层级关系实现对页面中节点的就行操作。

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。下面我们先了解一下HTML DOM模型被结构化为对象树：

我们发现Dom实质是一棵倒置的树，把我们整个页面中的元素作为节点放置在树上，那么学习HTML DOM实质就是学习如何操作这一些节点。

3.Web API 接口

在使用 JavaScript 编写 Web 代码时，有许多 Web API 可供调用。上面我们讲述操作DOM元素的时候，需要使用到一些Web API中定义的接口，我们学习操作DOM元素其实就是学习有关于DOM的这一些接口，下面我们着重看一下如何使用这一些接口。

(1).Document接口

①:概述

Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。DOM 树包含了像 <body> 、<table> 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。

②:常用属性

document.documentURI：Document 接口的属性 documentURI 以字符串的形式返回文档的位置（location）。

代码实现:

<script type="text/javascript">
//document相关属性测试
console.log("----" + document.documentURI);
</script>

Document.forms:forms 返回当前文档中的 <form>元素的一个集合(一个 HTMLCollection)。
document.images: Document 接口的只读属性images返回当前文档中所有 image 元素的集合.

代码实现:

<body>
		<form action="#" method="post" id="baseFrom1">
			<!--
			//put your code in here
			-->
			<img src="image/橘子.jpg" >
		</form>
		
		<form action="#" method="post" id="baseFrom2">
			<!--
			//put your code in here
			-->
			<img src="image/葡萄.jpg" >
			<input type="text"  id="uname" value="test" />
			
		</form>
		<script type="text/javascript">
		  //document相关属性测试
		  var selectForm = document.forms;
		  var selectFormElement = document.forms[1].elements["uname"];
		  console.log("获取基本的表单:" + selectForm);
		  console.log("获取基本的表单元素:" + selectFormElement);
		  
		  //获取image相关的属性
		  var imageCollection = document.images;
		  firstImage = imageCollection.item(0);
		  console.log("获取当个图片信息:" + firstImage);
		  //遍历
		  var ilist = document.images;
		  for(var i = 0; i < ilist.length; i++) {
		      console.log("获取图片相关的内容:" + ilist[i].src);
		  }
		</script>
</body>

Document.links：links 属性返回一个文档中所有具有 href 属性值的 <area> 元素与 <a> 元素的集合。

代码实现:

<body>
   <p>
	 <a href="link#1">链接1</a><br>
	 <a href="link#2">链接2</a><br>
	 <a href="link#3">链接3</a>
   </p>
   <script type="text/javascript">
	 //document相关属性测试
	 var links = document.links;
	 for (var i = 0; i < links.length; i++) {
		console.log("获取相关的链接:" + links[i].href);
	 }
   </script>
</body>

Document.title：获取或设置文档的标题。

代码实现:

<head>
   <meta charset="utf-8">
   <title>学习javaSCript的过程</title>
</head>
<body>
   <script type="text/javascript">
   //使用document对象获取标题
   var getTitleInfo = document.title;
   console.log("获取到的标题名称是:" + getTitleInfo);
			
   //设置相关的标题内容
   document.title = "这是我设置的页面标题!";
   var getTitle = document.title;
   console.log("获取设置的标题信息:" + getTitle);
   </script>
</body>

②:常用方法

类型1:专门用于获取Document对象文档节点的方法,这里需要重点掌握三个方法:按照id获取、按照name属性获取、按照class属性获取。

document.getElementById:Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

Document.getElementsByName():根据给定的name (en-US) 返回一个在 (X)HTML document的节点列表集合。

Document.getElementsByClassName():返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

Document.getElementsByTagName():返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 。

代码实现:

<body>
<form action="#" method="post" id="TestForm">
	 <p>用户名:<input type="text" id="uname" value="张三" /></p>
	 <p>密&nbsp;&nbsp; 码:<input type="text" name="pwd" value="123"></p>
	 <p>电&nbsp;&nbsp; 话:<input type="text" class="userPhone" value="14787831334" /></p>
	 <p>
		 <input type="submit" id="" name="" />&nbsp;&nbsp;&nbsp;&nbsp;
		 <input type="reset" value="重置" />
	 </p>
</form>
	<script type="text/javascript">
			//document获取页面元素节点
			var getUnameById = document.getElementById("uname").value;
			console.log("按照id获取到的节点是:" + getUnameById);

			var getPwdByName = document.getElementsByName("pwd");
			console.log("按照name获取到的节点是:" + getPwdByName);

			var getPhoneByClassName = document.getElementsByClassName("userPhone");
			console.log("按照样式名称获取节点的是:" + getPhoneByClassName);

			var getInfoByTagName = document.getElementsByTagName("input");
			console.log("按照目标节点获取相关的信息:" + getInfoByTagName);
	</script>
</body>

类型2:专门用于设置或者是添加Document对象文档节点的方法。下面我们讲述相关的方法内容:

document.write/document.writeln

document.writeln:向文档中写入一串文本，并紧跟着一个换行符。

Document.write() 方法将一个文本字符串写入一个由 document.open() 打开的文档流（document stream）

代码实习:

<script type="text/javascript">
   //使用write()方法向文档写入内容
   document.write("helloWorld!");
   document.write("你好，世界!");
   document.writeln("换行测试!");
   document.writeln("this place show your code");
</script>

document.getElementById("id").innerHTML = "新的内容":通过id获取更改页面中指定元素的内容。

代码实现:

<body>
   <p id="article">这是一段文字</p>
		
   <script type="text/javascript">
   //使用write()方法向文档写入内容
   document.getElementById("article").innerHTML = "需要替换的文字写在这里";
   </script>
</body>

document.getElementById("id").attribute = "新的属性值":通过id获取页面指定元素，然后设置其相关的属性值。

代码实现:

   <head>
		<meta charset="utf-8">
		<title>document对象</title>
		<style type="text/css">
			.style1{
				font-size: 28px;
				font-family: "宋体";
				color: #ff0000;
			}
			
			
		</style>
	</head>
	<body>
		<p id="article" class="style1">这是一段文字</p>
		
		<script type="text/javascript">
			//使用write()方法向文档写入内容
			var getP = document.getElementById("article");
			getP.style.fontSize = "50px";
		</script>
	</body>

魔笛手7

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_JavaScript_DOM基本操作

DOM1.引入在之前的学习中，我们学习了很多的对象，下面我们一起来学习JavaScript中一个重要的知识点DOM。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。2.DOM概述 DOM 是一项 W3C (World Wide Web Consortium) 标准。DOM 定义了访问文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。” W3C DOM 标准被...
复制链接

扫一扫