好好学习，天天向上
本章主要内容是：非表单元素的属性和一些案例、获取标签内部内容的属性、表单元素属性和一些案例、自定义属性操作、style 样式属性操作
一、非表单元素的属性
- 例如：href、title、id、src 等
- 调用方式：元素对象打点调用属性名，例如 obj.href
- 注意：部分的属性名跟关键字和保留字冲突，会更换写法
- class → className
- for → htmlFor
- rowspan → rowSpan
- 属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式
<body>
<a href="http://www.lagou.com" title="跳转到拉钩招聘" id="link"> 跳转 </a>
<img src="images/a.jpg" alt="图片" class="pic" id="pic">
<script>
// 获取元素
var link = document.getElementById("link");
var pic = document.getElementById("pic");
// 调用元素对象的属性，从而操作 html 中标签的属性
console.log(link.href);
console.log(link.title);
console.log(link.id);
console.log(pic.src);
console.log(pic.alt);
console.log(pic.className);
// 等号赋值，值必须是字符串类型
pic.src = "images/b.jpg";
</script>
</body>
案例：
1、点击按钮切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击按钮切换图片</title>
</head>
<body>
<input type="button" value="点击" id="btn"> <br>
<img src="images/a.jpg" id="pic">
<script>
// 获取元素
var btn = document.getElementById("btn");
var pic = document.getElementById("pic");
// 通过一个变量作为判断条件，变量值为 1 加载的是 a 图片，2 为 b 图片
var num = 1;
// 给按钮添加点击事件
btn.onclick = function (){
// 给图片换 src 的属性值
// 通过 if 语句判断，如果是 a 图片就换乘 b 图片，反之换乘 a 图片
if (num === 1){
pic.src = "images/b.jpg";
// 数字要对应发生变化
num = 2;
} else {
pic.src = "images/a.jpg";
num = 1;
}
};
</script>
</body>
</html>
2、点击按钮显示隐藏 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击按钮显示隐藏元素</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<input type="button" value="点击隐藏" id="btn">
<div id="box"></div>
<script>
// 获取元素
var btn = document.getElementById("btn");
var box = document.getElementById("box");
// 点击按钮，让 div 显示或隐藏
// box.style.display = "none";
// btn.onclick = function (){
// // 元素 div 当前是显示的，需要让它隐藏
// // 判断，根据按钮的 value 进行条件判断
// if (btn.value === "点击隐藏"){
// box.className = "hide";
// btn.value = "点击显示";
// } else {
// box.className = "show";
// btn.value = "点击隐藏";
// }
// };
// 在事件函数内部有一个 this，指向事件源
/*
区分一下不同函数内部的 this 指向
普通函数 --> window 对象
构造函数 --> 指向的是生成的实例对象
对象的方法 --> 指向的是对象本身
事件函数 --> 指向的是事件源
*/
btn.onclick = function (){
// 元素 div 当前是显示的，需要让它隐藏
// 判断，根据按钮的 value 进行条件判断
if (this.value === "点击隐藏"){
box.className = "hide";
this.value = "点击显示";
} else {
box.className = "show";
this.value = "点击隐藏";
}
};
</script>
</body>
</html>
3、相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相册</title>
<style>
body {font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc;margin: 1em 10%;}
h1 {color: #333;background-color: transparent;}
a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}
ul { padding: 0;}
li {float: left;padding: 1em;list-style: none;}
#imagegallery {}
#imagegallery a {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}
#imagegallery a img {border: 0;}
</style>
</head>
<body>
<div id="imagegallery">
<a href="images/1.jpg" title="第1张图片">
<img src="images/1-small.jpg" width="100px" alt="图片1">
</a>
<a href="images/2.jpg" title="第2张图片">
<img src="images/2-small.jpg" width="100px" alt="图片2">
</a>
<a href="images/3.jpg" title="第3张图片">
<img src="images/3-small.jpg" width="100px" alt="图片3">
</a>
<a href="images/4.jpg" title="第4张图片">
<img src="images/4-small.jpg" width="100px" alt="图片4">
</a>
</div>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
<script>
// 1、获取元素
var imagegallery = document.getElementById("imagegallery");
var links = imagegallery.getElementsByTagName("a");
var image = document.getElementById("image");
var des = document.getElementById("des");
// 2、遍历数组.添加点击事件
for (var i = 0; i < links.length; i++){
links[i].onclick = function (){
// alert("aaa");
// 3、更改 image 内部的 src 属性值
// this 关键字指代的是触发事件的真正事件源
image.src = this.href;
// 4、更改 des 内部的文字内容
des.innerText = this.title;
// 取消 a 标签的默认跳转效果
return false;
}
}
// for 循环内部添加的绑定事件，在触发时，所有的批量添加的事件已经成功，触发事件时都是在循环结束之后
// 批量绑定的事件的事件函数内部如果有变量 i，要注意，函数执行时已经是在循环结束后
// 循环内部定义的变量是一个全局变量，在循环后执行的 I 变量值是 i 跳出循环时的值
// image.src = links[i].href;
// console.log(i); // 4
</script>
</body>
</html>
二、获取标签内部内容的属性
- 获取标签内部内容的属性有两个：innerHTML 和 innerText
- innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等
- innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的 内容会去掉换行和缩进等空白
更改标签内容
- 可以通过两个属性给双标签内部去更改内容：
- innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载
- innerText 设置属性值，有标签的字符串，会按照普通的字符加载
- 对比使用场景
- innerText：在设置纯字符串时使用
- innerHTML：在设置有内部子标签结构时使用
<body>
<div id="box">
这是一个 div 标签
<span> 这是一个 span 标签 </span>
</div>
<script>
var box = document.getElementById("box");
// 打印 box 对象
console.dir(box);
// 调用标签内部内容
console.log(box.innerHTML);
console.log(box.innerText);
// 设置标签内部的内容
// box.innerHTML = "<h1> haha </h1>";
box.innerText = "<h1> haha </h1>";
</script>
</body>三 、表单元素属性
- value 用于大部分表单元素的内容获取 (option除外)
- type 可以获取input标签的类型 (输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
- 注意：在 DOM 中元素对象的属性值只有一个时，会被转成布尔值显示
- 例如：txt.disabled = true;
<body>
<input type="button" value="按钮" id="btn"> <br>
<input type="text" id="txt" disabled="disabled">
<select id="list">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<script>
// 获取元素
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
var list = document.getElementById("list");
var opts = list.getElementsByTagName("option");
// value
console.log(btn.value);
console.log(txt.value);
console.log(opts[0].value);
console.log(opts[0].innerHTML);
// 更改 input 标签的 value
btn.value = "点击";
txt.value = "请输入内容";
// 表单元素特有的一些属性，属性名和属性值时一致的
console.log(txt.disabled);
btn.disabled = true;
</script>
</body>案例
1、检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
<body>
<input type="text" id="name">
<input type="text" id="pw">
<input type="button" id="btn" value="提交">
<script>
// 1、获取元素
var btn = document.getElementById("btn");
var username = document.getElementById("name");
var pw = document.getElementById("pw");
// 2、添加点击事件
btn.onclick = function (){
// 用户名的位数是否在 3-6 位，不满足需要高亮显示
if (username.value.length < 3 || username.value.length > 6){
username.className = "bg";
return;
} else {
username.className = "";
}
// 密码是否在 6-8 位
if (pw.value.length < 6 || pw.value.length > 8){
pw.className = "bg";
return;
} else {
pw.className = "";
}
// 模拟提交数据
console.log("提交数据");
};
</script>
</body>2、随机设置下拉框中的选中项
<body>
<input type="button" value="选择" id="btn">
<br>
<select id="food">
<option>烧烤</option>
<option>火锅</option>
<option>小龙虾</option>
</select>
<script>
// 1、获取元素
var btn = document.getElementById("btn");
var food = document.getElementById("food");
var opts = food.getElementsByTagName("option");
// 2、给按钮添加点击事件
btn.onclick = function (){
// 3、随机选择一个 option
// 每次点击需要获取一个 opts 数组的随机下标
// Math.random() [0,1)
// Math.random()*3 [0,3)
var n = Math.floor(Math.random() * opts.length);
// 设置对应的随即项的属性
opts[n].selected = true;
};
</script>
</body>3、搜索文本框
<style>
.gray {color: gray;}
.black {color: black;}
</style>
<body>
<input type="text" class="gray" value="请输入搜索关键字" id="txtSearch">
<input type="button" value="搜索" id="btnSearch">
<script>
// 获取元素
var txtSearch = document.getElementById("txtSearch");
var btnSearch = document.getElementById("btnSearch");
// 1、获取焦点时，可以使用一个 onfocus，如果文本框内容是默认，清空文字，让文字加载黑色
txtSearch.onfocus = function (){
// 判断是否时默认的提示文字
if (this.value === "请输入搜索关键字"){
this.value = "";
this.className = "black";
}
};
// 2、失去焦点时，可以使用一个 onblur,如果文本框为空，需要更改为默认提示内容，让文字加载灰色
txtSearch.onblur = function (){
// 如果用户输入的内容是默认文本相同，失去焦点时，也让文字变为灰色
// 判断内容是否为空
if (this.value === "" || this.value === "请输入搜索关键字"){
this.value = "请输入搜索关键字";
this.className = "gray";
}
};
</script>
</body>4、全选反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {padding: 0;margin: 0;}
.wrap {width: 300px;margin: 100px auto 0;}
table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0; width: 300px;}
th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}
th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}
td { font: 14px "微软雅黑";}
tbody tr { background-color: #f0f0f0; }
tbody tr:hover {cursor: pointer;background-color: #fafafa;}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="all" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
// 获取元素
var all = document.getElementById("all");
var tb = document.getElementById("tb");
var btn = document.getElementById("btn");
var tb_inputs = tb.getElementsByTagName("input");
// 1、全选：让子选项的选择效果始终与全选保持一致
all.onclick = function (){
// 遍历所有的子选项
for (var i = 0; i < tb_inputs.length; i++){
// 每一个子选项的 checked 属性值与全选保持一直
tb_inputs[i].checked = all.checked;
}
};
// 2、单独选择子选项过程
// 给每一次点击人格一个子选项进行判断
for (var i = 0; i < tb_inputs.length; i++){
tb_inputs[i].onclick = function (){
// 判断所有的子选项是否都是选中的状态，如果斗选中，让全选选中，如果没有，取消全选
allChecked();
};
}
// 3、反选
btn.onclick = function (){
// 让所有子选项与之前的状态相反
for (var i = 0; i < tb_inputs.length; i++){
// 让属性值去原来相反的值
tb_inputs[i].checked = !tb_inputs[i].checked;
}
// 控制全选效果，也需要进行取反
allChecked();
}
// 定义一个 all 是否被选中的函数
function allChecked (){
// 使用一个中间过渡变量，初始认为所有的子选项都是被选中的
var isAllCheaked = true;
// 遍历所有的子选项，进行判断
for (var j = 0; j < tb_inputs.length; j++){
// 一旦有一个没有被选择，让变量变为 false
if (tb_inputs[j].checked === false){
isAllCheaked = false;
break;
}
}
// 如果循环内部条件一直不成立，说明子选项都是被选中的 isAllCheaked 的值没有发生变化
// 给 all 元素设置 checked 属性
all.checked = isAllCheaked;
}
</script>
</body>
</html>四、自定义属性操作
- getAttribute(name) 获取标签行内属性
- setAttribute(name，value) 设置标签行内属性
- removeAttribute(name) 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自定义的属性
<body>
<div id="box" age="18" sex="male">小明</div>
<script>
// 获取元素
var box = document.getElementById("box");
// 元素自有属性
console.log(box.id);
// console.log(box.age); // undefined
// 元素自定义的新属性不能用点语法直接调用
// 可以调用元素对象的获取自定义属性的方法
console.log(box.getAttribute("age"));
// 也可以调用自有的属性
console.log(box.getAttribute("id"));
// 设置属性,添加新的自定义属性或者自有属性
box.setAttribute("age", "20");
box.setAttribute("city", "BeiJing");
box.setAttribute("class", "demo");
// 移除属性
box.removeAttribute("age");
box.removeAttribute("class");
</script>
</body>五、style 样式属性操作
- 使用 style 属性方式设置的样式显示在标签行内
- element.style 属性的值，是所有行内样式组成的一个样式对象
- 样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性
- 注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要 修改为驼峰命名方式书写 backgroundColor
- 注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {background-color: skyblue;}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box" style="width: 100px;" class="bg"> 文字 </div>
<script>
// 获取元素
// 定义一个获取元素的函数
function my$ (id){
return document.getElementById(id);
}
var btn = my$("btn");
var box = my$("box");
// 1、更改类名的方式去更改样式
// 2、根据对象的 style 属性去操作样式
console.log(btn.style);
// 元素对象的 style 属性的值是一个行内样式组成对象，对象内部封装了所有的行内的样式属性及属性值
// 元素的样式属性对象可以继续大点调用，获取或设置相关的相关样式属性
console.log(box.style);
console.log(box.style.width);
console.log(box.style.backgroundColor);
box.style.width = "200px";
</script>
</body>
</html>六、className 类名属性操作
- 修改元素的 className 属性相当于直接修改标签的类名
- 如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过 修改类名的方式，批量修改 css 样式
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
