Web前端学习笔记——JavaScript之事件、创建元素、节点操作
程序员文章站
2022-05-10 15:33:30
...
事件
事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。
事件三要素
- 事件源:触发(被)事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
案例
- 点击按钮弹出提示框
- 点击按钮修改元素的样式
属性操作
非表单元素的属性
href、title、id、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
案例：
点击按钮，切换img标签里的图片
点击按钮显示隐藏div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
border:1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>哈哈
<script src="common.js"></script>
<script>
document.getElementById("btn").onclick=function () {
//隐藏div
//不占位
//my$("dv").style.display="none";
//占位
//my$("dv").style.visibility="hidden";
//占位
//my$("dv").style.opacity=0;
//占位
//my$("dv").style.height="0px";
//my$("dv").style.border="0px solid red";
};
</script>
</body>
</html>
- innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
- HTML转义符
" "
‘ '
& &
< < //less than 小于
> > // greater than 大于
空格
© ©
-
innerHTML和innerText的区别
-
innerText的兼容性处理
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
案例
- 给文本框赋值，获取文本框的值
- 点击按钮禁用文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">
这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="common.js"></script>
<script>
var time=5;
var timeId= setInterval(function () {
time--;
my$("btn").value="请仔细阅读协议("+time+")";
if(time<=0){
//停止定时器就可以
clearInterval(timeId);
//按钮可以被点击了
my$("btn").disabled=false;
my$("btn").value="同意";
}
},1000);
</script>
</body>
</html>
- 搜索文本框
- 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
- 设置下拉框中的选中项
- 全选反选
自定义属性操作
- getAttribute() 获取标签行内属性
- setAttribute() 设置标签行内属性
- removeAttribute() 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性。
样式操作
- 使用style方式设置的样式显示在标签行内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
-
注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'clearfix';
案例
- 开关灯
- 点击按钮变色
- 图片切换二维码案例
- 当前输入的文本框高亮显示
- 点击按钮改变div的大小和位置
- 列表隔行变色、高亮显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
cursor: pointer;
}
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: pink;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
1
</td>
<td>柳岩</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>苍老师</td>
<td>日语</td>
<td>100</td>
</tr>
<tr>
<td>
3
</td>
<td>凤姐</td>
<td>营销学</td>
<td>100</td>
</tr>
<tr>
<td>
4
</td>
<td>芙蓉姐姐</td>
<td>数学</td>
<td>10</td>
</tr>
<tr>
<td>
5
</td>
<td>佐助</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>
6
</td>
<td>卡卡西</td>
<td>体育</td>
<td>100</td>
</tr>
<tr>
<td>
7
</td>
<td>乔峰</td>
<td>体育</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script src="common.js"></script>
<script>
//先获取所有的行
var trs = my$("j_tb").getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
//鼠标进入
trs[i].onmouseover = mouseoverHandle;
//鼠标离开
trs[i].onmouseout = mouseoutHandle;
}
//当鼠标进入的时候,先把设置后的颜色保存起来,等到鼠标离开再恢复即可
var lastColor = "";
function mouseoverHandle() {//鼠标进入
lastColor = this.style.backgroundColor;
this.style.backgroundColor = "green";
}
function mouseoutHandle() {//鼠标离开
this.style.backgroundColor = lastColor;
}
</script>
</body>
</html>
- 京东商品展示
- tab选项卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#list li {
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color: beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current {
background-color: burlywood;
}
#list li a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="http://www.baidu.com">首页</a>
</li>
<li><a href="javascript:void(0)">播客</a></li>
<li><a href="javascript:void(0)">博客</a></li>
<li><a href="javascript:void(0)">相册</a></li>
<li><a href="javascript:void(0)">关于</a></li>
<li><a href="javascript:void(0)">帮助</a></li>
</ul>
</div>
<script src="common.js"></script>
<script>
//获取所有的li标签,
var liObjs=my$("list").getElementsByTagName("li");
//循环遍历,找到每个li中的a,注册点击事件
for(var i=0;i<liObjs.length;i++){
//每个li中的a
var aObj=getFirstElement(liObjs[i]);
aObj.onclick=function () {
//第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
for(var j=0;j<liObjs.length;j++){
liObjs[j].removeAttribute("class");
}
//第二件事:
//当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
this.parentNode.className="current";
return false;//阻止超链接跳转
};
}
</script>
</body>
</html>
创建元素的三种方式
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
性能问题
- innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
- 可以借助字符串或数组的方式进行替换，再设置给innerHTML
- 优化后与document.createElement性能相近
案例
- 动态创建列表，高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态的创建li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按钮的点击事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是循环的方式添加事件,推荐用命名函数
//如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>
</html>
- 根据数据动态创建表格
- 模拟百度搜索文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 450px;
margin: 200px auto;
}
#txt {
width: 350px;
}
#pop {
width: 350px;
border: 1px solid red;
}
#pop ul {
margin: 10px;
padding: 0px;
width: 200px;
list-style-type: none;
}
#pop ul li {
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];
//获取文本框注册键盘抬起事件
my$("txt").onkeyup = function () {
//每一次的键盘抬起都判断页面中有没有这个div
if(my$("dv")){
//删除一次
my$("box").removeChild(my$("dv"));
}
//获取文本框输入的内容
var text = this.value;
//临时数组--空数组------->存放对应上的数据
var tempArr = [];
//把文本框输入的内容和数组中的每个数据对比
for (var i = 0; i < keyWords.length; i++) {
//是否是最开始出现的
if (keyWords[i].indexOf(text) == 0) {
tempArr.push(keyWords[i]);//追加
}
}
//如果文本框是空的,临时数组是空的,不用创建div
if (this.value.length == 0 || tempArr.length == 0) {
//如果页面中有这个div,删除这个div
if (my$("dv")) {
my$("box").removeChild(my$("dv"));
}
return;
}
//创建div,把div加入id为box的div中
var dvObj = document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id = "dv";
dvObj.style.width = "350px";
//dvObj.style.height="100px";//肯定是不需要的------
dvObj.style.border = "1px solid green";
//循环遍历临时数组,创建对应的p标签
for (var i = 0; i < tempArr.length; i++) {
//创建p标签
var pObj = document.createElement("p");
//把p加到div中
dvObj.appendChild(pObj);
setInnerText(pObj, tempArr[i]);
pObj.style.margin = 0;
pObj.style.padding = 0;
pObj.style.cursor = "pointer";
pObj.style.marginTop = "5px";
pObj.style.marginLeft = "5px";
//鼠标进入
pObj.onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
pObj.onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>
节点操作
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div,firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);
案例：
无刷新评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<table id="tb" border="1">
<tbody id="tbd">
<tr>
<td>猪猪:</td>
<td>我喜欢吃肉</td>
</tr>
</tbody>
</table>
<div>
昵称:<input type="text" value="" id="userName"/><br/>
<textarea name="" id="tt" cols="30" rows="10"></textarea><br/>
<input type="button" value="评论一下" id="btn"/><br/>
</div>
<script src="common.js"></script>
<script>
//获取按钮,注册点击事件
document.getElementById("btn").onclick = function () {
//获取昵称的元素
var userName = my$("userName");
//获取评论的元素
var tt = my$("tt");
//创建行
var tr = document.createElement("tr");
//行加到tbody中
my$("tbd").appendChild(tr);
//创建列
var td1 = document.createElement("td");
tr.appendChild(td1);
td1.innerHTML = userName.value;
//创建列
var td2 = document.createElement("td");
tr.appendChild(td2);
td2.innerHTML = tt.value;
//清空
userName.value = "";
tt.value = "";
};
var arr=[20,10,40,50,30];
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-1-i;j++){
if(arr[j]<arr[j+1]){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}//end if
}// end for
}//end for
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
</script>
</body>
</html>
节点层级
重点讲父子属性，兄弟属性画图讲解
var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);
-
注意
childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素
nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持
-
总结
节点操作，方法
appendChild()
insertBefore()
removeChild()
replaceChild()
节点层次，属性
parentNode
childNodes
children
nextSibling/previousSibling
firstChild/lastChild
上一篇： 剑指offer——数组中的逆序对
下一篇： 51nod 1019 逆序数