1、API、DOM、获取元素、事件、文本节点、属性操作

一、API的介绍

1、什么是API:

  • API:Application Programming Interface,应用程序编程接口
  • 预先定义好的函数

2、js中API的分类:

  • 1、数据类的API:reverse() toFixed() Boolean() charAt()…
  • 2、BOM:log() alert() prompt()…
  • 3、DOM:write…

3、DOM:文档对象模型

  • 将所有的元素(标签)看成对象

4、DOM树:

1、API、DOM、获取元素、事件、文本节点、属性操作_第1张图片

  • 元素 等于 标签 函数 等于 方法
  • 1、DOM的顶级对象是document对象
  • 2、节点:网页中的所有内容都是节点(标签,属性,文本,注释…)
  • 3、操作DOM就是操作DOM节点

二、获取元素的方式(六种)

1、通过ID获取元素 单个元素

document.getElementById(head)

2、通过类名获取元素 多个元素

document.getElementsByClassName[2]

伪数组:具有数组的某些特性,索引、长度、for、循环遍历,但是数组的专有API不能用

3、通过标签名获取元素 多个元素

document.getElementsByTagName('section')[2]

4、通过name名获取元素 多个元素

var userObj = document.getElementsByName('user')[2]

注意:

querySelector()和querySelecttorAll()中id必须写#,class必须写 . ,否则会获取不到 出现null

5、通过querySelector()获取元素 单个元素

document.querySelector('.sec')

image-20240125162803947

6、通过querySelecttorAll()获取所有元素 多个元素

document.querySelectorAll('#list>li')

注意:

获取 ul下的li的方法:

  • 不建议用标签名直接获取,因为后期做项目,可能会有好多个列表
<ul id = "list">
	<li>111li>
	<li>222li>
	<li>333li>
ul>
  var liObjs = document.querySeletctor("#list>li")
  var liObjs = document.getElementById("list").document.getElementByTangName("li").`

7、小提可以直接获取的元素

document.body

8、==小提示:==不能通过元素.属性名获取和设置自定义属性

二、事件

1、事件:触发----->响应

2、事件的三要素:

  • 事件源:触发的DOM元素或者浏览器
  • 事件的类型:事件的触发方式(鼠标事件、键盘事件、浏览器事件)
  • 事件的处理程序:事件触发后要执行的代码(函数形式)

3、绑定事件的语法

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

4、鼠标的单击事件:onclick

5、事件是异步操作

1、API、DOM、获取元素、事件、文本节点、属性操作_第2张图片

6、事件的书写方式

1、内部script标签中书写

注意:

你可能感兴趣的:(javascript)