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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xxlovesht/article/details/81360127

 

文档对象模型

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.οnlοad=function  把整个页面加载完成后,在执行这个里面的内容,
		window.onload 页面图形效果加载完成
		function 是一个函数,是一个固定写法,就是你要做什么事情,在这个函数里面去写
	-->
	<script>
		
//		var ouser=ocument.getElementById("user")
//		alert(ouser)
		//点击事件
		window.οnlοad=function(){
					var obtn=document.getElementById("btn")
//					obtn.οnclick=function(){
//						alert("我被点击了")
//					}
//双击事件,这种事件一般都是在按钮上面使用的

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

 

展开阅读全文

没有更多推荐了,返回首页