苏州注册公司网上核名,江门seo外包服务,乌兰察布盟建设银行网站,门户网站怎么做目 录 一.WebAPI 背景知识什么是 WebAPI什么是 APIAPI 参考文档 二.DOM 基本概念什么是 DOMDOM 树 三.获取元素querySelectorquerySelectorAll 四.事件初识基本概念事件三要素 五.操作元素获取/修改元素内容#xff08;innerHTML#xff09;获取/修改元素属性获取/修改样式属… 目 录 一.WebAPI 背景知识什么是 WebAPI什么是 APIAPI 参考文档 二.DOM 基本概念什么是 DOMDOM 树 三.获取元素querySelectorquerySelectorAll 四.事件初识基本概念事件三要素 五.操作元素获取/修改元素内容innerHTML获取/修改元素属性获取/修改样式属性 六.操作节点新增节点 七.代码案例 一.WebAPI 背景知识
什么是 WebAPI
前面学习的 JS 分成三个大的部分
ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器
WebAPI 就包含了 DOM BOM. 什么是 API
API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOMBOM
所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发. 相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂. API 参考文档
点击这里 可以在搜索引擎中按照 “MDN API 关键字” 的方式搜索, 也能快速找到需要的 API 文档. 二.DOM 基本概念
什么是 DOM
DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
网页内容网页结构网页样式 DOM 树
一个页面的结构是一个树形结构, 称为 DOM 树.
DOM 树结构形如 重要概念:
文档: 一个页面就是一个 文档, 使用 document 表示.元素: 页面中所有的标签都称为 元素. 使用 element 表示.节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.
这些文档等概念在 JS 代码中就对应一个个的对象. 所以才叫 “文档对象模型” . 三.获取元素
JS获取元素有很多种方式此处只介绍一种最强大最通用的方式。 querySelector
querySelector 是 document的方法document 是一个页面中内置的全局对象.(由浏览器提供出来的)页面加载成功显示出来了此时 document 就有了。 此时,就可以使用 elem 来表示这个h1标签同时可以通过 elem 获取到 h1 标签中的属性也可以用来修改了。 当有多个 h1 的时候标签选中的 h1 就是第一个 querySelectorAll
要想选多个元素,直接 querySelectorAll 即可用法和 querySelector 一样。 四.事件初识
基本概念
用户针对浏览器页面的每个动作都可以视为是 “事件”。 鼠标移动鼠标点击鼠标双击鼠标拖动键盘按键浏览器窗口改变浏览器位置改变… JS 要构建动态页面, 就需要感知到用户的行为.
用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作 浏览器就是一个哨兵, 在侦查敌情(用户行为). 一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略. 事件三要素
事件源: 哪个元素触发的事件类型: 是点击, 选中, 还是修改?事件处理程序: 事件出现之后要执行哪个代码 例如上述代码h1 就是事件源onclick 就是事件类型点击事件alert(‘hello’) 就是事件处理程序。 五.操作元素
获取/修改元素内容innerHTML
上述代码是把 JS 嵌入到 HTML 中了如果 JS 代码简单那还好如果 JS 代码复杂直接嵌入的方式就不太好。 本来 onclick 是空。这样的赋值就让 onclick 有东西了用户点击元素的时候浏览器会自动执行到 onclick 对应的方法
但是此处报错了 不能给null设置 onclick 属性
elem 成了 null自然不能 onclick然后 elem 为啥是 null? 说明上述 querySelector 没查到结果检查选择器写的对不对一检查发现选择器不应该为 . 发现它是 id应该是 #。
在这里打印的结果却是在控制台里面而不是在页面那我们如何在页面打印呢 当我们在刷新页面的时候会出现如下画面 多次点击后 、 设计一个自增的计数器每次点击按钮都会自增加一 每次点击都会自增 1 获取/修改元素属性 显示隐藏密码 获取/修改样式属性
行内样式操作
element.style.[属性名] [属性值];相当于是给元素加了内联样式(style属性来表示的样式) 此处的单位非常关键如果不写单位光写个100大概率是不生效的。 点击前 点击后 -提出来之后这里的属性名就不是带–的了而是变成了驼峰。
-在js 里是不能作为变量名的css里其实有很多的属性是这种的。
类名样式操作
element.className [CSS 类名];直接指定某个元素应用上某个css类名. 日间模式 夜间模式 相互切换 点击前 日间模式 点击后 夜间模式 六.操作节点
操作节点这个是针对页面上的元素进行增删
新增节点
创建元素节点
使用 createElement 方法来创建一个元素
插入节点到 dom 树中
先确定要把新元素放到哪个父节点下根据父节点使用 appendChild 方法。 另外还有一个 insertBefore 也能实现插入~插入到某个子元素的前面. 删除节点
先确定要删除元素的父节点然后再确定要删除的节点 删除前 删除后 七.代码案例
猜数字
先生成一个 1-100 的随机正数让用户输入一个要猜的数字程序来提示是猜的高了低了对了。
首先要先能够生成一个随机数字然后需要在页面上有一个输入框接下来还需要有一个 ‘提交按钮’最后还得有区域来显示结果
由于 JS 的 Math.random()生成的随机数,是一个[01)之间的小数那么我么需要将 N*1001 即可得到区域为 [1101)再向下取整即可得到 [0100]的区域。 表白墙
