Web API简介
1.初识Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成,分别是ECMAScript、BOM和DOM,其中ECMAScript是JavaScript语言的核心,而Web API包括BOM和DOM两部分。
2. Web API与API的关系
(1)API
API:应用程序编程接口,是一些预先定义的函数,这些函数是由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码、无须理解其内部工作机制细节,只需知道如何使用即可。例如,调起手机的摄像头拍摄画面。
(2)Web API
Web API:主要针对浏览器的API,在JavaScript语言中被封装成了对象,通过调用对象的属性和方法就可以使用Web API。例如,console对象、document对象、window对象。
document.title = '设置新标题'; // 设置页面标题
console.log(document.title); // 获取页面标题
document.write('<h1>网页内容</h1>'); // 将字符串写入页面
DOM简介
1.什么是DOM
DOM(Document Object Model):文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C定义了一系列的DOM接口,利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。
2. DOM树
DOM中将HTML文档视为树结构,被称之为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面。
接下来针对DOM中各节点的专有名词解释如下:
- 文档(document):可以把一个页面当成一个文档
- 元素(element):页面中的所有标签都是元素
- 节点(node):网页中的所有内容,在文档树中都是节点(如:元素节点、属性节点、文本节点、注释节点等),在DOM中会把所有的节点都看作是对象,这些对象拥有自己的属性和方法
获取元素
1.根据id获取元素
document.getElementById(‘id’)方法,是由document对象提供的用于查找元素的方法,该方法返回的是拥有指定id的元素,如果没有找到指定id的元素则返回null,如果存在多个指定id的元素则返回undefined。
<body>
<div id="box"></div>
<script>
var d = document.getElementById("box")
console.log(d);
</script>
</body>
2.根据标签获取元素
根据标签名获取元素的两种方式:可以通过document对象获取元素和通过element对象获取元素。
document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');
由于相同标签名的元素可能有多个,上述方法返回的不是单个元素对象,而是一个集合。这个集合是一个类数组对象,或称为伪数组,它可以像数组一样用索引来访问元素,但不能使用push()等方法,使用Array.isArray()也可以证明它不是一个数组。
<body>
<div id="box"></div>
<script>
var d = document.getElementsByTagName("div");
console.log(d);
console.log(Array.isArray(d)); //结果为false
<