JS学习笔记02

初识BOM/DOM

概述：

BOM英文全名：(borwser Object Model)浏览器对象模型
DOM英文全名：(Document Object Model)文档对象模型
DOM是 W3C 的标准; [所有浏览器公共遵守的标准]。
BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]。
window 是 BOM 对象，而非 js 对象；

注意：

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。

区别：

javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中：DOM包含：window。
1. Window对象包含属性：document、location、navigator、screen、history、frames
2. Document根节点包含子节点：forms、location、anchors、images、links
从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。而他们之前的最大区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

DOM：

概述

DOM操作creatElement(element)创建一个新的元素节点creatTextNode()创建一个包含给定文本的新文本节点appendChild()指定节点的最后一个节点列表后添加一个新的子节insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面removeChild()从一个给定元素中删除子节点replaceChild()把一个给定父元素里的一个子节点替换为另外一个节点，DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。

DOM节点

DOM对象生命周期

浏览器在接收到html文件之后，将HTML文件标签加载到浏览器缓存中，每当加载一个html标签时候，自动为这个标签生成一个实例对象，这个实例对象就是DOM对象。
在浏览器关闭之前或则浏览器请求其他资源文件之前，本次生成的DOM对象一直存活在浏览器缓存中。
在浏览器关闭时候，浏览器缓存中DOM对象将要被销毁。
在浏览器请求到新资源文件后，浏览器缓存中原有的DOM对象将会被覆盖。

document对象

document对象被称为【文档对象】
document对象用于在浏览器内存中根据定位条件定位DOM对象

document对象生命周期:

在浏览器将网页中所有标签加载完毕后，在内存中将使用【树形结构】存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象
管理这颗树（DOM树）在浏览器将接收网页中标签加载完毕后，自动在浏览器内存生成一个document对象。
一个浏览器运行期间，只会生成一个document对象。
在浏览器关闭时，负责将document对象进行销毁。

通过document对象定位DOM对象方式：

根据html标签的id属性值定位DOM对象
- 语法：
```
var domObj =  document.getElementById("id属性值");
```
- 通知document对象定位id属性等于one的标签关联的DOM对象
根据html标签的name属性值定位DOM对象
- 语法：
```
document.getElementsByName("name属性值");
```
- 通知document对象将所有name属性等于deptNo的标签关联的DOM对象，进行定位并封装到一个数组进行返回。 domArray就是一个数组存放
  本次返回的所有DOM对象。
根据html标签类型定位DOM对象
- 语法：
```
document.getElementsByTagName("标签类型名");
```
- 通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回。
待学习…

监听事件

概述

监听用户在何时以何种方式对当前标签进行操作。当监听到相关行为时，通知浏览器调用对应JavaScript函数对当前用户请求进行处理。

监听分类：

监听用户何时使用鼠标操作当前标签。
监听用户何时使用键盘操作当前标签。

事件

onclick : 监听用户何时使用鼠标【单击】当前标签
onmouseover: 监听用户何时将鼠标【悬停】当前标签上方
onmouseout : 监听用户何时将鼠标从当前标签上方【移开】
onfocus: 监听用户何时通过鼠标让当前标签获得【光标】
onblur: 监听用户何时通过鼠标让当前标签丢失【光标】

事件绑定方法：

行内绑定

<div onclick="fun1()">示例</div>

动态绑定

获取到dom元素，并在元素上绑定事件。

<body>
    <div id="Demo">示例</div>
</body>
<script>
    var demo = document.getElementById("Demo");
    demo.onclick = function() {
        alert("示例");
    }
</script>

事件监听

处理表格或者列表中的数据的时候使用事件委托的方式，只绑定一次事件，避免性能的损耗。

<body>
    <div id="Demo">示例</div>
</body>
<script>
    var demo = document.getElementById("Demo");
    demo.addEventListener("click",fun1(),false);
    function fun1() {
        alert("示例");
    }
</script>

对象

定义：

在 JavaScript认为所有通过【构造函数】生成对象其数据类型都是Object类型。

特征：

object类型对象在创建完毕后,可以根据实际情况,任意添加属性和方法,也可以移除属性和方法。

添加属性：

第一种添加添加方式：

添加属性
object对象.新属性名 = 值;
添加函数
object对象.新函数对象名 = function() {};

第二种添加添加方式：

添加属性
object对象[“新属性名”] = 值;
添加函数
object对象[“新函数对象名”] = function() {};

自定义构造函数

语法：

// 创建构造函数
function 函数对象名() {
    console.log("Demo...");
}
// 调用构造函数
var Object类型对象 = new 函数对象名();

普通函数/构造函数区别：

函数没有调用之前，无法区分函数身份，只能根据函数调用形式区分。
判断普通函数：var demo = 函数对象名();
判断构造函数：var demo = new 函数对象名();

JSON

概述：

SON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

JSON对象语法：

    var 对象名称 = {
        "属性名": "属性值",
        "方法名": function () {
            语法;
        }
    };

JSON数组语法：

// JSON相当于java中的集合
var student2 = [
    {   "name": "王五",
        "run": function () {
            return this.name+"在跑步ing...";
        }
    },
    {
        "name": "赵六",
        "run": function () {
            return this.name+"在跑步ing...";
        }
    }
];
for (let i = 0; i < student2.length; i++) {
    let obj = student2[i];
    console.log(obj.run());;
}