js API

API ：Applaction Programming Interface

预先定义好的函数

webAPI：浏览器提供的一套操作浏览器功能和页面元素的api（Dom Bom）

alert() promet () concat() reverse() getElementById()

Js 的组成

ECMAscript BOM DOM

Dom的组成

文档：一个网页可以称为文档

元素：网页中的标签

属性：标签(元素)的属性

节点：网页中的所有内容都是节点（标签、属性、文本、注释、document等）

Dom的顶级对象 document Bom的顶级对象 window

获取元素的方式

• 通过Id获取 （单个元素）

document.getElementById('Id名')

• 通过类名获取 （多个元素）

document.getElementsByClassName('类名')

伪数组：拥有索引和长度length 也可以进行循环遍历 但是不能用数组中专有的方法

• 通过标签名获取 （多个元素）

document.getElementsByTagName('标签名')

• 通过name名获取（多个元素）

document.getElementsByName('name名')

• 通过querySelector()获取（获取指定选择器的第一个元素 参数是选择器 单个元素）

document.querySelector('选择器')

• 通过querySelectorAll()获取（获取指定选择器的所有元素 参数也是选择器）

document.querySelectorAll('选择器')

事件的初始

一、事件：从触发到响应

二、事件的三要素

1、事件源：被触发的元素

2、事件类型：事件触发方式（鼠标事件 键盘事件 浏览器事件）

onclick：单击事件 鼠标事件

3、处理程序：事件触发后要执行的代码（以函数形式返回）

三、绑定事件（重点）

事件源 . 事件类型=事件的处理程序

四、事件也是异步的（定时器）

五、this的指向：在事件函数中this指向事件源

事件的写法

1. 在内部书写
2. 在行内书写
3. 在外部书写 ( 单线程，从上到下 )

浏览器的完成事件

window.onload = funation(){
}

文本内容属性

1. innerText textContent 获取或者设置文本节点

2. innerHTML 获取或设置所有节点

对非表单元素的属性操作

1. 改变自身元素

2. 通过style设置样式

   注意在js设置样式，如果Css样式是连接符-连接的，要把连接符去掉 第二个单词首字母大写

3. 通过Class操作

   在Css中想要获取class属性，需要通过className获取 弊端：会覆盖原来的属性

   display：none 隐藏后不占位置

   visibility：hidden 隐藏后占位置

打印你想知道的元素的结构

console . dir( )

对表单元素的属性操作

checked 默认选中 表单单选框

window . lacation . herf =“网页链接”