了解API和获取元素

1.API与 Web API

1.API

API(应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
API是为我们程序员提供的一个接口,帮助我们实现某种功能, 所以会用就可以,不必去了解其内部结构。

2.Web API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
如果想要浏览器弹出一个警示框,直接使用alert(弹出)。
Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果,一般都有输入和输出(函数的传参和返回值),Web API很多都是方法(函数)。

DOM

文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

1.DOM树

DOM树
文档:一个页面就是一个文档,DOM中使用document表示。
元素:页面中的所有标签都是元素,DOM中使用element表示。
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示。
DOM把文档、元素和节点都看作是对象。

2.获取元素

1.根据ID获取

使用getElementById()方法可以获取带有ID的元素对象。
getElementByld()返回一个匹配特定的ID的元素。因为ID是独一无二的,所以是一个高效查找特定元素的方法。
id是大小写敏感的字符串。 因为括号中要求是字符串,所以getElementById(‘id’)要加单引号。
返回值是一个匹配到ID的DOM元素对象。
console.dir 打印我们返回的元素对象,可以更好的查看里面的属性和方法。

2.标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合。
返回值是获取的元素对象的集合,并以伪数组的形式储存。
可以使用遍历的方法依次打印里面的元素,可以使用for循环来完成,而且得到的元素是动态的,会随内容的变化而变化。
element.getElementsByTagName()可以得到这个元素里面的某些标签。

var nav = document.getEle,entById('nav');  //获取nav元素
var navlis = nav.getElementsByTagName('li');  //获取nav中的li元素

3.H5新增的获取方法

1.类名获取
getElementsByClassName根据类名获得某些元素集合。

var boxs =document.getElementsByClassName('box');
console.log(boxs);

2.document.querySelector(‘选择器’);
根据指定选择器返回第一个元素对象。
3.document.querySelectorAll(‘选择器’);
根据指定选择器返回。

5.获取特殊元素

获取body元素

var bodyEle=document.body;
console.log(bodyEle);

获取html元素

var htmlEle=document.documentElement;
console.log(htmlEle);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值