Web APIs

JavaScript的组成

BOM—浏览器对象模型

一套操作浏览器功能的API
通过BOM可以操作浏览器窗口。
比如：弹出框、控制浏览器跳转、获取分辨率等

DOM—文档对象模型

一套操作页面元素的API
DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

基本概念

文档对象模型(Document Object Model，简称DOM)。是W3C组织推荐的处理可扩展标记语言的标准编程接口。
它是一种与平台和语言无关的应用程序接口，它可以动态的访问程序和脚本，更新其内容、结构和风格

DOM又称为文档树模型

图示
概念
① 文档：一个网页可以称之为文档
② 节点：网页中所有内容都是节点（标签、属性、文本、注释等）
③ 元素：网页中的标签
④ 属性：标签的属性
DOM常用操作
① 获取文档操作
② 对文档元素进行增删改查操作
③ 事件操作

window和document

window
① 所有的浏览器都支持window对象，它支持浏览器窗口
② 所有的js全局对象，函数以及变量都能自动成为window对象的成员
③ 全局变量是window对象的属性，全局函数是window对象的方法

document
每一个载入浏览器的HTML文档都会成为Document对象；
① document也是window对象的属性之一
② document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
③ 常用属性

console.log(document);
console.log(document.childNodes);
console.log(document.head);
console.log(document.body);
document.title = "测试";
console.log(document.title);

④ 常用方法

open() 打开一个流,已收集来自任何document.write()或document.writeln()方法的输入
close() 关闭眼红document.open()方法打开的输入流，并显示选定的数据
write() 向文档写入HTML表达式或者javascript代码
writeln() 等同于write方法，不同的是在每个表达式之后都有一个换行符
getElementById()
getElementsByName()
getElementsByTagName()

事件

基本概念
① 事件
触发 - 响应机制
用户和浏览器之间的交互行为，比如：点击按钮，鼠标进入/离开、双击
② 事件三要素
事件源：触发(被)事件的元素
事件名称：click 点击事件
事件处理程序：事件触发后要执行的代码(函数形式)
使用方式
① 我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码会执行
② 比如：点击按钮
Ⅰ. 方式一：结构和行为耦合，不方便维护，不推荐使用
```
<button id="btn" onmousemove="alert('123');">按钮1</button>
```
Ⅱ. 方拾二：为按钮的对应事件绑定处理函数的形式来响应事件
```
var btn = document.getElementByID('btn');
btn.onclick = function(ev){alert('123');
}
```

文档加载过程

存在问题
浏览器在加载一个页面时，是按照自上向下的顺序加载的
读取到一行就运行一行，如果将script标签写在head内部，在执行代码时候，页面还没有加载，页面中的DOM对象也没有加载
会导致在js中无法获取到页面中的DOM对象
解决方案
① onload事件
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕
```
window.onload = function(ev){var btn = document.getElementById('btn');btn.onclick = function(ev){alert('123');}
}
```
② 把script标签放在body尾部
③ 建议两者结合综合使用
补充
① onload 当页面完全加载后执行
② onunload 当用户退出界面时执行

文档页面元素获取

根据id获取元素：唯一性
```
var div = document.getElementById('box');
console.log(div);
```
注意：
① 获取到的数据类型是HTMLDivElement，对象都是有类型的
② id名具有唯一性

根据标签名获取元素：返回数组

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length ; i++) {var div = divs[i];console.log(div);
}

根据name获取元素：返回数组

var divs = document.getElementsByName('like');
for (var i = 0; i < divs.length ; i++) {var div = divs[i];console.log(div);
}

根据类名获取元素：返回数组

var divs = document.getElementsByClassName('box');
for (var i = 0; i < divs.length; i++) {var div = divs[i];console.log(div);
}

根据选择器获取元素

var box = document.querySelector('#box');
console.log(box);var boxs = document.querySelectorAll('.box');
for (var i = 0; i < boxs.length ; i++) {var box = boxs[i];console.log(box);
}

