JS学习笔记——APIS

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

 API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。

DOM

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

DOM树

文档:一个页面就是一个文档, DOM中使用document表示。

元素:页面中的所有标签都是元素, DOM中使用element表示。

节点:网页中的所有内容都是节点(标签、属性、本、注释等) , DOM中使用node表示。

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

获取元素

DOM在我们实际开发中主要用来操作元素。
获取页面中的元素可以使用以下几种方式:

根据ID获取

根据标签名获取

通过HTML5新增的方法获取

特殊元素获取

根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象。

1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面

2. get获得element元素by通过驼峰命名法

3.参数id是大小写敏感的字符串

4.返回的是一个元素对象

5. console.dir打印我们返回的元素对象更好的查看里面的属性和方法

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

注意:

1.因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。

2.得到元素对象是动态的

3.如果页面中只有一个li返回的还是伪数组的形式

4.如果页面中没有这个元素返回的空的伪数组的形式

获取某个元素(父元素)内部所有指定标签名的子元素

element .getElementsByTagName ( '标签名');

元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括元素自己。

根据类名返回元素对象集合

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

根据指定选择器返回第一个元素对象 

document.querySelector ('选择器') ;// 根据指定选择器返回第一个元素对象

querySelectorAll( )返回指定选择器的所有元素对象集合

document.querySelectorA1l( '选择器'); // 根据指定选择器返回

获取特殊元素( body , html )

获取body元素

doucumnet.body  // 返回body元素对象

获取html元素

document.documentElement // 返回htm1元素对象

事件

JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。

简单理解:触发---响应机制。

1.事件是有三部分组成 事件源 事件类型 事件处理程序,我们也称为事件三要素。
(1) 事件源事件被触发的对象。
(2)事件类型，如何触发什么事件。比如鼠标点击(onclick)还是鼠标经过 还是键盘按下
(3)事件处理程序通过一个函数赋值的方式完成。

执行事件步骤
1.获取事件源
2.绑定事件注册事件
3.添加事件处理程序

常见的鼠标事件

 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

改变元素内容

element.innerText
从起始位置到终止位置的内容但它去除html标签，同时空格和换行也会去掉

element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行

innerText和innerHTML 的区别

1.innerText不识别html标签

2. innerHTML 识别html标签

样式属性操作

1. element.style  行内样式操作
2. element.className   类名样式操作

注意:

1.JS里面的样式采取驼峰命名法,比如fontSize、 backgroundColor

2.JS修改style样式操作,产生的是行内样式, Css权重比较高

表单操作

获得焦点事件   onfocus

失去焦点事件   onblur

 排他思想

如果有同一-组元素,我们想要某一个元素实现某种样式 ，需要用到循环的排他思想算法:

1.所有元素全部清除样式(干掉其他人)

2.给当前元素设置样式( 留下我自己)

3.注意顺序不能颠倒,先干掉其他人,设置自己

自定义属性的操作

1.获取属性值

element.属性 获取属性值。

element .getAttribute('属性');

区别:

element.属性获取内置属性值 (元愫本身自带的属性)

element .getAttribute( \属性');主要获得自定义的属性 (标准)我们程序员自定义的属性

2.设置属性值

element.属性=   '值'    设置内置属性值。

element. se