Javascript_Note.3

最新推荐文章于 2022-12-01 21:45:00 发布

voldem_rt

最新推荐文章于 2022-12-01 21:45:00 发布

阅读量432

点赞数

本文链接：https://blog.csdn.net/voldem/article/details/45112863

版权

Web学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

初识DOM

一、什么是DOM？

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM可对HTML元素进行操作，可用添加、修改、移除CSS等。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。HTML文档可以说由节点构成的集合，三种常见的DOM节点:

(1. 元素节点：下图中<html>、<body>、<p>等都是元素节点，即标签。

(2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

(3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.csdn.net"。

二、DOM基本操作

<!DOCTYPE HTML>
<html>
	<head>
		<title>Javascript_Note.3</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link href="easy.css" rel="stylesheet" type="text/css">
	</head>
	<body>


	<!--~~~~~~~~~~~DOM基本操作~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
		<div>
			<h3>1、通过ID获取元素</h3>
		    <p id="js">JavaScript</p>
				<script type="text/javascript">
				  var mystr= document.getElementById("js");
				  document.write("结果:"+mystr); //输出获取的P标签。 
				</script>
		</div>
	    <!--注意
	          语法：document.getElementgById("id")
			-->

	<!--~~~~~~~~~~~DOM基本操作~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
		<div>
			<h3>2、innerHTML 属性</h3>
			<p id="js">JavaScript</p>
		    <script type="text/javascript">
			  var mychar= document.getElementById("js");
			  document.write("原文本:"+mychar.innerHTML+"<br>"); //输出原h2标签内容

			  mychar.innerHTML="Hello world";
			  document.write("修改后的文本:"+mychar.innerHTML); //输出修改后h2标签内容
			</script>
		    </script>
		</div>
	    <!--注意
	          语法：Object.innerHTML
	          innerHTML 属性用于获取或替换 HTML 元素的内容。
			-->

	<!--~~~~~~~~~~~DOM基本操作~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
		<div>
			<h3>3、改变 HTML 样式</h3>
		    <h2 id="con">I love JavaScript</H2>
			  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
			  <script type="text/javascript">
			    var mychar= document.getElementById("con");
			    mychar.style.color="red";
			    mychar.style.width="300px";
			    mychar.style.backgroundColor="#000";
			  </script>
		</div>
	    <!--注意
	          语法：Object.style.property=new style;
	          Object是获取的元素对象，如通过document.getElementById("id")获取的元素，如：
	          <p id="pcon">Hello World!</p>
				<script>
				   var mychar = document.getElementById("pcon");
				   mychar.style.color="red";
				   mychar.style.fontSize="20";
				   mychar.style.backgroundColor ="blue";
				</script>
			-->	

	<!--~~~~~~~~~~~DOM基本操作~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
		<div>
			<h3>4、显示和隐藏Display属性</h3>
		    <script type="text/javascript"> 
		        function hidetext()  
				{  
				var mychar = document.getElementById("txt");
		        mychar.style.display="none"
		        
				}  
				function showtext()  
				{  
				var mychar = document.getElementById("txt");
		        mychar.style.display="block"
		        
				}
		    </script>
		    <h1>JavaScript</h1>  
		    <p id="txt">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
		    <form>
		       <input type="button" οnclick="hidetext()" value="隐藏内容" /> 
		       <input type="button" οnclick="showtext()" value="显示内容" /> 
		    </form>
		</div>
	    <!--注意
	          注释，笔记
			-->		
	</body>
</html>