根据MDN网站学习记录笔记客户端 Web API一、Web API简介二、操作文档 Document2.1 DOM 基本介绍2.2 DOM基本操作2.3 动态购物单三、从服务器获取数据四、第三方API五、绘制图形六、视频和音频API七、客户端存储一、Web API简介应用程序接口（API）是基于编程语言构建的结构，它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。Web API是主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web A
根据MDN网站学习记录笔记
客户端 Web API
一、Web API简介
应用程序接口（API）是基于编程语言构建的结构，它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。
- Web API是主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API
- 客户端JavaScript中的API通常分为两类：浏览器API 和 第三方API
二、操作文档 Document
2.1 DOM 基本介绍
文档对象模型：DOM是一种基于树的API文档，,它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。
文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点.
- 元素节点: 一个元素，存在于DOM中。
- 根节点: 树中顶层节点，在HTML的情况下，总是一个HTML节点。
- 子节点: 直接位于另一个节点内的节点。
- 后代节点: 位于另一个节点内（被嵌套在其中>=1层）任意位置的节点。
- 父节点: 里面有另一个节点的节点。
- 兄弟节点: DOM树中位于同一等级的节点。
- 文本节点: 包含文字串的节点。
2.2 DOM基本操作
一些基本的DOM操作
- Document引用的
querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个Element对象。 如果找不到匹配项，则返回null。 - 使用
Document.querySelectorAll()对多个元素进行匹配和操作，将其引用存储在一个array里面。
element = document.querySelector(selectors);
创建并放置新的节点
// 选择要操作的DOM内元素将其引用存储在一个变量中
var link = document.querySelector('a');
// 修改链接中的文字
link.textContent = 'Mozilla Developer Network';
// 修改链接指向的URL
link.href = 'https://developer.mozilla.org';
// 创建并放置新的节点
var sect = document.querySelector('section');
var para = document.createElement('p');
para.textContent = 'We hope you enjoyed the ride.';
sect.appendChild(para);
// 添加文本节点
var text = document.createTextNode(' — the premier source for web development knowledge.');
// 获取内部链接段落的引用，将文本节点绑定到这个节点[加在了第一个p后面]
var linkPara = document.querySelector('p');
linkPara.appendChild(text);
移动和删除节点
// 把具有内部链接的段落移到sectioin的底部
sect.appendChild(linkPara);
// 利用节点的引用删除节点
//var linkPara = document.querySelector('p');
sect.removeChild(linkPara);
// 删除基于自身引用的节点
linkPara.parentNode.removeChild(linkPara);
操作样式
- 通过
HTMLElement.style添加内联样式
para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';
- 用
Element.setAttribute()属性来实现
直接在<head>标签中添加<style>标签等css代码
<style>
.highlight {
color: white;
background-color: black;
padding: 10px;
width: 250px;
text-align: center;
}
</style>
然后在js代码中利用Element.setAttribute()属性实现样式应用
para.setAttribute('class', 'highlight');
2.3 动态购物单
利用js代码控制按钮，实现列表元素的增加和减少，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping list example</title>
<style>
li {
margin-bottom: 10px;
}
li button {
font-size: 8px;
margin-left: 20px;
color: #666;
}
最低0.47元/天 解锁文章
7698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
