Web API 笔记01
API (Application Programming Interface)
DOM (Document Object Model)
BOM (Browser Object Model)
Web API = DOM + BOM;
document–整个页面
document.documentElement–html标签
document.body–body标签
element–其他标签
获取元素
- 通过 id 获得元素：
<p id = "label"><p> <!-- 标签 -->
<script>
var byId = document.getElementById('label');
</script>返回的是元素，这种方法，在开始的时候浏览器会将页面所有的id名称预先加载，在调用的时候，如果找不到，会返回null。
- 获取相同类型的元素：
var byTagName = document.getElementsByTagName('div');注意是element s, 将符合条件的元素全部打包成为 伪数组 返回，如果没有元素，则返回一个空的伪数组 。
多用this，比如在循环遍历注册等中
事件：
事件源.事件名 = 事件处理函数();
比如：
byId.onmouseover = function () {
}如果是提前写好了函数，那么调用的时候可以
byId.onmouseover = fn ;//不加括号的函数名
```
**一定不能加括号**
对于```document.getElementsByTagName(); ```因为返回的是一个伪数组，所以添加事件的时候需要：
``` document.getElementsByTagName()[index]; ```指明是第几个元素。
- 关于```<a></a>```标签
a 标签本来是链接，如果href中什么都不写，那么就会**刷新**页面。
在给a标签注册事件的时候，需要**阻止a标签的默认行为**，解决办法是在事件处理函数最后一行添加一个
**return false;**
事件处理函数通常不需要返回值，仅仅为了执行里面的代码。
##操作元素的属性:##
在进行元素抓取并赋值之后，可以将元素的属性.出来进行重新赋值，
如：
<div class="se-preview-section-delimiter"></div>
var link = document.getElementById('link');
var btn = document.getElementById('btn');
btn.onclick = function () {
link.href = 'www.google.com';
}
“`
========================================================================
鼠标点击切换图片
btn.onclick = function () {
if (flag) {
img.src = '1';
flag = !flag;
}
else {
img.src = '2';
flag = !flag;
}
return false;
}
=============================
.innerText 和.innerHTML
.innerText 是获取标签内的文本
.innerHTML 是获取标签内的所有HTML标签及代码
********* 用于双标签，重新赋值会覆盖掉包括标签及代码在内的所有内容！******
如果重新赋值带标签（如 < p ></p >），
那么innerHTML会将标签解析，而innerText只会将其作为文本进行输入。
** 仅适用于双标签 **
=============================
其他选择方式：
document是指在整个文档当中找，注意 ** getElementById只能通过document调用 **。
也可在某个标签下面去找，多级连.即可。
拓展：存在兼容性问题的
document.getElementsByName();** 只能document能调用 **！通过标签的name属性来找，返回的也是伪数组。
document.getElementsByClassName(); 通过类名进行查找，返回伪数组。
document.querySelector(''); 按照选择器类型进行查找如id'#名字'，类'.example'，标签名等，返回找到的第一个。
document.querySelectorAll(''); 返回所有。
====================================================================
innerText在早期的火狐浏览器中不支持，变为textContent代替。
innerHTML不是W3C标准属性，但是所有浏览器都支持。
var link = document.getElementById('link');
var btn = document.getElementById('btn');
btn.onclick = function () {
link.href = 'www.google.com';
}- 鼠标点击切换图片
btn.onclick = function () {
if (flag) {
img.src = '1';
flag = !flag;
}
else {
img.src = '2';
flag = !flag;
}
return false;
}.innerText 和.innerHTML
- .innerText 是获取标签内的文本
- .innerHTML 是获取标签内的所有HTML标签及代码
用于双标签，重新赋值会覆盖掉包括标签及代码在内的所有内容！
如果重新赋值需要带标签（如 < p ></p >），
那么innerHTML会将标签解析，而innerText只会将其作为文本进行输入。
仅适用于双标签
其他选择方式：
- document是指在整个文档当中找，（注意getElementById只能通过document调用。）也可在某个标签下面去找，多级连.即可。
拓展：存在兼容性问题的
- document.getElementsByName();* 只能document能调用 *！通过标签的name属性来找，返回的也是伪数组。
- document.getElementsByClassName(); 通过类名进行查找，返回伪数组。
- document.querySelector(”); 按照选择器类型进行查找如id’#名字’，类’.example’，标签名等，返回找到的第一个。
- document.querySelectorAll(”); 返回所有。
innerText在早期的火狐浏览器中不支持，变为textContent代替。
innerHTML不是W3C标准属性，但是所有浏览器都支持。