① querySelector 唯一
② querySelectorAll 数组

节点之间关系

<div id="box"><button class="btn">点我</button><span id="span"><a href="#">123</a></span><p class="lk">我是段落</p><div>哈哈哈</div>
</div>

获取父节点：parentNode

// 通过子盒子设置父盒子颜色
window.onload = function (ev) {var a = document.getElementsByTagName('a')[0];var span = a.parentNode;
}

下一个兄弟节点

var span = document.getElementById('span');
var nextEle = span.nextElementSibling || span.nextSibling; //优先拿元素节点

① nextElementSibling 获取标签节点
② nextSibling 获取任意节点

上一个兄弟节点

var span = document.getElementById('span');
var preEle = span.previousElementSibling || span.previousSibling;

获取标签中第一个节点

var box = document.getElementById('box');
var firstEle = box.firstElementChild || box.firstChild;

获取标签中最后一个节点

var box = document.getElementById('box');
var lastEle = box.lastElementChild || box.lastChild;

获取所有元素节点
① 节点类型 nodeType

var box = document.getElementById('box');
var allNodes = box.childNodes; //获取所有节点
var allEle = box.children; //获取所有标签节点

② 使用childNodes方法获取所有标签节点？

// 1. 获取标签var box = document.getElementById('box');// 2. 获取标签内部的所有节点var allNodeLists = box.childNodes;// 3. 过滤元素节点var newListArr = [];allNodeLists.forEach(function (value, key, parent) { if(value.nodeType === 1){newListArr.push(value);}})

节点操作

CRUD（增删改查）

