前端基础——JavaScript中的DOM基础与DOM事件
DOM查找方法
document.getElementById
语法：document.getElementById(“id”)
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值
<div id="box" class="box">
元素
</div>
<script type="text/javascript">
// 获取id为box的这个元素
var box = document.getElementById("box");
console.log(box);
</script>
document.getElementsByTagName
语法：document.getElementsByTagName(“tag”)
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称
<ul id="list1">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<ol>
<li>JavaScript原生</li>
<li>JavaScript框架</li>
</ol>
<script type="text/javascript">
// 获取页面中所有的li
var lis = document.getElementsByTagName("li");
console.log(lis);
// 获取id为list1下的所有li
var lis2 = document.getElementById("list1").getElementsByTagName("li");
console.log(lis2);
</script>
设置元素样式 JS可以动态给元素设置样式
ele.style.styleName=styleValue
语法：ele.style.styleName=styleValue
功能：设置ele元素的css样式
说明：
ele为要设置样式的DOM对象
styleName为要设置的样式名称，不能使用“-”连接形式，比如：font-size，要用fontSize的驼峰形式。
styleValue为设置的样式值
<div id="box" class="box">
元素
</div>
<ul id="list">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
<li>python发开</li>
<li>java开发</li>
</ul>
<ol>
<li>JavaScript原生</li>
<li>JavaScript框架</li>
</ol>
<script type="text/javascript">
// 设置id为box的这个元素文字颜色
var box = document.getElementById("box");
box.style.color = "#f00";
box.style.fontWeight = "700"; // 当属性是减号连接的复合形式是，必须要转换为驼峰形式
var lis = document.getElementById("list").getElementsByTagName("li");
// 数组是不能直接设置DOM样式属性的，所以要遍历数组
for (var i=0; i<lis.length;i++){
lis[i].style.color = "#00f";
if (i==0){
lis[i].style.backgroundColor = "#ccc";
}else if(i==1){
lis[i].style.backgroundColor = "#666";
}else if(i==2){
lis[i].style.backgroundColor = "#999";
}else{
lis[i].style.backgroundColor = "#333";
}
}
</script>
innerHTML
语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的HTML
语法：ele.innerHTML = “html”
功能：设置ele元素开始和结束标签之间的HTML内容为html
<div id="box" class="box">
元素
</div>
<ul id="list">
<li><em>前端开发</em></li>
<li><strong>服务器端开发</strong></li>
<li>UI设计</li>
</ul>
<script type="text/javascript">
var lis = document.getElementById("list").getElementsByTagName("li");
// 数组是不能直接设置DOM样式属性的，所以要遍历数组
for (var i=0; i<lis.length;i++){
console.log(lis[i].innerHTML);
// lis[i].innerHTML = lis[i].innerHTML+"程序";
lis[i].innerHTML += "程序"; // 是上面注释掉代码的简写
}
</script>
className
语法：ele.className
功能：返回ele元素的class属性
语法：ele.className = “cls”
功能：设置ele的class属性为cls
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.on{
border-bottom: 1px solid #0f0;
}
.current{
background: #ccc;
color: #f00;
}
</style>
</head>
<body>
<div id="box" class="box">
元素
</div>
<ul id="list">
<li><em>前端开发</em></li>
<li class="on"><strong>服务器端开发</strong></li>
<li>UI设计</li>
</ul>
<script type="text/javascript">
var lis = document.getElementById("list").getElementsByTagName("li");
// 数组是不能直接设置DOM样式属性的，所以要遍历数组
for (var i=0; i<lis.length;i++){
console.log(lis[i].innerHTML);
// lis[i].innerHTML = lis[i].innerHTML+"程序";
lis[i].innerHTML += "程序"; // 是上面注释掉代码的简写
// className 是重新设置设置类，替换元素本身的class
lis[1].className = "current"; // 动态添加class，替换元素本身class，这里用current替换on
}
// className获取元素类，如果有两个以上的class属性值，那么获取这个元素的className属性时，
// 会将它的class属性值都打印出来
console.log(document.getElementById("box").className);
</script>
getAttribute
语法：ele.getAttribute(“attribute”)
功能：获取ele元素的attribute属性
说明：
1.ele是要操作的DOM对象
2.Attribute是要获取的html属性（如：id、type）
<p id="text" class="text" align="center" date-type="title">文本</p>
<script type="text/javascript">
var p = document.getElementById("text");
// 获取标签属性语法：DOM对象.属性，如：p.id 这种方式对标签自带的属性有效
// 比如 <input type="" name="" id="" value="" /> 中type name id value 都是自带（标准）属性
// 但是 class就不行，它会返回一个undefined，它是用className去获取。
// 但是想获得其他的非标准属性，这时候要用到Attribute
console.log(p.id); // 得到 text
console.log(p.align); // 得到 center
console.log(p.getAttribute("date-type")); // 这时候可以得到 title
console.log(p.getAttribute("class")); // 等价于 p.className 会得到text
设置属性
setAttribute
语法：ele.setAttribute(“attribute”,value)
功能：在ele元素上设置属性
说明：
1、ele是要操作的DOM对象
2、attribute为要设置的属性名称
3、value为要设置的attribute属性的值
① setAttribute方法必须有两个参数
② 如value是字符串，需要加引号
③ setAttribute有兼容问题
<p id="text" class="text" align="center" date-type="title">文本</p>
<input type="text" id="user" value="user" />
<script type="text/javascript">
var p = document.getElementById("text");
// 给p设置一个date-color属性
p.setAttribute("date-color","#f00");
// input设置一个isRead属性
user.setAttribute("isRead","false");
// 删除属性
p.removeAttribute("align");
</script>
删除属性
removeAttribute
语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性
说明：
1、ele是要操作的DOM对象
2、Attribute是要删除的属性名称
p.removeAttribute("align");
什么是事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
HTML事件
直接在HTML元素标签内添加事件，执行脚本。
语法：<tag 事件=“执行脚本”></tag>
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用。
<style type="text/css">
.btn{
width: 140px;
height: 30px;
line-height: 30px;
background: #00f;
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 5px;/*圆角*/
cursor: pointer; /*光标形状*/
margin-top: 30px;
}
</style>
</head>
<body>
<!--alert括号中的文字用单引号，为了与外面的双引号区别开-->
<input type="button" id="" value="弹 出" onclick="alert('我是按钮')" />
<!--鼠标滑过按钮时调用mouseoverFn的函数-->
<div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
<script type="text/javascript">
function mouseoverFn(btn){ // this将DOM文件传过来，用一个参数btn接收
// 当鼠标滑过，改变按钮背景颜色
// document.getElementById("btn").style.backgroundColor="#f00";
// console.log(btn); 检查this是否指向正确
btn.style.background = "#f00";
}
function mouseoutFn(btn){
btn.style.background = "#00f";
}
</script>
<!--还可以传两个参数-->
<div id="btn" class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#00f')">开始</div>
<script type="text/javascript">
function mouseoverFn(btn,bgColor){ // this将DOM文件传过来，用一个参数btn接收
// 当鼠标滑过，改变按钮背景颜色
// document.getElementById("btn").style.backgroundColor="#f00";
// console.log(btn); 检查this是否指向正确
btn.style.background = bgColor;
}
function mouseoutFn(btn,bgColor){
btn.style.background = bgColor;
}
</script>
</body>
注意：不建议使用HTML事件的原因：
1.多元素绑定相同事件是，效率低
2.不建议在HTML元素中写JavaScript代码
DOM0级事件
1.通过DOM获取HTML元素
2.（获取HTML元素）.事件=执行脚本
这个事件不像HTML事件，是写在HTML上面的，所以要用DOM获取
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。
<style type="text/css">
.lock{
width: 140px;
height: 30px;
line-height: 30px;
background: #00f;
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 5px;/*圆角*/
cursor: pointer; /*光标形状*/
margin-top: 30px;
}.unlock{
width: 140px;
height: 30px;
line-height: 30px;
background: #666;
color: #ccc;
font-size: 14px;
text-align: center;
border-radius: 5px;/*圆角*/
cursor: pointer; /*光标形状*/
margin-top: 30px;
}
</style>
</head>
<body>
<div id="btn" class="lock">锁定</div>
<script>
// 获取按钮
var btn = document.getElementById("btn");
// 下面用的都是匿名函数，现在设置函数名
function clickBtn(){
alert("这是个按钮");
}
btn.onclick = clickBtn; // 这里的函数名后面，一定不能加括号
// 给按钮绑定事件,this是对该DOM元素的引用，不管是HTML元素还是DOM0级事件，this的指向是不变的
//btn.onclick = function(){
// this.className = "unlock";
// this.innerHTML = "解锁";
// 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
// 第一种方法用className判断
/*if(this.className=="lock"){
this.className = "unlock";
this.innerHTML = "解锁";
}else{
this.className = "lock";
this.innerHTML = "锁定";
}
// 第二种方法用innerHTML判断
if(this.innerHTML=="锁定"){
this.className = "unlock";
this.innerHTML = "解锁";
}else{
this.className = "lock";
this.innerHTML = "锁定";
}*/
//}
</script>
</body>
关于this指向
在事件触发的函数中，this是对该DOM对象的引用。换句话说，this就是将dom元素传递给函数，就不会再用document.getElementById去费劲的获取了。
代码：参考 HTML事件 下方代码
鼠标事件
onload：页面加载时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
// 页面加载时执行（指页面上的文本图像、CSS、二进制等
// 所有的元素都加载完毕后执行onload里的脚本）
// unload 页面卸载
window.onload = function () { // 脚本在要操作的元素之上用window.onload
// 获取box
var box = document.getElementById("box");
var clicked = function () {
alert("被点击");
}
box.onclick = clicked; //此处不要加括号去调用函数
}
</script>
</head>
<body>
<div id="box">点击</div>
</body>
</html>
onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获得焦点时触发
onblur：失去焦点时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.box{padding: 50px;}
.left,.tip{float: left;}
.left{margin-right: 10px;}
.tip{display: none; font-size: 14px;} /*先隐藏文字提示*/
</style>
<script type="text/javascript">
// onfocus 获得焦点时触发
// 只用于input标签 type= text 和 pass 以及textare上，像单选，复选的用不了
// onblur 失去焦点时触发
window.onload = function(){
// 获取文本框和提示框
var phone = document.getElementById("phone"),
tip = document.getElementById("tip");
// 给文本框绑定激活事件
phone.onfocus = function(){
// 让tip显示出来
tip.style.display = "block";
}
// 给文本框绑定失去焦点的事件
phone.onblur = function(){
// 获取文本框的值。value用于获取表单元素的值
var phone_val = this.value;
// 判断手机号码是否是11为数字
// 如果输入正确显示对号图标，如果错误显示错号图标
if (phone_val.length==11 && isNaN(phone_val)==false) {
tip.innerHTML = "<img src='img/right.png' />";
} else{
tip.innerHTML = "<img src='img/wrong.png' />";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="请输入手机号码" />
</div>
<div class="tip" id="tip">
请输入有效的手机号码
</div>
</div>
</body>
</html>
onchange：域的内容改变时发生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 页面加载
window.onload = init;
// 初始化函数
function init(){
// 获取下拉菜单
var menu = document.getElementById("menu");
// 给菜单绑定onchange事件，一般作用于select，单选（radio），复选（checkbox）
menu.onchange = function(){
// 获取当前选中的值
// var bgcolor = this.value;
// menu.options 提取出全部的option,返回一个数组
// [menu.selectedIndex] 被选中数组的索引
var bgcolor = menu.options[menu.selectedIndex].value;
//console.log(bgcolor);
// 判断如果bgcolor为空，脚本将不执行
//if (bgcolor=="") return;
// 设置body的背景色
// 判断如果bgcolor为空，则显示白色，否则显示选择后的颜色
if (bgcolor=="") {
document.body.style.background = "#ffffff";
} else{
document.body.style.background = bgcolor;
}
}
}
</script>
</head>
<body>
<div class="box">
请选择你喜欢的背景颜色：
<select id="menu" name="">
<option value="">请选择</option>
<option value="#f00">红色</option>
<option value="#0f0">绿色</option>
<option value="#00f">蓝色</option>
<option value="#ff0">黄色</option>
<option value="#ccc">灰色</option>
</select>
</div>
</body>
</html>
onsubmit：表单中的确认按钮被点击时发生，onsubmit事件不是加在按钮上的，而是表单上的。
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时发生
onmouseup：在元素上松开鼠标按钮时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background: #f00;
}
</style>
</head>
<body>
<div class="box" id="box">
拖动
</div>
<script type="text/javascript">
var box = document.getElementById("box");
// 绑定按下事件
box.onmousedown = function(){
console.log("我被按下了");
}
// 绑定移动事件
box.onmousemove = function(){
console.log("我被移动了");
}
// 绑定松开事件
box.onmouseup = function(){
console.log("我被松开了")
}
// 绑定点击事件
box.onclick = function(){
console.log("我被点击了")
}
</script>
</body>
</html>
onresize：当调整浏览器窗口的大小时触发
onscroll：拖动滚动条滚动时触发
// 浏览器窗口尺寸发生改变
window.onresize = function(){
console.log("尺寸被改变了");
}
// 拖动滚动条
window.onscroll = function(){
console.log("拖动滚动条");
}
键盘事件与keyCode属性
onkeydown ：在用户按下一个键盘按键时发生
onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown 或 onkeyup 事件触发的键的值的字符代码，或键的代码。就是可以知道被按下的是哪个键。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.text span{font-weight:bold;color:#f00;}
em{font-style:normal;}
b{font-weight:normal;}
</style>
</head>
<body>
<div>
<p class="text">
<b id="showcount">您还可以输入</b>
<span id="totalbox"><em id="count">30</em>/30</span>
</p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
</div>
<script>
// 获取文本框及其他元素
var text=document.getElementById("text");
var total=30;
var count=document.getElementById("count");
var showcount=document.getElementById("showcount");
var totalbox=document.getElementById("totalbox");
// 绑定键盘事件
document.onkeyup=function(){
// 获取文本框值的长度
var len=text.value.length;
// 计算可输入的剩余字符
var allow=total-len;
var overflow=len-total;
// 如果allow小于0
if(allow<0){
showcount.innerHTML="您已超出"+overflow;
totalbox.innerHTML='';
}else{
showcount.innerHTML='您还可以输入';
totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号