前言
之前学习JS基础阶段，我们学习的是 ECMAScript标准规定的基本语法，目的是为了JS后面的课程打基础、做铺垫， 因为只学习基本语法,做不了常用的网页交互效果，所以就需要webAPIS， Web APIs是W3C组织的标准，它主要学习DOM和BOM，是我们JS所独有的部分，我们主要学习页面交互功能，目前先了解一下DOM对象。
一、DOM介绍
1.什么是DOM
文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容.结构和样式。
文档: 一个页面就是一个文档, DOM中使用document表示
元素:页面中的所有标签都是元素，DOM中使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等) DOM中使用node表示
2.获取元素方式
DOM在我们实际开发中主要用来操作元素
获取页面中的元素可以使用以下几种方式
根据ID获取
根据标签名获取.
通过HTML5新增的方法获取
特殊元素获取
2.1根据ID获取
使用getElementByld0方法可以获取带有ID的元素对象。
参数id是大小写敏感的字符串
var timer = document. getElementById(' time ' );
因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
2.2根据标签名获取
使用getElementsByTagName0方法可以返回带有指定标签名的对象的集合。
.返回的是 获取过来元素对象的集合以伪数组的形 式存储的
element. getE lementsByTagName( )可以得到这个元素里面的某些标签
我们想要依次打印里面的元素对象我们可以采取遍历的方式
2.3通过HTML5新增的方法获取
1. document . getElementsByClassName(类名') ;
根据类名返回元素对象集合
2. document . querySeleator (选择器');
querySelector 返回指定选择器的第一 个元素对象 切记里面的选择器需要加符号，类要加点.id要加 #nav
//根据指定选择器返回第一个元素对象
3. document . querySelectorA1l( '选择器');
querySelectorA1l( )返回指定选择器的所有元素对象集合
2.4获取特殊元素( body , html )
获取body元素
doucumnet. body // 返回body元素对象
获取htmI元素
document .documentElement // 返回htm1元素对象
二、事件和样式操作
1.事件基础
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
事件是有三部分组成 事件源 事件类型 事件处理程序，也称为事件三要素
(1)事件源 事件被触发的对象
(2) 事件类型 如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下
(3) 事件处理程序 通过个函数赋值的方式 完成
2.执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
3.常见的鼠标事件
鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
4.操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
4.1改变元素内容
element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 不识别html标签
element.inne rHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 识别html标签
两个都可以改变元素的内容
innerText 和innerHTML的区别
innerText 不识别html标签非标准,去除空格和换行
innerHTML 识别html标签W3C标准保留空格和换行的 推荐使用
4.2常用元素的属性操作
1. innerText、 innerHTML 改变元素内容
2. src. href
3. id. alt、title
4.3表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type、value、 checked. selected、 disabled
表单里面的值 文字内容是通过value 来修改的
4.4样式属性操作
通过JS修改元素的大小、颜色、位置等样式。
1. element. style
行内样式操作
使用element.style 获得修改元素样式如果样式比较少 或者功能简单的情况下使用
2. element . className类名样式操作
我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况
注意:
- 如果样式修改较多,可以采取操作类名方式更改元素样式。
- class因为是个保留字,因此使用className来操作元素类名属性
- className 会直接更改元素的类名,会覆盖原先的类名。
4.5排他思想
如果有同一组元素,我们想要某一个元素实现某种样式，需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
4.6自定义属性的操作
1.获取属性值
●element. 属性 获取属性值。
●element . getAttribute('属性');
区别:
●element. 属性获取内置属性值(元素本身自带的属性)
●element .getAttribute(’属性' );主要获得自定义的属性 ( 标准)我们程序员自定义的属性
2.设置属性值
●element.属性= '值'
设置内置属性值。
element . setAttribute('属性'，'值') ;
区别:
●element. 属性
设置内置属性值
●element. setAttribute(、属性);主要设置自定义的属性 ( 标准)
3.移除属性
●element . removeAttribute (属性') ;
三、相关的案例展示
1、密码框验证
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>密码框验证</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.pwd {
display: inline-block;
font-size: 12px;
color: #999;
background: url(image/mess.png) no-repeat;
padding-left: 20px;
}
.wrong {
color: red;
background: url(image/wrong.png) no-repeat;
}
.right {
color: green;
background: url(image/right.png) no-repeat;
}
</style>
</head>
</html>script内容
<body>
<div>
<input type="password" value="" class="inp">
<p class="pwd">请输入6~16位的密码</p>
</div>
<script>
// <!-- ①首先判断的事件是表单失去焦点onblur
// ②如果输入正确则提示正确的信息颜色为绿色小图标变化
// ③如果输入不是6到16位,则提示错误信息颜色为红色小图标变化
// ④因为里面变化样式较多,我们采取className修改样式
// -->
var inp = document.querySelector('.inp');
var pwd = document.querySelector('.pwd');
inp.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
pwd.className = 'pwd wrong';
pwd.innerHTML = '你输入的密码不对！';
} else {
pwd.className = 'pwd right';
pwd.innerHTML = '你输入的密码正确';
}
}
</script>
</body>2、显示当前系统时间（修改元素的内容）
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>显示当前系统时间</title>
<style>
div {
width: 300px;
height: 100px;
line-height: 100px;
background-color: brown;
color: black;
}
</style>
</head>
</html>script
<body>
<button>显示当前系统时间</button>
<div>时间点</div>
<script>
var btn = document.querySelector('button');
var time = document.querySelector('div');
btn.onclick = function() {
time.innerHTML = times();
}
function times() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var zm = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//时分秒
var h = date.getHours();
h = h < 10 ? '0' + h : h;
var m = date.getMinutes();
m = m < 10 ? '0' + m : m;
var s = date.getSeconds();
s = s < 10 ? '0' + s : s;
// alert('今天是' + year + '年' + month + '月' + dates + '日 ' + arr[zm]);
return '今天是' + year + '年' + month + '月' + dates + '日 ' + arr[zm] + h + ':' + m + ':' + s;
}
</script>
</body>
总结
在Web APls阶段，首先掌握JS基础语法，需要使用JS基础的课程内容做基础
JS基础学习ECMAScript基础语法为后面作铺垫，web APIs是JS的应用，会大量使用JS基础语法做交互效果。
3674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
