目录
一、获取/修改元素属性
1. 图片元素属性操作示例
2. 输入框与图片的交互示例
二、获取/修改表单元素属性
1. 代码示例：切换按钮的文本
2. 代码示例：点击计数
3. 代码示例：全选/取消全选按钮
一、获取/修改元素属性
可以通过Element对象的属性来直接修改，就能影响到页面显示效果。
1. 图片元素属性操作示例
HTML 代码：
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花"> <script> var img = document.querySelector('img'); console.dir(img); </script>2. 输入框与图片的交互示例
HTML 代码：
<body> <input type="text" onkeyup="myOnkeyUp()"> <span>这是一个span标签</span> <img src="../向右小.png" alt="图片加载失败" title="这是一个提示图片" width="100px" height="100px"> </body>JavaScript 代码：
<script> let img = document.querySelector('img') console.dir(img) img.title = "这是已经修改完毕的title" img.onclick = function() { alert("你已经点击了这个图片") } </script>二、获取/修改表单元素属性
表单（主要是指input标签）的以下属性都可以通过 DOM 来修改：
value：input的值。disabled：禁用。checked：复选框会使用。selected：下拉框会使用。type：input的类型（文本、密码、按钮、文件等）。
1. 代码示例：切换按钮的文本
假设这是个播放按钮，在 "播放" - "暂停" 之间切换。
HTML 代码：
<body> <input class="btn" type="button" value="播放" onclick="Onclick()"> </body>JavaScript 代码：
<script> let btn = document.querySelector('.btn') // 当按钮的 value等于 播放，此时将按钮 value变成暂停 // 否则变成播放 function Onclick() { if(btn.value == "播放") { btn.value = "暂停" } else { btn.value = "播放" } } </script>2. 代码示例：点击计数
使用一个输入框输入初始值（整数），每次点击按钮，值 +1。
HTML 代码：
<body> <input class="input" type="text" name="" id="" value="0"> <input class="add" type="button" value="+1" onclick="Add()"> <input class="min" type="button" value="-1" onclick="Min()"> </body>JavaScript 代码：
<script> function Add() { let input_element = document.querySelector('.input') input_element.value = parseInt(input_element.value) + 1 } function Min() { let input_element = document.querySelector('.input') input_element.value = parseInt(input_element.value) - 1 } </script>3. 代码示例：全选/取消全选按钮
点击全选按钮，则选中所有选项。
只要某个选项取消，则自动取消全选按钮的勾选状态。
HTML 代码：
<input class="all" type="checkbox" onclick="SelectAll()">选中全部 <input type="checkbox" class="select">选项1 <input type="checkbox" class="select">选项2 <input type="checkbox" class="select">选项3 <input type="checkbox" class="select">选项4JavaScript 代码：
<script> let all = document.querySelector('.all') let select = document.querySelectorAll('.select') console.dir(all) function SelectAll() { for(i = 0; i < select.length; i++) { select[i].checked = all.checked } } for(i = 0; i < select.length; i++) { select[i].onclick = function() { all.checked = IsSelectAll(select) } } function IsSelectAll(select) { for(i = 0; i < select.length; i++) { if(select[i].checked == false) { return false } } return true } </script>
