Dom操作——操作元素，各种事件

文章目录

Dom操作——操作元素，各种事件
- 一、操作元素
- - 操作内容
  - 操作属性
  - 操作样式
- 二、各种事件
- - 单击事件
  - onload事件
  - 键盘事件
  - 鼠标事件
  - 焦点事件

一、操作元素

操作内容

1、经验：

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

2、语法：

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

3、案例代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取内容 - innerText</button><button onclick="fun02()">设置内容 - innerText</button><br /><span>用良心做教育</span><br /><button onclick="fun03()">获取内容 - innerHTML</button><button onclick="fun04()">设置内容 - innerHTML</button><br /><span>用良心做教育</span><script type="text/javascript">/*** 知识点：操作内容*/var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];function fun01(){console.log(span01.innerText);}function fun02(){span01.innerText = "<h1>做真实的自己</h1>";}function fun03(){console.log(span02.innerHTML);}function fun04(){//把文本当做html标签设置span02.innerHTML = "<h1>做真实的自己</h1>";}</script></body>
</html>

4、代码效果：

在这里插入图片描述

操作属性

1、语法：

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取属性</button><button onclick="fun02()">设置属性</button><br /><img src="../../img/樱井步.jpg" width="100px" height="100px" /><br /><button onclick="fun03()">获取属性</button><button onclick="fun04()">设置属性</button><br /><img src="../../img/樱井步.jpg" width="100px" height="100px" /><script type="text/javascript">/*** 知识点：操作属性*/var img1 = document.getElementsByTagName("img")[0];var img2 = document.getElementsByTagName("img")[1];function fun01(){console.log(img1.src);console.log(img1.width);console.log(img1.height);}function fun02(){img1.src = "../../img/波多野结衣.jpg";img1.width = "200";img1.height = "200";}function fun03(){console.log(img2.getAttribute("src"));console.log(img2.getAttribute("width"));console.log(img2.getAttribute("height"));}function fun04(){img2.setAttribute("src","../../img/波多野结衣.jpg");img2.setAttribute("width","100%");img2.setAttribute("height","100%");}</script></body>
</html>

3、代码效果：

在这里插入图片描述

操作样式

1、语法：

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取样式</button><button onclick="fun02()">设置样式</button><br /><span>用良心做教育</span><script type="text/javascript">/*** 知识点：操作样式*/var span = document.getElementsByTagName("span")[0]function fun01(){console.log(span.style.color);console.log(span.style.fontSize);}function fun02(){span.style.color = "red";span.style.fontSize = "50px";}</script></body>
</html>

3、代码效果：

在这里插入图片描述

二、各种事件

对事件做出反应

单击事件

1、效果：点击之后，更改标题内容

注意：this代表当前被点击的对象

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];//绑定单击事件h1.onclick = function(){this.innerText = "做真实的自己";}</script></body>
</html>

onload事件

1、概念：onload 一般可以来做一些网页的环境准备工作

2、效果：事件会在页面或图像加载完成后立即发生。

3、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//页面加载事件：事件会在页面元素和图像加载完成后立即发生window.onload = function(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){this.innerText = "做真实的自己";}}</script></head><body><h1>用良心做教育</h1>		</body>
</html>

键盘事件

1、监听器：onkeydown、onkeypress、onkeyup

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"/><script type="text/javascript">function myDown(){//键盘按下事件console.log("down");}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的console.log("press");}function myUp(){//键盘松开事件console.log("up");}			</script></body>
</html>

3、代码效果：按下键盘控制台会有down输出，松下会有up输出

鼠标事件

1、onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/波多野结衣.jpg" width="100px" height="100px"onmousedown="myDown()"onmouseup="myUp()"onmousemove="myMove()"onmouseover="myOver()"onmouseout="myOut()"/><script type="text/javascript">function myDown(){//鼠标按下事件console.log("down");}function myUp(){//鼠标松开事件console.log("up");}function myMove(){//鼠标移动事件console.log("move");}function myOver(){//鼠标移入事件console.log("over");}function myOut(){//鼠标移出事件console.log("out");}</script></body>
</html>

3、代码效果：

在这里插入图片描述

焦点事件

1、监听获取焦点和失去焦点

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"onfocus="myFocus()"onblur="myBlur()"	/><script type="text/javascript">function myFocus(){//获取焦点事件console.log("focus");}function myBlur(){//失去焦点事件console.log("blur");}</script></body>
</html>