JavaScript笔记(11)之Web APIs阶段 获取元素

我们之前学的呢,都是JS的基础部分,也就是ECMA规定的语法,后面我们就要学习BOM和DOM了.

JS基础阶段

• 我们学习的是ECMAscript标准规定的基本语法
• 要求掌握JS的语法
• 只学习基本语法,做不了常用的网页交互效果
• 目的是为了JS后面的课程打基础,做铺垫.

Web APIs阶段

• Web APIs是w3c组织的标准
• Web APIs我们主要学习DOM和BOM
• Web APIs是我们JS独有的部分
• 我们主要学习页面交互效果
• 需要使用JS基础的课程内容做铺垫

JS基础学习ECMAScript基础语法为后面做铺垫,Web APIs是JS的应用,大量使用基础语法做交互效果.

API

(Application Programming Interface)应用程序接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节

简单理解: API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能.

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM).现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果.

DOM

什么是DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

W3C已经定义了一系列的DOM接口,通过这个DOM接口可以改变网页的内容,结构和样式.

DOM树

• 文档:一个页面就是一个文档,DOM中使用document表示
• 元素:网页中所有的标签都是元素,DOM中用element表示
• 节点:网页中的所有内容都是节点(标签/属性/文本/注释等),DOM中使用node表示

DOM把以上所有内容都看做是对象.

如何获取页面元素

获取页面元素可以使用以下几种方式:

• 根据ID获取
• 根据标签名获取
• 通过HTML5获取
• 特殊元素获取

1.根据ID获取

使用 getElementById( ) 方法可以获取带有ID的元素对象, 参数Id是大小写敏感的字符串, 返回的是一个元素对象.

打印出来的结果,就是我们的timer标签

我们查看一下返回的结果:

现在我们学习一个新的方法console.dir( ),可以返回我们的元素对象,更好的查看对象的属性和方法.

2.根据标签名获取

根据 getElementsByTagName( ) 方法可以返回带有指定标签名的对象的集合.

返回的是伪数组.

我们也可以遍历这5个li,使用遍历的方法就可以了.

注意:

• 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历.
• 得到的元素是动态的
• 如果页面中只有一个li,返回的还是伪数组的形式
• 如果页面中没有这个元素返回的是空的伪数组.

假如我们现在有ul,也有ol,但是我们只想要ol里面的li标签,那该怎么办呢?我们可以使用:

elements.getElementsByTagName('标签名')

注意:父元素必须是单个对象,必须指明是哪一个元素对象,获取的时候不包括父元素自己.

注意一定是ol[index],一定要指明是第几个ol,否则会报错

但是在开发中更常用到的方法是给ol指定一个id,因为id是唯一的.

根据HTML5获取

document.getElementsByClassName('类名') : 根据类名返回元素对象合集

上面的方法都有些繁琐了,现在有一个更新的方法, document.querySelector() 可以直接帮我们选出选择器,但是只能返回指定选择器的第一个元素对象

这个虽然简便了很多但还是有缺陷的,所以下面就说一个更加完美的.

document.querySelectorAll('选择器')

最后,我们还可以获取比较特殊的body和html标签,因为他们特殊,所以也有特殊的方法去获取.

‍‍‍‍‍‍‍‍‍‍‍document.body ‍‍‍‍‍‍‍‍‍‍‍

但是获取html的方法又不同了

document.documentElement

接下来讲事件基础了