javascript API (第一篇)

WEB API 概念
API(Application Programming Interface) 应用程序编程接口;

DOM的概念

所有的网页内容都被称之为节点
1. 文本节点
2. 注释节点
3. 属性节点
4. 元素节点
元素节点就是标签,在网页元素中使用率最高
DOM常见的操作元素

• 获取元素
• 对元素进行操作
• 动态创建元素
• 事件

获取页面元素
1.根据ID获取

document就是文档元素
在页面中根据ID获取元素 -->返回一个新的元素对象
返回一个字符串,字符串区分大小写
如果没有找到则返回null
document.getElementById();

2.根据标签名获取元素

//根据标签名获取元素,得到元素是一个伪数组,如果没有找到则返回null,length为0;
document.getElementsByTagName();
伪数组:有length值对象,有length值和属性就可以遍历,和真数组的区别在于不能使用真数组的一些属性和方法
//动态集合:获取元素后,如果页面添加新的元素,集合中也会动态添加

eg:根据id找到元素
var mv=document.getElementById('mv');  字符串
//找到id为mv的标签
var p=mv.getElementsByTagName('p');
//找到id为mv下面所有的p标签

3.根据标签名内获取元素

document.getElentsByClassName();  不常用不推荐使用

4.根据name来获取元素

document.getElentsByName(); 不常用不推荐使用

5.根据选择器获取元素(不做重点,基本不用)

//根据选择器获取元素,返回第一个匹配到的元素
document.querySelector()
//获取所有匹配的元素,多个
document.querySelectorAll()

事件

1.所有的元素都可以绑定事件

var btn=document.getElentById('btn');
为btn绑定点击事件

事件三要素
1.事件源 (元素)
2.事件类型
3.事件处理函数
事件源.事件类型=事件处理函数
eg: btn.οnclick=function(){};
*变量名不能是关键字:name
非标单元素
src
name
herf
alt
calssName
title
id
函数内部this的指向
1.全局函数时 this指向window
2.在对象方法调用中,指向当前调用的对象
3.构造函数的调用时指向新创建出来的那个对象.

事件就是方法的调用,所以在事件中的this就指向事件源
阻止a标签的默认行为

a.onclick=function(){
//a标签会跳转
此处可以直接
return false;
}

innerText和innerHTML

获取:(get)
innerText获取的是纯文本;
innerHTML获取的是带有标签的
设置:(set)
inneText:将内容装换为纯文本,如果内容包含html标签,也会解析成为文本,不会让浏览器来解析.
innerHTML:将内容装换为html代码,让浏览器来解析.
如果设置的内容是纯文本,innerText和innerHTML没有区别.

需要练习的案例
1. 点击按钮切换图片
2. 点击按钮显示隐藏div, 并修改按钮文字
3. 美女相册图片切换