JavaScript深入介绍WebAPI的用法

目录

• 什么是WebAPI
• DOM
• 获取元素
• querySelector
• querySelectorAll
• 事件
• 事件三要素
• 操作元素
• 获取/修改元素内容
• 获取/修改元素属性
• 获取修改表单元素属性

什么是WebAPI

WebAPI就是 DOM API + BOM API

DOM

W3C标准给我们提供了一系列的函数，让我们可以操作：网页内容、网页结构、网页样式、

一个网页的页面结构如：

链接

我的标题

几个重要概念：

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

获取元素

类似于CSS选择器的功能

querySelector

var elem = document . querySelector ( selectors );

querySelectorAll

abc
def

事件

事件三要素

1. 事件源 : 哪个元素触发的

2. 事件类型 : 是点击 , 选中 , 还是修改 ?

3. 事件处理程序 : 进一步如何处理， 往往是一个回调函数 .

操作元素

获取/修改元素内容

innerText

使用示例：

    hello world
    hello world

innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代 使用示例：

    hello world
    hello world

获取/修改元素属性

//修改属性


//获取属性

获取修改表单元素属性

表单 ( 主要是指 input 标签 ) 的以下属性都可以通过 DOM 来修改

• value: input 的值.
• disabled: 禁用
• checked: 复选框会使用
• selected: 下拉框会使用
• type: input 的类型(文本, 密码, 按钮, 文件等)

代码示例：

到此这篇关于JavaScript深入介绍WebAPI的用法的文章就介绍到这了,更多相关JavaScript WebAPI内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！