追加
① 直接追加到尾部

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="box"><p id="word">123</p><button id="btn">点我</button></div>
</body>
<script>window.onload = function (ev) {var box = document.getElementsByClassName('box')[0];//  创建节点var img = document.createElement('img');img.src = '阿鲁14.gif';box.appendChild(img);}
</script>
</html>

运行结果：

② 插入到某一个元素后面

var box = document.getElementsByClassName('box')[0];
//  创建节点
var img = document.createElement('img');
img.src = '阿鲁14.gif';
var btn = document.getElementById('btn');
box.insertBefore(img, btn);

运行结果：

删除节点
① 拿到标签调用删除方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="box"><p id="word">123</p><button id="btn">点我</button></div>
</body>
<script>window.onload = function (ev) {var box = document.getElementsByClassName('box')[0];// 删除节点var btn = document.getElementsByTagName('button')[0];btn.remove();}
</script>
</html>

运行结果：

② 将节点从父节点中移除

window.onload = function (ev) {var box = document.getElementsByClassName('box')[0];// 删除节点var btn = document.getElementsByTagName('button')[0];box.removeChild(btn);
}

运行结果：

节点克隆
① 浅克隆：只克隆当前一个标签节点，内部子节点不克隆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="box"><p class="word">123</p><button class="btn">点我</button>
</div>
</body>
<script>window.onload = function (ev) {var box = document.getElementsByClassName('box')[0];// 克隆节点var newBox = box.cloneNode();  //浅克隆：console.log(newBox);}
</script>
</html>

运行结果：

② 深克隆：全部克隆

window.onload = function (ev) {var box = document.getElementsByClassName('box')[0];// 克隆节点var newBox = box.cloneNode(true);  //深克隆：console.log(newBox);}

运行结果：

③ 往body中添加

document.body.appendChild(newBox);

运行结果：

④ 注意：带id的节点不能克隆。id具有唯一性。

节点属性（节点.属性）
① 获取标签属性：getAttribute

 var img = document.getElementsByTagName('img')[0];console.log(img.getAttribute('src'));console.log(img.src);

② 设置标签属性：setAttribute
注意：我们不仅能设置已有属性，也可以添加任意我们想添加的属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="box"><p class="word">123</p><button class="btn">点我</button><img/>
</div>
</body>
<script>window.onload = function (ev) {var img = document.getElementsByTagName('img')[0];img.setAttribute('src','阿鲁14.gif');img.setAttribute('alt','这是阿鲁。');img.setAttribute('lover','zhengxiaohui');img.setAttribute('huankai','zhengxiaohui');}
</script>
</html>

运行结果：

③ 删除属性：removeAttribute

window.onload = function (ev) {var img = document.getElementsByTagName('img')[0];img.setAttribute('src','阿鲁14.gif');img.setAttribute('alt','这是阿鲁。');img.setAttribute('lover','zhengxiaohui');img.setAttribute('huankai','zhengxiaohui');img.removeAttribute('huankai');
}

运行结果：

Date 对象

BOM

定时器

需求
① JS的程序的执行速度是非常快的，如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
② 某一段程序需要在延迟多少时间后执行，可以使用定时器调用

使用
① 循环执行

var timeid = window.setInterval("方法名或者方法","延时");
window.clearInterval(timeid);
// 第一种方式
window.setInterval(function(){console.log('哈哈哈')
},1000)// 第二种方式
window.setInterval('console.log("哈哈")',1000)// 第三种方式
window.setInterval(test,1000);
function test() {console.log('哈哈哈')
}

② 定时执行

注意：为了防止定时器叠加，遵循一个原则：先清后设
通过事件激活一个定时器的时候，一定要先将这个定时器清除掉，然后再进行设置。
```
clearInterval(IntervalId );var IntervalId = setInterval(function(){console.log('哈哈哈')
},1000)
```

window

弹窗

alert弹窗

只有确定

confirm弹窗

确定取消

prompt弹窗

弹窗输入

基础知识

所有全局变量都是window的属性
所有全局函数都是window的方法

value和innerText和innerHtml区别

value针对单标签进行操作
innerText和innerHTML针对双标签进行操作
innerText只操作文字
innerHTML操作节点内部所有

JavaScript：Web APIsDOMBOM相关推荐

第十一章：WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
javascript调用dll_Blazor条码识别：Web中运行C#和JavaScript
Blazor是微软开发的Web框架,目的是让开发者使用C#和HTML来开发Web应用.然而,JavaScript必不可少.所以微软也提供了C#和JavaScript互相调用的方法.这篇文章分享下如何用 ...
第三阶段：Web前端：01Web(HTML、CSS、JavaScript)
转载自:国彬老师:https://shimo.im/docs/47kgJm9bMdiLO5qV/read 课程介绍:一.二.三一.Web前端: 学习如何搭建页面,如何美化页面,如何给页面添加动态效果 ...
HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
jQuery Tools：Web开发必备的 jQuery UI 库
基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...
深入Atlas系列：Web Sevices Access in Atlas示例（6） - 在客户端隐藏服务器端类型信息...
如果要在客户端指定服务器端Web Service方法所接收的参数类型,就必须在客户端通过"__type"来指定,但是这就暴露了服务器端的具体类型了,这可不太好.现在我们就来看一下应 ...
[译] 学习 JavaScript：9 个常见错误阻碍你进步
本文讲的是[译] 学习 JavaScript:9 个常见错误阻碍你进步, 原文地址:Learning JavaScript: 9 Common Mistakes That Are Holding Yo ...
Python学习笔记：web开发3
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...

JavaScript：Web APIsDOMBOM

Web APIs

JavaScript的组成

BOM—浏览器对象模型

DOM—文档对象模型

DOM

基本概念

DOM又称为文档树模型

window和document

事件

文档加载过程

文档页面元素获取

节点之间关系

节点操作

Date 对象

BOM

定时器

window

弹窗

alert弹窗

confirm弹窗

prompt弹窗

基础知识

value和innerText和innerHtml区别

JavaScript：Web APIsDOMBOM相关推荐

最新文章

热门文章