本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于javascript webapi的相关问题，包括了webapi 背景知识、获取元素、操作元素、操作节点以及一些案例分享，下面一起来看一下吧，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
1. WebAPI 背景知识
1.1 什么是 WebAPI
JS 分成三个大的部分:
- ECMAScript: 基础语法部分
- DOM API: 操作页面结构
- BOM API: 操作浏览器
WebAPI 就包含了 DOM + BOM.
立即学习“Java免费学习笔记（深入）”；
1.2 DOM 基本概念
什么是 DOM
DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
- 网页内容
- 网页结构
- 网页样式
DOM 树
一个页面的结构是一个树形结构, 称为 DOM 树.
重要概念:
-
文档: 一个页面就是一个 文档, 使用
document表示. -
元素: 页面中所有的标签都称为 元素. 使用
element表示. -
节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用
node表示.
2. 获取元素
2.1 querySelector
使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象
语法格式:
let element = document.querySelector(selectirs);
-
selectors填一个或者多个选择器
使用示例:
abc
def
运行截图
2.2 querySelectorAll
如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()
使用示例:
123
456
运行截图
3. 操作元素
3.1 获取/修改元素内容
1. innerText
Element.innerText 属性表示一个节点及其后代的“渲染”文本内容
注: 不识别 html 标签. 是非标准的(IE发起的). 读取结果不保留html源码中的 换行和空格.
使用示例:
hello world
hello world
运行截图:
通过 innerText 无法获取到 p 内部的 html 结构, 只能得到文本内容.
2. innerHTML
Element.innerHTML 属性设置或获取HTML语法表示的元素的后代
注意:
- 识别 html 标签. W3C 标准的. 读取结果保留html源码中的 换行 和 空格
代码示例:
hello world
hello world
运行截图:
innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
3.2 获取/修改元素属性
注: 通过 element.属性来获取属性
代码示例:
@@##@@
运行结果:
3.3 获取/修改表单元素属性
代码示例1: 播放 暂停的转换.
运行截图:
代码示例2: 计数
代码示例3: 全选/取消全选按钮
选择你喜欢玩的游戏
王者荣耀
和平精英
开心消消乐
我的世界
全选
运行截图
3.4 获取/修改样式属性
CSS 中指定给元素的属性, 都可以通过 JS 来修改
style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的. 例如: font-size => fontSize, background-color => backgroundColor 等
1. 行内样式操作
element.style.[属性名] = [属性值];element.style.cssText = [属性名+属性值];
代码示例: 字体变大
你好
运行截图:
2. 类名样式操作
element.className = [CSS 类名];
代码示例: 背景颜色变化
你好!
运行截图:
4. 操作节点
4.1 新增节点
分为两个步骤:
- 创建元素节点
①createElement创建元素节点.
②createTextNode创建文本节点
③createComment创建注释节点
④createAttribute创建属性节点 - 插入节点到 dom 树中
① 使用appendChild将节点插入到指定节点的最后一个孩子之后
②使用insertBefore将节点插入到指定节点之前
代码示例:
运行截图:
代码示例: 当一个节点插入两次,相当于移动.
1
2
3
4
运行结果:
4.2 删除节点
使用 removeChild 删除子节点
oldChild = element.removeChild(child);
注: 如果 child 不是 element 的子节点,会抛异常
代码示例:
1
2
3
运行结果:
5. 实现几个案例
5.1 猜数字
猜数字
请输入要猜的数字:
已经猜的次数: 0
结果:
运行截图:
5.2 表白墙
表白墙
表白墙
输入后点击提交,会将信息显示在表格中
谁:
对谁:
说什么:
运行截图:
5.3 待办事项
待办事项
未完成
已完成
运行截图:
【相关推荐：javascript视频教程、web前端】
