javascript Vue
DOM对象
什么是DOM
DOM(Document Object Model)：文档对象模型，就是Javascript将HTML文档的各个组成部分封装为对象，通过修改HTML元素的内容和样式动态改变页面。
如何获取DOM对象
- 获取DOM中的元素对象（Element对象/标签）
- 操作标签的属性
标签对象通过document获取，document对象通过Window对象获取，以下是document对象提供的用于获取element元素对象的ApI如下
这里展示了getElementById,其余API调用类似。
- 获取元素对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body><div id="001">hhh</div><script>var divdemo = document.getElementById("001")alert(divdemo)</script>
</body>
</html>
- 操作属性
如何查看文档呢？
<script>var divdemo = document.getElementById("001")divdemo.innerHTML = "hxw 好帅"alert(divdemo)
</script>
发现内容从’hhh’变成了’hxw 好帅’,我爱敲代码
案例
需求
- 点亮灯泡
- 将所有的div标签的白哦前提内容后面加上：Yes！
- 使得所有的复选框被选中状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="h1" src="../img/off.gif"> <br><br><div class="cls">hxw 好帅</div> <br><div class="cls">hxw 将会是一个优秀的程序员</div> <br><input type="checkbox" name="hobby"> 敲代码<input type="checkbox" name="hobby"> 打篮球<input type="checkbox" name="hobby"> 打乒乓球
</body>
</html>
效果如下
需求实现
- 点亮灯泡：其实本质就是换一张图片，需要获取img标签对象来操作src属性
- 在div标签内容的后面添加Yes！并且是红色字体：获取原有内容，通过font属性进行修改字体颜色。通过标签名获取所有的div标签，对div标签进行遍历处理，获取div标签的原有内容，然后追加very good,替换掉原来的内容
- 将所有的复选框内容呈现被选中的状态：checkbox标签对象的checked属性设置为true可以使得复选框被选中，所以通过name属性获取所有的checkbox标签，遍历所有的chekbox标签，设置每个checkbox标签的checked属性
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="h1" src="../img/off.gif"> <br><br><div class="cls">hxw 好帅</div> <br><div class="cls">hxw 将会是一个优秀的程序员</div> <br><input type="checkbox" name="hobby"> 敲代码<input type="checkbox" name="hobby"> 打篮球<input type="checkbox" name="hobby"> 打乒乓球<script>var img = document.getElementById("h1");img.src = "../img/on.gif"var divs = document.getElementsByTagName('div');for(let i = 0; i < divs.length; i ++){const div = divs[i];div.innerHTML += "<font color = 'red'> Yes! </font>"}var ins = document.getElementsByName('hobby');for(let i = 0; i < ins.length; i ++){const check = ins[i];check.checked = true;}</script>
</body>
</html>
js事件
什么是事件
当我想要在游戏中注册一个新账号，输入用户名，页面会给我一个反馈，我这个用户名是否存在以及是否符合其命名规则，要想实现这个就需要使用事件。理解以下的概念
-
事件（Event）
在 JavaScript 中，事件是指在用户与页面交互时或在页面加载过程中发生的特定动作，比如点击按钮、提交表单、页面加载完成等。 -
事件处理函数（Event Handler）
事件处理函数是当特定事件发生时执行的函数。例如，当用户点击一个按钮时，可能会触发一个函数来处理这个点击事件。 -
事件监听（Event Listener）
事件监听是一种机制，用于监听和响应用户操作或其他事件。通过事件监听，你可以指定在特定事件发生时应该执行哪个函数。
事件绑定的方式
事件绑定的函数，只有在事件触发的时候才会被调用
- 方式一：通过html中的事件属性进行绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><script>function on(){alert("按钮一被点击了...")}</script>
</body>
</html>
- 方式二：通过DOM中Element元素的事件属性进行绑定
html中的标签被加载成element对象，可以通过对象的属性来操作标签的属性。此时可以添加一个按钮
<input type="button" id="btn2" value="事件绑定2"><script>document.getElementById("btn2").onclick = function(){alert("按钮二被点击...")}</script>
