Web API笔记01 DOM元素基础使用

1.概述

• API：application programming interface（应用程序接口）
• Web API：浏览器给我们提供了一些函数，帮助我们开发
• DOM：document Object Model（文档对象模型）

2.获取元素

2.1根据id找元素

• document.getElementById（）

		var div = document.getElementById('div');
        console.log(div);  //div元素对象
        console.dir(div);

2.2根据标签名找元素

• document.getElementByTagName()
• 获取过来元素对象的集合，返回值永远是一个伪数组

		var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        for(var i = 0; i < lis.length; i++){
   
            console.log(lis[i]);
        }

2.3根据类名找元素

• document.gerElementByClassName()

		var one = document.getElementsByClassName('one');
        console.log(one);

2.4H5中新增的

• document.querySelector(‘css选择器’)
• 返回值永远是一个DOM对象，即使匹配到了多个，也以第一个为准

		var lis = document.querySelector('.one');
        console.log(lis);

• document.querySelectorAll(‘css选择器’)
• 返回值永远是一个伪数组，元素是真正的DOM

		var divs = document.querySelectorAll('div');
        console.log(divs)