Web API基础内容

Web API基础理论

js的三部分
1、ECMAScript js的基本语法
2、DOM 文档对象模型，操作的是页面的元素
3、BOM 浏览器对象模型，操作是浏览器
文档：html文件，由于万物皆对象，这个文档也可以看成一个对象
页面中的每一个标签都是一个元素
节点（node）：页面中所有的元素都是节点，标签 文本 属性
根节点（root）:html
由文档中所有的元素组成的树形结构图，叫做DOM树?

js获取DOM元素常用的方法

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName返回的是伪数组）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
别忘了，以上方法前要加上document

关于伪数组的特点

1、本质是对象
2、具有length属性
3、具有数组的属性，不具有数组的方法
4、可以按照索引的方式来储存数据 （arguments也是返回的伪数组）
5、伪数组不能调用DOM对象的方法或属性
总结：伪数组无法直接调用数组方法或期望length属性有什么特殊的行为，不具有数组的push()、pop()等方法，但仍可以用真正数组遍历方法来遍历它们。这种对象有很多，比较特别的是function内的arguments对象，还有像调用getElementsByTagName, document.childNodes之类的，它们都返回的NodeList对象都属于伪数组，也称为类数组，还有自定义的对象，也属于伪数组。
我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变为真正的Array对象。

例：关于this的指向

	var imgObj=document.getElementsByTagName("img")[0];
    imgObj.onclick=function () {
        this.height="200";
        this.width="200";
    }
	在某个元素的事件中，this指的是当前的这个元素对象（谁调用它，this就指向谁）

例：排插功能

排插功能，反正没搞懂为什么叫这个名 ?，类似于tab选项卡切换吧，效果图如下

 var btnObj= document.getElementsByTagName("button");
    for(var i=0;i<btnObj.length;i++){
        btnObj[i].onclick=function () {
            for(var j=0;j<btnObj.length;j++){
                btnObj[j].innerText="我要变红";
                btnObj[j].style.color="black";
            }
            this.innerText="我红了";
            this.style.color="red";
        }
    }

排插功能效果 VS tab选项卡切换效果