JS的DOM和BOM学习第一天
JS BOM和DOM学习第一天
1.web APIs和js基础关联性
1.1 js的组成
1.2 js基础和web APIs的不同
- js基础做不了常用的网页效果
- APIs可以使用页面交互功能
1.3 API
- API(应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力
- API是给程序员提供的一种工具，以便更轻松的实现想要完成的功能
1.4 Web ApI
- web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM 和 DOM)
- MDN 中详细API：<Web API 接口参考 | MDN (mozilla.org)>
1.5 API 的总结
-
API是为我们程序员提供的一个接口，帮助我们实现某种功能，不必纠结内部如何实现（提高效率）
-
Web API 主要针对浏览器提供的接口，针对于浏览器做交互效果
-
Web ApI 很多都是方法（函数），如alert（‘666’），弹出警示框，就是web api（浏览器提供）
2. DOM
2.1 什么是DOM
- 文档对象模型（Document Object Model，DOM），是处理可扩展标记语言（HTML）的标准编程接口
- 通过DOM接口可以改变网页的内容，结构，样式
2.2 DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM中用element表示
- 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中用node表示
注意点
- DOM把以上内容都看作对象
3. 获取元素
- DOM获取网页中的元素方法
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增方法获取
- 特殊元素获取
3.1 根据ID获取
- 使用getElementById()方法可以获取带有ID的元素对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 带id名的元素 -->
<div id="time">2019.9.9</div>
<!-- 浏览器从上往下执行，script写在下面 -->
<script>
// 根据id选择元素
var timer=document.getElementById('time');
// 返回值是对象
console.log(typeof timer);
console.log(timer);
// 打印出该对象的属性和方法
console.dir(timer);
</script>
</body>
</html>
- 效果图
3.2 根据标签名获取元素
- 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
3.2.1 获取页面所有符合的标签
document.getElementsByTagName('标签名');
3.2.2 获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
注意点
- 该方法返回的是一个对象的集合，伪数组形式呈现
- 得到的元素对象是动态的，标签内的内容改变，获取的对象内容也改变
- 如果获取不到元素，则返回空的对象集合
- 父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素本身
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我是大傻逼1</li>
<li>我是大傻逼2</li>
<li>我是大傻逼3</li>
</ul>
<ol>
<li>我是内部1</li>
<li>我是内部2</li>
<li>我是内部3</li>
</ol>
<script>
// 选择页面中的所有li标签
var list=document.getElementsByTagName('li');
// 返回的是对象的集合，以伪数组的形式呈现
console.log(list);
// 遍历集合（伪数组）
for(var i=0;i<list.length;i++){
console.log(list[i]);
}
// 但页面中没有该标签是，返回空集合
var list2=document.getElementsByTagName('div');
console.log(list2);
// 根据父元素获取子元素
// 必须指明父元素对象
var ol=document.getElementsByTagName('ol');
// 获取子元素
var list3=ol[0].getElementsByTagName('li');
console.log(list3);
</script>
</body>
</html>
- 效果图
3.3 根据HTML5新增方法获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<a href="#">1</a>
<a href="#">2</a>
<p>3</p>
</div>
<script>
// 根据类名获取元素对象集合,HTMLcollection
var list1=document.getElementsByClassName('box');
console.log(list1);
// 根据指定选择器返回第一个对象,不是对象集合
var list2=document.querySelector('.box a');
console.log(list2);
// 根据指定选择器返回对象集合Nodelist
var list3=document.querySelectorAll('.box a');
console.log(list3);
console.log(list3[1]);
</script>
</body>
</html>
- 效果图
3.4 获取特殊元素(body和HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 获取body元素对象
var bodyEle=document.body;
console.log(bodyEle);
// 获取html元素对象
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
</body>
</html>
- 效果图
4. 事件基础
- 触发-响应机制
- 网页中的每个元素都可以产生某些可以触发JavaScript的世界，例如鼠标点击产生一个事件，然后去执行某些操作
4.1 事件三要素
- 事件源（谁）
- 事件类型（什么事件）
- 事件处理程序（干什么）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
// 事件源
var btn=document.getElementById('btn');
// 事件类型和处理程序
btn.onclick=function(){
alert('你好');
}
</script>
</body>
</html>
- 效果图
4.2 执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
4.3 常见的鼠标事件
| 鼠标事件 | 触法条件 |
|---|---|
| onclick | 鼠标单击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获取鼠标焦点触法 |
| onblur | 失去鼠标焦点触法 |
| onmousemove | 鼠标移动触法 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
5. 操作元素
5.1 改变元素内容
element.innerText
- 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉,不识别html标签
element.innerHTML
- 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行，识别html标签
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,p{
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示事件</button>
<div></div>
<p></p>
<script>
// 单击按钮，显示时间
var btn=document.querySelector('button');
var div=document.querySelector('div');
// 绑定事件
btn.onclick=function(){
div.innerText=getDate();
}
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1; //数组存储，少一，要加上
var dates=date.getDate();
var arr=['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
var day=date.getDay();
return'今天是：'+year+'年'+month+'月'+dates+'日'+arr[day];
}
// p标签直接显示时间
var p=document.querySelector('p');
p.innerText=getDate();
</script>
</body>
</html>
- 效果图
innerText与innerHTML的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<div>
</div>
<div class="box">
1123
<span>666</span>
</div>
<script>
// innerText不识别HTML标签
var p=document.querySelector('p');
p.innerText='<strong>我是大傻逼</strong>';
console.log(p);
// innerHTML识别HTML标签
var div=document.querySelector('div');
div.innerHTML='<strong>我是大傻逼</strong>';
console.log(div);
// innerText不保留空格，换行，去除了html标签
var box=document.querySelector('.box');
console.log(box.innerText);
console.log(box.innerHTML);
</script>
</body>
</html>
- 效果图
图片切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 300px;
display: block;
}
</style>
</head>
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="./images/ldh.jpg" alt="">
<script>
// 获取对象
var ldh=document.getElementById('ldh');
var zxy=document.getElementById('zxy');
var img=document.querySelector('img');
// 绑定事件和函数
ldh.onclick=function(){
img.src='./images/ldh.jpg';
}
zxy.onclick=function(){
img.src='./images/zxy.jpg';
}
</script>
</body>
</html>
- 效果图
5.2 表单元素的属性操作
- 利用DOM可以操作如下表单元素的属性
- type，value，checked，selected，disabled
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 修改表单元素的内容，innerHTML不适用，需要使用value属性
var btn=document.querySelector('button');
var input=document.querySelector('input');
// 当按钮被点击，input元素中的内容发生改变
btn.onclick=function(){
input.value='666';
// 同时禁用按钮
btn.disabled=true;
}
</script>
</body>
</html>
- 效果图
仿京东登录界面案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 400px;
/* height: 100px; */
/* background-color: pink; */
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 370px;
height: 30px;
border: none;
outline: none;
}
.box img{
width: 24px;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<!-- 密码框布局 -->
<div class="box">
<input type="password" id="psw">
<label for="">
<img src="./images/close.png" alt="" id="img">
</label>
</div>
<!-- 交互效果 -->
<script>
// 获取对象
var psw=document.getElementById('psw');
var img=document.getElementById('img');
// 绑定事件
var flag=0;
img.onclick=function(){
if(flag==0){
img.src='./images/open.png';
psw.type='text';
flag=1;
}else if(flag==1){
img.src='./images/close.png';
psw.type='password';
flag=0;
}
}
</script>
</body>
</html>
- 效果图
5.3 样式属性操作
- 可以通过js修改元素的大小，颜色，位置等样式
element.style //行内样式操作
element.className //类名样式操作
注意点
- js里面的样式采取驼峰命名法，比如fontSize、backgroundColor
- js修改style样式操作，产生的是行内样式，css权重较高
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
// 操作样式
var div=document.querySelector('div');
div.onclick=function(){
// 修改行内样式
this.style.backgroundColor='green';
this.style.width='100px';
}
</script>
</body>
</html>
- 效果图
循环精灵图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 250px;
/* height: 250px; */
/* background-color: pink; */
margin: 100px auto;
}
ul{
list-style: none;
overflow: hidden;
}
.box li{
float: left;
margin: 15px;
width: 24px;
height: 24px;
background: url('./images/sprite.png') no-repeat;
background-position: 0 0;
/* background-color: blue; */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 根据循环来实现精灵图排布
var list=document.querySelectorAll('li');
for(var i=0;i<list.length;i++){
list[i].style.backgroundPosition='0 -'+i*44+'px';
}
</script>
</body>
</html>
- 效果图
搜索框显示隐藏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="手机">
<script>
var input=document.querySelector('input');
input.onfocus=function(){
if(this.value==='手机'){
this.value='';
}
this.style.color='#333';
}
input.onblur=function(){
if(this.value===''){
this.value='手机';
}
this.style.color='#999';
}
</script>
</body>
</html>
- 效果图
5.4 使用类名操作样式
- element.className 类名样式操作
注意点
- 如果样式修改较多，可以采取操作类名的方式更改元素样式
- class因为是保留字，因此使用className来操作元素类名属性
- className会直接更改元素的类名，会覆盖原先的类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
color: blue;
background-color: pink;
font-size: 10px;
}
/* 用于修改的类名 */
.change{
height: 300px;
color: #fff;
background-color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div>内容</div>
<script>
var div=document.querySelector('div');
div.onclick=function(){
div.className='change';
}
</script>
</body>
</html>
- 效果图
6. 总结
浙公网安备 33010602011771号