API之DOM
目录
- 概念
- 获取页面元素
- 事件
- 案例
今日脑图戳[http://naotu.baidu.com/file/3d881f30d54ae73d9a9292aa3e3275e3?token=701499b7426b44da]
DOM概念
- 文档对象模型（Document Object Model， 简称DOM）；
- 是标准的编程接口
- 又被称为文档树模型
- 文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
- 元素：网页中的标签
- 属性：标签的属性
- DOM经常进行的操作
- 获取元素
- 对元素进行操作(设置其属性或调用其方法)
- 动态创建元素
- 事件(什么时机做相应的操作)
获取页面元素
获取页面元素的原因
只有我们获取了页面元素以后，我们才可以对它进行操作
获取页面元素的方法
根据id名获取页面元素
var box = document.getElementById('box');
console.log(box);//返回 id为box的div
根据标签名获取页面元素
var msg = document.getElementsByTagName('div');
console.log(msg); //返回 HTMLCollection(n)，html中有几个div， n就为多少 是一个伪数组，可遍历
根据类名获取页面元素(有兼容性问题)
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
根据name获取页面元素(有兼容性问题)
var inputs = document.getElementsByName('hobby'); //用于form中
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
根据选择器获取元素(有兼容性问题)
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
事件
什么是事件
事件：触发-响应机制
事件三要素
- 事件源:触发(被)事件的元素 (.on事件名前面的就是事件源 )
- 事件名称: click 点击事件
- 事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
alert('别点我，ok？');
};
案例
- 点击按钮弹出提示框
<body>
<input type="button" value="点我" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert("Do not click again!");
}
</script>
</body>
- 点击按钮切换图片
//获取页面元素
var btn = document.getElementById('btn');
var mv = document.getElementById('mv');
//定义一个变量记录照片的状态
flag = 1;
//触发事件
btn.onclick = function() {
if (flag === 1) {
//mv是个伪数组，所以可以用对象的方法改变mv内的属性
mv.src = 'images/b.jpg';
flag = 2; // 让下一次点击时可以切换回上一张
} else if (flag === 2) {
mv.src = 'images/a.jpg';
flag = 1;
}
}
By for now！
