JavaScript HTML DOM

最新推荐文章于 2022-11-27 10:56:31 发布

w_qianqian

最新推荐文章于 2022-11-27 10:56:31 发布

阅读量222

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/w_mengying/article/details/86656130

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML DOM ——文档对象模型（Document Object Model）

文档对象模型是文档在被加载时，由浏览器创建的。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
能够改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式以及对页面中的所有事件做出反应。
通常，通过 JavaScript，在操作 HTML 元素首先能找到该元素。有三种方法来做这件事：通过 id 、标签名、类名找到 HTML 元素。

使用JavaScript改变HTML 元素的内容

1.使用 (document.write())
使用document.write(Date());改变HTML输出流，这个语句可以在原来页面的基础上添加一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 使用JavaScript改变HTML 元素的内容 (innerHTML)</title>
	</head>
	
	<body>
		<script>
		document.write(Date()); //文档流中将会显示当前的时间
							    //Sat Jan 26 2019 12:38:10 GMT+0800 (中国标准时间)
		</script>
	</body>
</html>

2.使用innerHTML改变THML内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用innerHTML改变THML内容</title>
	</head>
	<body>
		<p id="p1">Hello World!</p>
		<script>
			document.getElementById("p1").innerHTML="新文本!";
		</script>
		<p>以上段落通过JavaScript修改文本。</p>
	</body>
</html>

3.使用特定语法，改变HTML的属性
先获取元素，再修改属性
document.getElementById(id).attribute=新属性值
注：一定是Id不能换成别的！！！！！

使用JavaScript改变HTML 元素的样式 ——改变CSS样式

document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 使用JavaScript改变HTML 元素的样式 </title>
	</head>
	<body>
		<p id="p1">Hello World!</p>
		<p id="p2">Hello World!</p>
		<script>
			document.getElementById("p2").style.color="orange";
			document.getElementById("p2").style.fontFamily="Arial";
			document.getElementById("p2").style.fontSize="larger";
		</script>
		<p>以上段落通过脚本修改。</p>
	</body>
</html>

使用JavaScript改变对 HTML DOM 事件做出反应

表单提交事件

1.JavaScript表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function validateForm() {
			    var x = document.forms["myForm"]["fname"].value;
			    if (x == null || x == "") {
			        alert("需要输入名字。");
			        return false;
			    }
			}
		</script>
	</head>
	<body>
		<form name="myForm" action="h.php"
		onsubmit="return validateForm()" method="post"> //action="h.php"的意思是提交数据到h.php页面，action去掉并不影响页面检测效果
			名字: <input type="text" name="fname">
			<input type="submit" value="提交">
		</form>
	</body>
</html>

2.HTML表单自动验证使用——关键字required

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="demo_form.php" method="post">
		  <input type="text" name="fname" required="required">
		  <input type="submit" value="提交">
		</form>
		<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>
	</body>
</html>

几个特殊事件

（1）onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。另外，onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onload 和 onunload 事件处理cookie</title>
	</head>
	<body "checkCookies()">
		<script>
			function checkCookies() {
				if (navigator.cookieEnabled==true) {
					alert("Cookies 可用")
				} else {
					alert("Cookies 不可用")
				}
			}
		</script>
		<p>弹窗-提示浏览器 cookie 是否可用。</p>
	</body>
</html>

（2）onmouseover 和 onmouseout 事件、onmousedown、onmouseup 以及 onclick 事件。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onmouseover 和 onmouseout 事件</title>
	</head>
	<body>
	<div onmouseover="mOver(this)"  onmouseout="mOut(this)"  style="background-color:#ff0000;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
		<script>
			function mOver(obj){
				obj.innerHTML="Thank You"
			}
			function mOut(obj){
				obj.innerHTML="Mouse Over Me"
			}
		</script>
	</body>
</html>

（3）onchange事件
onchange 事件常结合对输入字段的验证来使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onchange事件</title>
	</head>
	<head>
		<script>
			function myFunction(){
				var x=document.getElementById("fname");
				x.value=x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		输入你的名字: <input type="text" id="fname" onchange="myFunction()">
		<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
	</body>
</html>

使用JavaScript添加或删除 HTML 元素

1.添加元素，在添加时，需要知道所需添加元素的父元素信息，但是也可以直接添加

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用JavaScript添加元素</title>
</head>
<body>
<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
	var para=document.createElement("p");//创建新的<p> 元素
	var node=document.createTextNode("这是一个新段落。");//创建文本节点,如果不再需要追加其他文本节点，也可以 p1.innerHTML = "这是一个新段落。"; 
	para.appendChild(node);  //向 <p> 元素追加这个文本节点  
	var element=document.getElementById("div1"); 
	element.appendChild(para); //向已有的元素追加这个新元素
</script> 
</body> 
</html>

2.删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用JavaScript删除元素</title>
	</head>
	<body>
		<div id="div1">
		    <p id="p1">这是一个段落。</p>
		    <p id="p2">这是另一个段落。</p>
		</div>
		<script>
			var parent=document.getElementById("div1");
			var child=document.getElementById("p1");
			parent.removeChild(child);  //在删除时，必需要知道所需删除元素的父元素信息
		</script>
	
	</body>
</html>

w_qianqian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript HTML DOM

HTML DOM ——文档对象模型（Document Object Model）文档对象模型是文档在被加载时，由浏览器创建的。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。能够改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式以及对页面中的所有事件做出反应。通常，通过 JavaScript，在操作 HTM...
复制链接

扫一扫