(简略)后端需要掌握的JS知识02

一、BOM

Browser Object Model （浏览器对象模型）

Window对象(主要学习)

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

---

window常用方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
//window可省略
window.alert() - 弹出警告框
window.confirm() - 输出确认/取消框
window.setInterval() - 在一定的时间间隔后执行一个函数，只是会执行一次函数
window.setTimeout() - 在一定的时间间隔内执行一个函数，只会执行一次
//也可以递归调用

比较:

setTimeout(function (){//执行一次
            alert("hello")
        },1000)

        setInterval(function (){// 执行多次
            alert("hello")
        })

---

History对象

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

方法的作用相当于浏览器左上角的前进后退按钮.

方法:

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

---

Location对象

location.hostname - 返回 web 主机的域名
location.pathname - 返回当前页面的路径和文件名
location.port - 返回 web 主机的端口 （80 或 443）
location.protocol - 返回所使用的 web 协议（http: 或 https:）
location.href - 属性返回当前页面的 URL

二、DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

---

通常，通过 JavaScript，需要操作 HTML 元素。

为了做到这件事情，必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

---

通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
本例查找 id=“intro” 元素：

var x=document.getElementById("intro");

---

通过标签名查找 HTML 元素
本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有

元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

---

通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素：

var x=document.getElementsByClassName("intro");

---

DOM元素能做到的操作：
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件做出反应
如何添加或删除 HTML 元素
（具体内容查找菜鸟教程即可）

三、事件监听

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

---

---

事件的两种绑定方式
1.在html标签中绑定事件属性

<input type = "button" onclick = "on()"/>
fuction on(){
	...
}

2.通过DOM元素属性绑定

<input type = "button" id = "btn"/>
document.getElementById("btn").onclick = function(){
...
}

四、异步通信

异步概念
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

---

回调函数
回调函数就是上面介绍过的setTimeout函数来调用其他函数的过程；setTimeout有两个参数，第一个是回调函数，第二个是毫秒数：

//3秒之后改变内容为hello！
setTimeout(function () {
    document.getElementById("demo").innerHTML="hello！";
}, 3000);

---

异步 AJAX
异步回调广泛应用于 AJAX 编程,详见下一篇文章.