DOM 编程与事件

最新推荐文章于 2024-10-10 10:50:43 发布

矢星

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量149

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_34558909/article/details/104979835

版权

一 DOM

前言: DOM(Document Object Model)是文档对象模型,是一套标准: html 和 xml都遵循这套标准!

1.1 DOM结构

在这里插入图片描述

1.2 获取DOM 节点的三种方式

//通过id 获取节点
document.getElementById("mydiv");

//通过名字获取节点
document.getElementsByName("input");

//通过标签名获取节点
document.getElementsByTagName("div");

1.3 Node常用的属性和方法

1.3.1 获取根节点和内容节点

//获取根节点: html 根节点
document.documentElement;

//获取内容节点 body
document.body;

//高 指的是内容
bodyEle.clientHeight;

1.3.2 操作元素的方法

① 添加元素 appendChild(node)
② 修改元素:replaceChild()
③ 删除元素:removeChild()

1.3.3 innerHTML 与 innerText

<!--
	作用: 
		都是获取指定标签中的值或设置值;
	区别:
		innerHTML:  获取指定标签中所有值    设置后的值如果有html会被浏览器解析
		innerTest:  获取指定标签中纯文本    设置后的值为:纯文本,不会被浏览器解析
-->

1.4 属性操作

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<!--
		js 对属性的操作:
				内置属性: 该标签本身就存在的属性,ide工具有提示
					语法格式: 
						设置值: dom.属性 = 值;
						获取值: dom.属性;
				外置属性: 
					语法格式: 
						设置值: dom.setAttribute("属性名","属性值");
						获取值: dom.getAttribute("属性名")
	-->
	<script type="text/javascript">
		window.onload = function() {
			//获取元素节点
			var myInput = document.getElementById("input");
			//获取内置属性值
			var innerValue = myInput.value;
			console.debug(innerValue);					  //123
			//设置内置属性值
			myInput.value = "abc";
			console.debug(myInput.value);			       //abc
			
			//设置自定义属性值
			myInput.setAttribute("add","自定义属性");
			//获取自定义属性值
			console.debug(myInput.getAttribute("add"));		//自定义属性值
		}
	</script>
</head>
<body>
	<input type="text" name="username" id="input" value="123"/>
</body>
</html>

1.5 特殊属性的操作

checkbox ,readOnly,disabled都是通过设置true或者false来决定
操作class属性
:document.getElementById(“main”).className=“myClass”;

1.5.1 复选框特殊属性的操作

<script type="text/javascript">
    function MyButton(){
        var myInput = document.getElementById("my");
        myInput.checked = !myInput.checked;
    }
</script>

<body>
    <input type="button" onclick="MyButton()" value="点击取反"/>
    <input type="checkbox" id="my"  checked="checked" />
</body>

1.5.2 文本框特殊属性的操作

<script type="text/javascript">
    function disabledButton() {
        var username = document.getElementById("username");
        username.disabled = !username.disabled;
    }

    function readonlyButton() {
        var password = document.getElementById("password");
        password.readOnly = !password.readOnly;
    }
</script>
</head>
<body>
    <input type="button" value="是否禁用文本框" onclick="disabledButton()" />
    <input type="button" value="是否只读文本框" onclick="readonlyButton()" />
    <input type="text" id="username" disabled="disabled" />
    <input type="text" id="password" readonly="readonly"/>
</body>

二事件

2.1 常见的鼠标事件

<script type="text/javascript">
    function doIt(str){
        console.debug(str);
    }
</script>

<body>
    <input type="button" onclick="doIt('单击')" ondblclick="doIt('双击')" value="点击"/>

    <input type="text" id="my" 
           οnmοusedοwn="doIt('鼠标按下')"
           οnmοuseup="doIt('鼠标释放')"
           οnmοuseοver="doIt('鼠标移入的时候')"
           onmouseout = "doIt('鼠标移出的时候')"
           onmousemove = "doIt('鼠标移动的时候触发事件')"
     />
</body>

2.2 其他事件

function changeValue(obj) {
	console.debug(obj.value);           //当select 值发生改变时打印该值
}

<select onchange="changeValue(this)">
    <option value="zh">中国</option>
    <option value="jp">日本</option>
    <option value="hg">韩国</option>
</select>

    //获取焦点
    function onfocusUsername(){
    	var my = document.getElementById("my");
    	my.className = "st";
    }

    //失去焦点
    function onblurUsername() {
    	var my = document.getElementById("my");
    	my.className = "";
    }
    function summitOnsubmit(){
   		return true;	//当用户名/密码不为空时提交
    }

    function retuonresetReset(){
    	return confirm("确定重置吗?");
    }

<!--
		onfocus:获取焦点的时候，触发事件
		onblur：失去焦点的时候触发事件
		
		onsubmit:form表单提交之前，触发事件  true，允许提交，false阻止提交
		onreset:重置之前，选触发事件   	   true，允许重置，false阻止重置
-->
<form action="/xx/index.jsp" onsubmit="summitOnsubmit()" onreset="return   retuonresetReset()">
    username: <input id="my" type="text" onfocus="onfocusUsername()" onblur="onblurUsername()" />
    password: <input type="text" />
    <input type="reset" value="重置" />
    <input type="submit" value="提交" />
</form>

2.3 注册事件的方式

<!--注册事件方式1：直接在html代码中加on开始的事件   推荐使用：兼容性好-->
<input type="button" onclick="btn1()" value="按钮1" />

<!--获取该按钮的dom对象，给dom对象加事件-->
<input type="button"  value="按钮2" id="btn2" />

```

三制作简单的轮播图

3.1 效果演示

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>简单的幻灯片</title>
	<script type="text/javascript">
		//展示图片的顺序
		var i = 0;
		//定时器编号
		var stopTimer;	
		//将定时器包裹在另一个函数中方便调用
		function start() {
			//设置定时器:每隔一秒执行一次
			stopTimer = setInterval(function() {
				//图片超过5张时,归1
				++i == 6 ? i=1:i;
				//获取展示图片的编号
				document.getElementById("fistImg").src="img/"+i+".png";
			},1000);
		}
		//开启定时器
		start();
		
		//添加鼠标移入事件
		function move(obj){
			//获取当前图片id 编号
			document.getElementById("fistImg").src="img/"+obj.id+".png";
			//清除当前定时器
			clearTimeout(stopTimer);
		}
		
		//添加鼠标移出事件
		function out(obj){
			//获取当前鼠标移出图标id 编号
			i=obj.id;
			//开启定时器
			start();
		}
	</script>
</head>
<body>
	<!--居中显示-->
	<div align="center">
		<!--展示图片:默认从第一张开始-->
		<img name="img" src="img/1.png" id="fistImg" width="645px" height="500px"><br />
		
		<!--为图片添加移入/移出事件-->
		<img name="img" src="img/1.png" id="1" width="125px" onmousemove="move(this)" onmouseout="out(this)">
		<img name="img" src="img/2.png" id="2" width="125px" onmousemove="move(this)" onmouseout="out(this)">
		<img name="img" src="img/3.png" id="3" width="125px" onmousemove="move(this)" onmouseout="out(this)">
		<img name="img" src="img/4.png" id="4" width="125px" onmousemove="move(this)" onmouseout="out(this)">
		<img name="img" src="img/5.png" id="5" width="125px" onmousemove="move(this)" onmouseout="out(this)">
	</div>
</body>
</html>