javascript 09 web API DOM

来源：cnblogs　　作者：筱宇衡　　时间：2021/6/7 9:11:47　　对本文有异议

API应用程序编程接口，是一些预先定义的函数，或方法。

任何开发语言都有自己的API

API的特征是输入和输出（I/O ）

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM经常进行的操作：

获取元素

对元素进行操作（设置属性或方法）

动态创建元素

事件

获取网页上的元素，返回一个对象：document.getElementById()，doucemnt.getElementsByTagName(' ')　　//id唯一，所以element不是复数，而Tag Name标签名可能很多不唯一，所以是复数

　　document.getElementById()　　返回一个对象

　　doucemnt.getElementsByTagName(' ')　　返回一个集合对象(动态集合，无关html执行顺序，都可以获取到)，有索引，也可遍历

　　定义一个变量接受标签的id属性(一般和id名称一致) var main= doucument.getElementById('id名')　　//get 获取，element 元素，by 根据，id 表标示

　　main= doucument.getElementById('id名')，main是一个对象。输出对象用console.dir()，可以输出所有属性和方法

获取二级标签：

</div>

var name = document.getElementById('name');

var divs = name.getElementsByTagName('div');　　//利用返回的name对象的属性，主要：id只能通过document对象来调用

其他获取元素的方法：有兼容问题，查文档

　　选择器获取：document.querySelector()　　id选择器可以获取一个，类选择器只能获取到第一个

　　　　　　　　document.querySelectorAll()　　//获取所有

事件：当什么时候做什么事　　触发-响应。事件都是on开头，是当……的时候的意思。例如onclick，当点击的时候。事件名称不是onclick，是click

<input type="button" id='bun' value='点我'>　　//制作一个按钮

bun=document.getElementById('bun');

bun.onclick = function(){alert('don't touch me!')}　　//设置事件处理函数

获取的元素一般和对应的标签有相同的属性：　　//注意，DOM对象的对应标签的class属性名字叫做className，因为class是关键字，关键字不可以作为属性名字

点击换图片案例：

<img src = "xxx" id='sss'>
 
<input type="button" id='bun' value='点我'>
 
<script>
 
　　var sss = document.getElementById('sss');
　　bun=document.getElementById('bun');
　　var flag = 1;　　//通过控制flag的数值来实现图片循环切换
　　//通过更改属性值来实现点击切换图片
　　bun.onclick = function(){
　　　　　　if(flag===1){
                      sss.src="yyy";
　　　　　　　　flag = 2;
　　　　　　　　　　　 }elseif(flag===2){
　　　　　　　　　　　　　　　sss.src="xxx";
　　　　　　　　　　　　　　　flag =1;
　　　　　　　　　　　　　　　　}　　
　　　　　　　　　　　　};　　
</script>

事件处理函数中的this：指向事件源，即调用该事件的对象

js控制css样式：object.style.display = 'none';　　//开发的时候css可能是别人写的，在不改变代码的前提下修改css就需要自己再写一个样式，通过class或者id来改变

取消<a>的默认行为(跳转)：

<a id = "qwe" href="xxxxx">百度</a>
qwe = document.getElementById('qwe');
qwe.onclick = function(){return false;}    //在事件中return false，超链接就不跳转了

获取标签集合的时候，需要其中每个标签触发事件可以用this。this指向事件源，即标签集合中的各个元素而不是标签的集合整体

<div id="kuai">
    <a href="">
        <img src="">
    </a>
    <a href="">
        <img src="">
    </a>
    <a href="">
        <img src="">
    </a>
    <a href="">
        <img src="">
    </a>
</div>
var kuai = document.getElementById('kuai');
//jihes 是a标签的集合
var jihes = kuai.getElementsByTagName('a');
for (var i = 0; i < jihes.length; i++) {
    var jihe = jihes[i];
    jihe.onclick = function(){
        var image = document.getElementById('image');
        image.src = this.src;    //此处只能用this不能用jihe。因为事件是在浏览器执行完代码之后触发的。用jihe.src的话只能找到最后一个遍历值。而this指向事件源，即遍历的元素中触发了事件的对象
        return false;
    } 
}