1、API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了
Web API主要是针对浏览器提供的接口,主要针对浏览器做交互效果
2、DOM:文档对象模型,
通过DOM接口可以改变页网页的内容,结构和样式
我们获取过来的DOM元素是一个对象(obj),所以我们称之为文档对象模型
3、文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中所有的标签都是元素 Element
节点:网页中的所有内容都是节点(标签,属性,文本,注释等)
DOM把以上所有内容都看作对象
一、获取页面元素
1、如何获取页面元素
(1)根据ID获取
document . getElementById ( 'id ') 获取带有ID的元素对象
1、id是大小写敏感的字符串;因此一定要写成字符串的形式
2、返回的是一个元素对象
3、 console.dir(timer) 可以打印我们返回的元素对象,更好的查看里面的属性和方法
注意:因为页面文档从上往下加载,所以先得有标签,所以在学习的时候我们script写到标签的下面
(2)根据标签名获取
document .getElementsByTagName ( ’ 标签名’ ) 方法可以返回带有指定标签名的对象的集合
1、返回的是获取过来元素对象的集合,以伪数组的形式存储的
2、如果想要一次打印里面的元素对象,可以采取遍历的方式
3、可以采取element . getElementsByTagName,可以得到这个元素里面的某些标签
(3)通过HTML5新增的方法获取
document .getElementsByClassName ( ’ 类名’ ) ,根据类名获得某些元素
document . querySelector(’ 选择器’) ;根据指定选择器,返回第一个元素对象
切记括号里面需要加符号:#是表示ID选择器; . 表示class选择器;
document . querySelectorAll(’ 选择器’) ;根据指定选择器返回所有的元素对象,
(4)获取body元素
document . body;
获取HTML元素
document . documentElement
二、事件
1、事件
事件由三部分组成:事件源,事件类型,事件处理程序
事件源:事件被触发的对象 ( 谁被触发?)
事件类型:如何让触发,什么事件,比如鼠标点击触发(onclick),鼠标经过触发或者键盘按下触发 (通过什么被触发?)
事件处理程序:通过一个函数赋值的方式来完成 (做了什么事?)
eg:
唐伯虎
(1)执行事件的步骤
1、获取事件源 (获取了事件源才能进行操作)
2、注册事件(绑定事件)
3、添加事件处理程序(采取函数赋值的形式)
三、操作元素
1、操作元素
(1)改变元素的内容
element . innerText (非标准)
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
element . innerHTML (使用最多!!!)
从起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行,针对普通盒子才使用,对表单不适用
两者的区别:
(1)、element . innerText不识别HTML标签,element . innerHTML要识别HTML标签,
(2)两者都是可读取的,可以获取元素里面的内容,也可以往里面添加内容
注意:我们元素也可以不添加事件(这样就会在页面上一直显示,只要一运行就会显示在页面上)
eg: var p = document.querySelector(‘p’);
p.innerHtml = getTime();
这里就没有添加事件
(2)修改元素的属性
元素 . 属性值=‘要修改的值’
eg: // 获取元素
var ldh = document.getElementById(‘ldh’);
var zxy = document.getElementById(‘zxy’);
var img = document.querySelector(‘img’);
// 注册事假,处理程序
zxy.onclick = function() {
img.src = ‘images/zxy.jpg’;
img.title = ‘张学友’;
}
(3)表单元素的属性操作
表单最常见的属性:type,value,checked,selected,disabled(禁用按钮,鼠标点击了一次后就不能再点了,就变成了灰色的了)
1、表单输入的密码显示可见和不可见
要用flag 来做
eg : var flag = 0;
img.onclick = function() {
// 点击一次后,flag的值一定要发生变化,要不然就只能点一次
if (flag == 0) {
input.type = ‘text’;
img.src = ‘images/open.png’;
flag = 1; // 如果flag一直是0,那么就不会转换了,一次一定要重新赋值flag
} else {
input.type = ‘password’;
img.src = ‘images/close.png’;
flag = 0;
}
}
这里面的 onclick 就相当于循环,你点击一次,里面的函数语句执行一次,再点击一次,又重新执行
(4)样式属性操作
通过JS修改元素的大小,颜色和位置等样式
element . style:行内样式操作 (适用于修改的样式比较少)
他会把在JS中写的样式添加到HTML代码中的行内样式里面去,因此他的权重比CSS权重高
element . className: 类名样式操作 (适用于修改的样式比较多)
className会直接更改元素的类名,覆盖原先的类名
若果想要保留原来的类名可以这样写(多类名选择器):
element . className=’ 原来的类名 现在的类名 ’
eg:
eg : 精灵图用for循环做的例子
// 获取元素
var lis = document.querySelectorAll(‘li’);
for (var i = 0; i < lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = ‘0 -’ + index + ‘px’;
// X坐标和Y坐标之间用空格
}
(5)表单新事件
onfocus:获得焦点
onblur:失去焦点
显示隐藏文本框里面的内容的例子:
<input type="text" value="手机">
<script>
// 获取元素
var text = document.querySelector('input');
// 注册事件,获得焦点事件
text.onfocus = function() {
if (this.value === '手机') {
this.value = '';
}
// 当我们在文本框里面输入文字,里面的文字颜色要加深
this.style.color = 'black';
}
// 注册事件,失去焦点事件
text.onblur = function() {
if (this.value === '') {
this.value = '手机';
}
// 当不输入文字的时候,手机这两个字又要变回以前的颜色
this.style.color = '#ccc';
}
</script>