文章目录
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
一、Dom Html
1、查找标签
document.getElementById(“idValue”); 由 id 查找
document…getElementsByTagName(“p”); 由标签名查找
document.getElementsByClassName(“className”); 由类名查找
<div class="box" id="box">DIV</div>
<ul id="list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>
<li>java</li>
<li>javaScript</li>
</ol>
<script>
// 获取id为box的这个元素
var box=document.getElementById("box");
console.log(box); // <div class="box" id="box">DIV</div>
// 获取页面中所有的li
var lis=document.getElementsByTagName("li");
console.log(lis.length); // 5
// 获取class=box的第一个元素
var x = document.getElementsByClassName("box")[0];
console.log(x); // <div class="box" id="box">DIV</div>
// 获取id为list下的所有的li
var lis2=document.getElementById("list").getElementsByTagName("li");
console.log(lis2.length); // 3
</script>
2、修改样式 CSS
设置ele元素的CS样式
- 语法:
ele.style.styleName=styleValue
- ele为要设置样式的DOM对象
- styleName为要设置的样式名称(- 连字符形式改为驼峰形式)
- styleValue为设置的样式值
<div class="box" id="box">元素BOX</div>
<ul id="list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<script>
var box=document.getElementById("box");
box.style.color='#f00'; // 字体颜色
box.style.fontWeight="bold"; // 加粗(驼峰)
var lis=document.getElementById("list").getElementsByTagName("li");
// 遍历每一个li
for(var i=0,len=lis.length;i<len;i++){
lis[i].style.color='#00f';
if(i==0){
lis[i].style.backgroundColor="#ccc";
}else if(i==1){
lis[i].style.backgroundColor="#666";
}else{
lis[i].style.backgroundColor="#333";
}
}
</script>
3、innerHTML、className
-
ele.innerHTML
返回ele元素开始和结束标签之间的文本和HTML内容。
-
ele.innerHTML = "content"
设置ele元素开始和结束标签之间的HTML内容为content(文本和HTML内容)。
-
ele.className
返回ele元素的class属性。
-
ele.className = "myclass"
设置ele元素的class属性为cls(替换而不是添加)。
<ul id="list">
<li><i>第一项</i></li>
<li class="on"><b>第二项</b></li>
<li>第三项</li>
</ul>
<script>
var lis=document.getElementById("list").getElementsByTagName("li");
for(var i=0,len=lis.length; i<len; i++){
console.log(lis[i].innerHTML);
// <i>第一项</i>
// <b>第二项</b>
// 第三项
lis[i].innerHTML+='内容';
lis[1].className="current";
}
console.log(lis[1].innerHTML); // <b>第二项</b>内容
console.log(lis[1].className); // current
</script>
4、属性设置和获取
- 获取属性
ele.getAttribute(“attribute”)
- ele 是要操作的 dom对象
- attribute 是要获取的 html属性(如:id,type)
- 设置属性
ele. setAttribute(“attribute”, value)
- ele 是要操作的 dom对象
- attribute 为要设置的属性名称
- value 为设置的 attribute属性的值
- 删除属性
ele.removeAttribute(“attribute”)
- ele 是要操作的 dom对象
- attribute 是要删除的属性名称
- 对于HTML标签自带的属性可以直接 标签变量.属性名 访问。
<p id="text" class="text" align="center" data-type="title">文本</p>
<input type="text" name="user" value="user" id="user" validate="true">
<script>
var p=document.getElementById("text");
var user=document.getElementById("user");
console.log(p.getAttribute("class")); // text
console.log(p.className); // text (className 比较特殊)
console.log(p.align); // center
console.log(user.getAttribute("validate")); // true
// 给p设置一个data-color的属性
p.setAttribute("data-color","red");
// 给input设置一个isRead的属性
user.setAttribute("isRead","false");
// 删除p上的align属性
p.removeAttribute("align");
</script>
二、Js 事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
在事件触发的函数中,this 是对调用DOM对象的引用。
1、Html 事件
在HTML元素上直接绑定事件。
<tag 事件 = “执行脚本” > </tag>
<input type="button" value="弹 出" onclick="alert('我是按钮')">
<!--鼠标划过按钮时调用mouseoverFn的函数-->
<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
<script>
function mouseoverFn(btn,bgColor){
btn.style.background=bgColor;
}
function mouseoutFn(btn,bgColor){
btn.style.background=bgColor;
}
</script>
2、Dom 0级 事件
在DOM对象上绑定事件。
ele.事件 = 执行脚本
<div class="box" id="btn1">DIV</div>
<div class="lock" id="btn2">锁定</div>
<script>
// 获取按钮
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
function clickBtn(){
alert("我是按钮");
}
// 给按钮绑定事件,注意绑定时不能带括号
btn1.onclick=clickBtn;
// 给按钮绑定事件(匿名函数),this是对该DOM元素的引用
btn2.onclick=function(){
if(this.innerHTML=="锁定"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
}
</script>
3、鼠标事件
事件名称 | 描述 |
---|---|
onclick | 在对象被点击时发生 |
onmouseover | 在鼠标移动到对象时发生 |
onmouseout | 在鼠标移出对象时发生 |
onmouseup | 在鼠标按键被松开时发生 |
onmousemove | 鼠标在对象上移动时发生 |
onmousedown | 在鼠标按键被按下时发生 |
onsubmit | 在表单中的确认按钮被点击时触发(主要用在 form标签) |
onresize | 在窗口大小被调整时发生(主要用于window上) |
onscroll | 在滚动条被拖动时触发 |
<head>
<style>
body{height:2000px;}
.box{width:200px;height:200px;background:#f00;overflow:auto;}
</style>
</head>
<body>
<div class="box" id="box">
<p>拖动</p>
<p>拖动</p>
</div>
<script>
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("我被点击了");
}
// 浏览器窗口尺寸发生改变时
window.onresize=function(){
console.log("我的尺寸被改变了");
}
// 拖动滚动条
window.onscroll=function(){
console.log("我被拖动了");
}
box.onscroll=function(){
console.log("我是DIV的滚动条");
}
</script>
</body>
4、键盘事件
onkeydown | 事件会在用户按下一个键盘按键时发生 |
onkeypress | 事件会在键盘按键被按下并释放一个键时发生 |
onkeyup | 事件会在键盘按键被松开时发生 |
keyCode | 获取按下的键盘按键的字符代码(配合键盘事件使用) |
<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>
5、其他常用事件
事件名称 | 描述 | 备注 |
---|---|---|
onload | 在页面元素加载完成后立即发生 | – |
onblur | 在对象失去焦点时发生 | 主要用于表单中 |
onfocus | 在对象获得焦点时发生 | 主要用于表单中 |
onchange | 在域的内容改变时发生 | 主要用在 select标签 |
-
onload
在页面或图像加载完成后立即发生。(注意html 文档的加载顺序)
<head>
<script>
// 页面加载时执行,unload页面卸载
window.onload=function(){
var box=document.getElementById("box");
var clicked=function(){
alert('我被点击了');
}
box.onclick=clicked;
}
</script>
</head>
<body>
<div id="box">这是一个DIV</div>
</body>
- onfocus、onblur
<head>
<script>
window.onload=function(){
var phone=document.getElementById("phone"), // 获取文本框
tip=document.getElementById("tip"); // 获取提示框
phone.onfocus=function(){ // 文本框绑定激活事件
tip.style.display='block'; // 让提示框显示
}
phone.onblur=function(){ // 文本框绑定失去焦点事件
var phoneVal=this.value; // 获取文本框的值
// 判断手机号码是否是11位的数字
if(phoneVal.length==11 && isNaN(phoneVal)==false){
tip.innerHTML='<img src="img/right.png">';
}else{
tip.innerHTML='<img src="img/error.png">';
}
}
}
</script>
</head>
<body>
<div>
<input type="text" id="phone" placeholder="请输入手机号码">
<div class="tip" id="tip" display="none">请输入有效的手机号码</div>
</div>
</body>
- onchange
<head>
<script>
window.onload=init; // 绑定onload事件
function init(){
var menu=document.getElementById("menu"); // 获取下拉菜单
// 给菜单绑定change事件,一般作用域select或checkbox或radio
menu.onchange=function(){
// 获取当前选中的值
var bgcolor=menu.options[menu.selectedIndex].value;
// var bgcolor=this.value; // 和上句等价
if(bgcolor==""){
document.body.style.background="#fff";
}else{
document.body.style.background=bgcolor;
}
}
}
</script>
</head>
<body>
<div class="box">
请选择您喜欢的背景色:
<select name="" id="menu">
<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>