DOM核心编程

DOM核心编程

一、BOM

BOM（Browser Object Model）浏览器对象模型。指JavaScript抽象出了和浏览器相关的一系列对象，并按照这些对象的关系组织成为一个树状的对象模型。

JavaScript抽象出的和浏览器相关的对象有：

1、window对象

window对象指浏览器窗口对象，该对象中保存了一些和窗口相关的数据以及对窗口的各种操作。

window是JS代码中的全局对象，我们通过var定义的全局变量存储在了window对象中，定义的函数存储在了window对象中，但是访问window中的属性和函数可以省略window关键字。

使用window对象下的属性和函数，可以省略window关键字直接使用属性名和函数名。

2、location对象

location对象代表浏览器的地址栏对象。

location对象中有几个重要的属性：

一个网页的地址由以下部分组成：

协议://主机地址:端口/资源名称？查询参数

例如：

百度的地址：

https://www.baidu.com/index.html

协议是https

主机地址是www.baidu.com

端口是80，http协议默认的访问端口就是80，所以如果端口是80则可以省略

资源地址是index.html

3、history对象

history对象代表浏览器的历史记录对象

4、screen对象

二、DOM

DOM（Document Object Model）文档对象模型，JavaScript将一个document（一个html中的所有内容）中的所有标签都抽象为对象（标签对象、元素、节点），按照标签之间的层级结构组织成为一个模型。

通过该模型中的某个标签对象，我们可以去修改这个对象对应的标签。

使用DOM完成网页交互效果

1.确定事件

2.确定要操作的标签(要操作的标签是谁，要操作标签的那个属性)

3.从document中找到

1、查找标签对象

通过document提供的函数所查找的标签对象

通过各种函数所查找的标签对象中包含了该标签的所有属性。该对象还包含了这个标签对象之下的所有子标签。

上述函数也可以通过某个具体的标签对象来调用，如果使用某个标签对象来调用，那么就是在这个标签内来查找标签

2、节点操作

在DOM的标准中，一个标签是一个节点、一个属性是一个节点、一个文本还是一个节点。

在一个标签对象中查找和它相关的其他标签对象的方式

将数据渲染为标签大体有两种方式：

方式一：当我们要渲染的标签是多个时，我们会预留一个外层盒子，通过数组数据循环，每循环一次就创建一组标签对象，然后在放到外层盒子中。

无中生有有两种方式：

1.使用createElement创建标签对象，设置标签对象的属性内容，然后组合各个标签对象的关系，最后加入到网页中。

//创建外层div
let div=document.createElement("div");
//设置div的class属性
div.className="box1";
//创建img标签
let img=document.createElement("img");
img.src=goods[i].img;
//创建商品名称div
let nameDiv=document.createElement("div");
nameDiv.className="l1";
nameDiv.innerHTML=goods[i].name;
//创建优惠活动div
let saleDiv=document.createElement("div");
saleDiv.className="l2";
saleDiv.innerHTML=goods[i].sale;
div.appendChild(img);
div.appendChild(nameDiv);
div.appendChild(saleDiv);
//将整个商品信息div添加到外层盒子中
document.querySelector(".box").appendChild(div);

2.使用标签的innerHTML属性来设置标签的内容，innerHTML支持标签内容。ES6提供了新的模板语法，支持以字符串的形式表达html标签，而且在标签中还可以使用${变量}组装动态数据

let html=`

    ${goods[i].img}" alt="">
    

    	${goods[i].name}
    
    

    	${goods[i].sale}
    
`;
document.querySelector(".box").innerHTML+=html;

方式二：当我们要渲染的只是一个内容时，我们会将这个静态标签写好。然后从DOM中取出该标签对象，然后去修改它的内容。

删除网页中的标签两种方式：

1.先找到待删除标签的父标签，再找到要删除的这个标签，然后通过removeChild完成删除，适用于点一下删一个的情况。

2.通过将父标签的innerHTML属性设置为""的方式，批量的删除标签。适用于批量删除标签。

3、属性操作

属性操作指动态的设置标签对象的属性值。如果你设置的标签属性会使标签产生变化，那么我们修改了该属性就会同时引起标签的改变。

通用的属性操作：

不同标签不同属性：

1.通用属性操作既可以用于操作HTML的原生属性，也可以用于操作自定义属性。自定义属性就是HTML标签中没有的属性，通过定义自定义属性的目的是为了保存关键数据，在后续可以从标签中在把数据取出来。

2.setAttribute操作是HTML文档的标签属性，我们应该按照HTML文档属性的规范来进行访问和赋值。在堆HTML文档标签的属性进行操作的同时也会修改标签对象中该属性的值。但是setAttribute不能用来访问一些在HTML中没有但是在DOM对象中存在的属性，例如:select标签的value。value/src/href/checked都仅仅是对DOM对象的属性进行修改不会修改HTML文档的内容。他们都会引起网页上渲染出的标签的变化。

4、样式操作

5、事件

用户与网页交互的各种动作被称为事件。当与网页交互的动作发生时，可以执行某个具体的函数。

一个标签的同一个事件只能绑定一个函数，后绑定的函数会覆盖之前绑定的函数。

两种事件绑定方式的区别：

通过标签属性的方式绑定事件，如果要获取标签对象本身，需要在执行函数时传入this关键字作为参数。

通过标签对象.事件=function(){}这样的方式来绑定事件，在函数中直接使用this关键字则表示当前的标签对象。

常用事件列表：

6、事件流

事件流是指事件朝某个方向流动性的进行触发。基本的事件流就是冒泡。

冒泡的过程：

1、某个标签的A事件触发以后（无论这个标签本身是否定义了该事件都可以触发），首先会判断当前的标签是否给该事件绑定了函数，如果绑定了函数则执行该函数（事件执行）

2、会依次向上查找这个标签的父标签，判断父标签上是否给该事件绑定了函数，如果绑定则执行该函数

3、一直找到body标签为止。

DOM0级事件就是在第5个知识点讲到的事件绑定方式，这种方式事件流只支持冒泡。

DOM2级事件是另外一种事件绑定方式，它的事件流同时涵盖了两个方向，冒泡和捕获。

DOM2级事件绑定方式：

标签对象.addEventListener(“事件名称”,function(){},布尔值);

事件名称就是DOM0级事件去掉on

第二个参数时一个函数，代表了该事件绑定的函数

第三个参数是一个布尔值，它的作用是决定函数到底是在捕获阶段执行还是在冒泡阶段执行

冒泡是从触发事件的标签开始向上流动到body标签，捕获从body标签向下流动到触发事件的标签。

DOM2级事件先捕获后冒泡，默认在冒泡阶段执行，如果在定义事件时第三个参数传入true，则会在捕获阶段执行函数。

7、事件源

当事件触发时，将与事件本身相关的一系列信息存储在了一个对象中，这个对象就是事件源对象。

事件源对象的获取:

document.getElementById("a").onclick=function(e){
            //在一个事件的函数中使用事件源对象
            if(!e){
                e=event;
            }
            console.log(e);
}

事件源对象的重要属性：