测试大牛必会的前端--javascript基础知识

最新推荐文章于 2023-01-10 11:41:50 发布

原创最新推荐文章于 2023-01-10 11:41:50 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了文档对象模型(DOM)的基本概念，包括其树状结构及如何通过DOM操作页面元素，如获取、修改和响应用户事件。通过具体示例展示了如何使用JavaScript进行DOM操作，如获取元素、添加事件监听器等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文档对象模型

dom 就是一个html

dom 把 html 划分成了一个树结构

dom能够操作分支，改变样式改变内容

dom是有分支的

document 是具体的对象，是dom的一种实现方式，可以通过doucument 节点可以遍历文档里的所有子节点

document 能够操作页面上的元素

dom 可以看成是一个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{utf-8}">
		<title></title>
		 <meta charset="utf-8" />
	</head>
	<body>
		<!--表单--->
		<form>
			<!--文本输入框，只是一个input元素，类型是text，text就是一个文本输入框--->
			用户名：<input id="user",type="text" placeholder="请输入用户名"/><br />
			密码框：<input type="password" placeholder="请输入密码" /><br />
			<input type="submit" id="btn" value="按钮"/>
		</form>
	</body>
	<!--js代码
		通过标签名称，通过class，通过id
		document 指的是整个文档，
		getElement 拿到元素
		在js里面，没有区分类型，保存都用var，不管是数字还是啥都用var
		window.onload=function  把整个页面加载完成后，在执行这个里面的内容，
		window.onload 页面图形效果加载完成
		function 是一个函数，是一个固定写法，就是你要做什么事情，在这个函数里面去写
	-->
	<script>
		
//		var ouser=ocument.getElementById("user")
//		alert(ouser)
		//点击事件
		window.onload=function(){
					var obtn=document.getElementById("btn")
//					obtn.onclick=function(){
//						alert("我被点击了")
//					}
//双击事件，这种事件一般都是在按钮上面使用的

//					obtn.ondblclick=function(){
//						alert("我被双击了")
//					}
					//失去焦点，主要用于文本框上面，主要用于表单的验证
				var oUser=document.getElementById("user");
//				oUser.onblur=function(){
//					alert("我不见了")
//				}
				//聚焦，主要用于修改文本框样式
//				oUser.onfocus=function(){
//					alert("你好，我是梁明晓哦")
//				}
//改变事件,一般用于三级联动,省市县
//				oUser.onchange=function(){
//					alert("我被改变了")
//				}
			oUser.onmousemove=function(){
				alert("鼠标移动")
			}
			
		}
	</script>
</html>