DOM（Document Object Model——文档对象模型）

DOM 介绍

**介绍:**什么是DOM，简单的说DOM是一套对文档的内容进行抽象和概念化的方法。DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。DOM 是万维网上使用最为广泛的API之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
DOM主要用于操作网页的标签内容,标签样式,标签属性,以及标签(增删改查)
DOM学习的最终目的完成一些常见网页特效轮播图选项卡…
注意：DOM既不是HTML的一部分,也不是JavaScript一部分,而是浏览器厂商都实现了的一些独立的规则，并允许JavaScript可以访问和操作存储在DOM中的内容（DOM 也可以使用其他的语言来实现）
什么是DOM

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

事件基础

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解: 触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素

事件源（谁）:触发事件的元素
事件类型（做什么）: 例如 onclick 点击事件
事件处理程序（怎么做）:事件触发后要执行的代码(函数形式)，事件处理函数

事件的绑定方式

事件的绑定方式有二种:动态绑定与行内绑定

动态绑定事件

说明: 在JS代码里面,动态给指定DOM元素绑定事件
动态事件绑定的步骤如下:

第一步:获取事件源(获取DOM对象)

第二步:注册事件(绑定事件)

第三步:添加事件处理程序(一般是一个匿名函数)

动态绑定语法

dom对象.on事件类型 = 匿名函数或者有名函数名

btn1.onmouseover = function () {
    console.log(2222);
}

function fn() {
    console.log(3333);
}
btn1.onmouseout = fn;

行内绑定事件

说明:所谓的行内绑定事件是将事件写在HTML标签里面

HTML标签中自带一些事件属性比如 onclick onmouseover等

DOM元素获取

DOM把整个页面当做一个文档, DOM中最大的对象就是document对象

1	console.log(document);

如果想更好的查看某个对象的方法和属性, 可以使用console.dir()方法 dir是directory目录的简写

1	console.dir(document);

获取DOM元素的方法有如下:

根据ID获取元素

document.getElementById("id属性值"); 返回值单个DOM对象或者null

1
2
3

var oneDiv = document.getElementById("one");
console.log(oneDiv);
console.log(document.getElementById("two"));

根据标签名获取元素

document.getElementsByTagName("标签名") 返回值是一个伪数组(类数组对象)

var objDivs = document.getElementsByTagName("div");
console.log(objDivs);
console.log("");
console.log(Array.isArray(objDivs));
console.log(objDivs.constructor === Array);
console.log(objDivs instanceof Array);
console.log("");
console.log(objDivs[0]);
console.log(objDivs[1]);
console.log(objDivs[2]);
console.log("");
console.log(objDivs.length);

根据标签的name属性获取元素返回值是一个伪数组

document.getElementsByName("name属性值")

var username = document.getElementsByName("username");
console.log(username);
var usersex = document.getElementsByName("usersex");
console.log(usersex);

H5新增获取元素方式 IE低版本浏览器不支持(IE678)

document.getElementsByClassName("class属性值") 返回值是一个伪数组

1 2	var objTwos = document.getElementsByClassName("two"); console.log(objTwos);

document.querySelector("带符号的css选择器") 找到”第一个”符合CSS选择器的元素 🧡

console.log(document.querySelector("#one"));
console.log(document.querySelector(".two"));
console.log(document.querySelector("input[name='usersex']"));
console.log(document.querySelector("div"));
console.log(document.querySelector("ul li"));

document.querySelectorAll("带符号css选择器") 找到”所有”符合CSS选择器的元素 🧡

console.log(document.querySelectorAll("ol li"));
console.log(document.querySelectorAll("dl dd"));
console.log(document.querySelectorAll("div"));
console.log(document.querySelectorAll(".two"));
console.log(document.querySelectorAll("#one"));

另外, document对象可以尝试换成其他dom父对象, 表示从指定的dom父对象里面查找元素
1
2
var objUl = document.querySelector("ul");
console.log(objUl.querySelectorAll("li"));

获取特殊元素( body,html )
1. 获取body标签 document.body
  1
  console.log(document.body);
2. 获取html标签 document.documentElement
  1
  console.log(document.documentElement);

常用事件

onchange事件

概念: onchange事件当用户更改<input>、<select>和<textarea> 元素的值并提交这个更改时，onchange 事件在这些元素上触发。和 oninput 事件不一样，onchange 事件并不是每次元素的 value 改变时都会触发。

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/change_event

// 下拉框的onchange需要给select标签绑定
var select = document.querySelector("select");
select.onchange = function () {
    console.dir(this);
    console.log(this.value);
    console.log(this.selectedIndex);
    console.log("");
}

oninput事件

oninput 事件在用户输入时触发

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
提示：该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发，
oninput跟onchange事件的区别:
1. onchange 在元素失去焦点时触发
2. 在按快捷键ctrl+v粘贴的时候,onkeyup这个事件会触发两次, 但是oninput只触发一次;
3. 鼠标右键粘贴,只能触发oninput事件以及onchange事件,不能触发onkeyup事件

参考文档: https://www.runoob.com/jsref/event-oninput.html

var textarea = document.querySelector("textarea");
textarea.oninput = function () {
    console.log(this.value);
}

// 下拉框的oninput需要给select标签绑定
var select = document.querySelector("select");
select.oninput = function () {
    console.dir(this);
    console.log(this.value);
    console.log(this.selectedIndex);
    console.log("");
}

常用键盘事件

键盘事件触发条件

onkeyup 某个键盘按键被松开时触发

onkeydown 某个键盘按键被按下时触发

onkeypress 某个键盘按键被按下时触发但是它不识别功能键比如 ctrl shift 箭头等
注意:
1. onkeypress和前面两个onkeyup跟onkeydown的区别是 onkeypress不识别功能键,比如箭头,ctrl,shift 等
2. 三个事件的执行顺序是: keydown => keypress => keyup
键盘事件对象

键盘事件对象属性说明

e.keyCode 返回该键的ASCII值 e.keyCode只有keypress事件可以区分大小写字母

e.key 返回用户按下的物理按键的键名

// 获取dom对象
var objInput = document.querySelector("input");
// 绑定键盘事件
objInput.onkeyup = function (e) {
    console.log("keyup");
    console.log("this.value=>", this.value);
    console.log("键盘事件对象e=>", e);
    console.log("e.keyCode=>", e.keyCode);
    console.log("e.key=>", e.key);
    console.log("");
};

objInput.onkeydown = function (e) {
    console.log("keydown");
    console.log("this.value=>", this.value);
    console.log("键盘事件对象e=>", e);
    console.log("e.keyCode=>", e.keyCode);
    console.log("e.key=>", e.key);
    console.log("");
};

objInput.onkeypress = function (e) {
    console.log("keypress");
    console.log("this.value=>", this.value);
    console.log("键盘事件对象e=>", e);
    console.log("e.keyCode=>", e.keyCode);
    console.log("e.key=>", e.key);
    console.log("");
};

常用鼠标事件

鼠标事件	触发条件
click	鼠标点击左键触发
dblclick	鼠标双击左键触发
mouseover	鼠标移上触发
mouseout	鼠标移出触发
mouseenter	鼠标进入触发
mouseleave	鼠标离开触发
mousemove	鼠标移动触发
mouseup	鼠标弹起触发
mousedown	鼠标按下触发
focus	获取鼠标焦点触发
blur	失去鼠标焦点触发

mouseenter和mouseover的区别

以上两组事件,如果针对的是同一个元素,没有很大区别的

注意: onmouseover和onmouseout会事件冒泡

注意: onmouseenter和onmouseleave不会事件冒泡

03-mouseenter和mouseover的区别.html

scroll事件

scroll事件可以给元素绑定,可以给页面绑定

当元素滚动的时候,就可以触发scroll事件

var div1 = document.getElementById("div1");
div1.onscroll = function () {
    console.log("div1.scrollLeft=>", div1.scrollLeft);
}

给页面绑定scroll事件, 可以给document对象, window对象或者body绑定页面滚动事件一般给window对象绑定

注意: 给html对象绑定scroll事件无效

滚动窗口至文档中的特定位置

语法:

语法一: window.scroll(x-coord,y-coord )

语法二: window.scroll(options)
options 是一个包含三个属性的对象:

top 等同于 y-coord

left 等同于 x-coord

behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto
注意：里面的x和y不需要带px单位直接写数字即可

另外,还有一个window.scrollTo函数,实际上和 window.scroll是一样的
参考文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scroll

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo

window.scrollTo( 0, 1000 );

btns[0].onclick = function () {
    // 如果只有一个参数的时候,这个参数需要是一个对象
    // window.scroll(0);// 报错

    /* window.scroll({
                left: 0
            }); */

    // window.scroll(水平滚动条位置, 垂直滚动条位置);
    window.scroll(0, 0);
}

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    left: 500,
    behavior: "smooth"
});

window对象的常见事件

页面（窗口）加载事件（两种）
1. window对象的load事件 🧡
window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload() 通常用于 <body> 元素，在页面完全载入后(包括DOM结构, 图片、css文件等等)执行脚本代码
1. document对象的 DOMContentLoaded 事件
当初始HTML文档已完全加载和解析时，将触发 DOMContentLoaded 事件，而不需要等待样式表，图像和子框架页面加载（事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）。
- 小结:
  1. DOMContentLoaded 事件绑定的时候, 需要使用事件监听方式绑定
  2. load事件需要等待HTML结构,CSS样式,图像等都加载完毕以后,再调用load的事件函数
  3. DOMContentLoaded 仅需要等待HTML结构加载完毕即可调用
调整窗口大小事件
window对象的resize事件当浏览器可视区域大小发生变化的时候,就会调用resize事件

DOM对象操作

DOM对象操作双标签的标签内容

操作的意思就是可以获取也可以设置

方式一: dom对象.innerText

innerText获取标签内容的时候,只有文本内容
innerText设置内容的时候,无法解析HTML标签

btns[0].onclick = function () {
    // innerText获取标签内容的时候,只有文本内容
    console.log(myDiv1.innerText);
}
btns[2].onclick = function () {
    // innerText设置内容的时候,无法解析HTML标签
    myDiv2.innerText = "<h1>标题</h1>";
}

方式二: dom对象.innerHTML

innerHTML获取标签内容的时候,会保留标签以及空格换行
innerHTML设置内容的时候,可以解析HTML标签

btns[1].onclick = function () {
    // innerHTML获取标签内容的时候,会保留标签以及空格换行
    console.log(myDiv1.innerHTML);
}
btns[3].onclick = function () {
    // innerHTML设置内容的时候,可以解析HTML标签
    myDiv2.innerHTML = "<h1>标题</h1>";
}

DOM对象操作表单元素属性

**注意:**表单元素中有一些属性如:disabled、checked、selected，元素对象的这些属性的值是”布尔型”。

var btns = document.querySelectorAll("button");
var username = document.getElementById("username");
var hobby = document.getElementById("hobby");

btns[0].onclick = function () {
    console.log(username.value);
};

btns[1].onclick = function () {
    username.value = "李思思";
};

btns[2].onclick = function () {
    console.log(username.disabled);
};

btns[3].onclick = function () {
    username.disabled = false;
};

btns[4].onclick = function () {
    console.log(hobby.checked);
};

btns[5].onclick = function () {
    hobby.checked = true;
};

btns[6].onclick = function () {
    hobby.checked = false;
};

btns[7].onclick = function () {
    if (hobby.checked) {
        hobby.checked = false;
    } else {
        hobby.checked = true;
    }

    // hobby.checked = !hobby.checked;
};

DOM对象操作样式

通过dom对象的style属性操作元素的”行内式样式”

设置单个CSS属性样式只会覆盖同名属性

dom对象.style.CSS样式属性名 = “CSS样式属性值”;
同时设置多个CSS属性样式

dom对象.style = “css属性名1: css属性值1;css属性名2: css属性值2; css属性名3: css属性值3;…”

注意: 该方式会清空原来的行内式样式属性值

var objDiv = document.querySelector("div");
var btns = document.querySelectorAll("button");

btns[0].onclick = function () {
    // 设置单个CSS属性样式  只会覆盖同名属性
    // dom对象.style.CSS样式属性名 = "CSS样式属性值";

    objDiv.style.color = "red";
    // 注意: 此时, 如果CSS样式属性名多个单词组成的, 需要写成去掉短横杠以后,并且使用驼峰法 font-size => fontSize
    objDiv.style.fontSize = "16px";
    objDiv.style.textAlign = "center";
    objDiv.style.width = "400px";
};

btns[1].onclick = function () {
    // 同时设置多个CSS属性样式
    // 注意: 该方式会清空原来的行内式样式属性值

    // dom对象.style = "css属性名1: css属性值1;css属性名2: css属性值2; css属性名3: css属性值3;..."

    objDiv.style = "font-size: 40px; color:green; width: 400px";
};

通过DOM对象操作类名,从而操作标签的CSS样式

但是又由于JS中, class是ES6的一个关键字, 所以操作类名的时候不是使用 dom对象.class 而使用 dom对象.className
1
2
3
4
var objDiv = document.querySelector("div");
console.log(objDiv.id);
console.log(objDiv.class);
console.log(objDiv.className);

给dom对象设置类名语法该方式会覆盖原来的类名

dom对象.className = “类名”;

dom对象.className = “类名1 类名2 类名3…”;

btns[1].onclick = function () {
    // objDiv.className = "one";
    // objDiv.className = "one two";
    // objDiv.className = "myDiv one two";

    objDiv.className = oldClassName + " one two";
};

H5新增了一种类名操作方式, 通过dom对象的classList属性操作类名

dom对象.classList.value 获取所有类名

dom对象.classList.add(“指定类名”) 添加指定类名 🧡

dom对象.classList.remove(“指定类名”) 删除指定类名 🧡

dom对象.classList.contains(“指定类名”) 判断是否含有指定类名返回是布尔值

dom对象.classList.toggle(“指定类名”) 切换指定类名有则删无则加

var btns = document.querySelectorAll("button");
btns[0].onclick = function () {
    console.log(myDiv.classList.value);
};

btns[1].onclick = function () {
    myDiv.classList.add("two");
    myDiv.classList.add("three");
};

btns[2].onclick = function () {
    myDiv.classList.remove("two");
};

btns[3].onclick = function () {
    console.log(myDiv.classList.contains("two"));
};

btns[4].onclick = function () {
    myDiv.classList.toggle("two");
};

排他操作

排他操作的意思就是先清除所有,再设置当前

for (var i = 0; i < items.length; i++) {
    items[i].onclick = function () {
        // 绑定事件跟触发事件不是同时发生的, 我们能点击的时候, for循环已经结束了
        // console.log("点击onclick里面的i=>", i);

        // items[i].classList.add("active");// 报错

        // 排他操作的意思就是先清除所有,再设置当前

        // 清除所有.item身上的.active类名
        /* items[0].classList.remove("active");
                items[1].classList.remove("active");
                items[2].classList.remove("active");
                items[3].classList.remove("active"); */

        for (var j = 0; j < items.length; j++) {
            // 删除类名
            items[j].classList.remove("active");
        }

        // console.log("this=>", this);
        // 添加类名
        this.classList.add("active");
        console.log(this);
    }
}

自定义属性操作

HTML除了一些内置属性之外,程序员还可以根据需要自定义一些属性, 自定义的属性建议以data-开头

获取自定义属性,也可以获取内置属性,但是获取类名的时候,需要使用class

dom对象.getAttribute(“自定义属性名或者内置属性名”)

btns[2].onclick = function () {
    console.log(objA.getAttribute("id"));
    console.log(objA.getAttribute("className"));
    console.log(objA.getAttribute("href"));
    console.log(objA.getAttribute("data-index"));
};

设置自定义属性,也可以设置内置属性,但是设置类名的时候,需要使用class

dom对象.setAttribute(“自定义属性名或者内置属性名”, “属性值”)

btns[3].onclick = function () {
    objA.setAttribute("id", "first");
    objA.setAttribute("className", "dier");
    objA.setAttribute("href", "https://www.jd.com");
    objA.setAttribute("data-index", 4);
};

删除属性(包括删除内置属性以及删除自定义属性)

dom对象.removeAttribute(“属性名”)

btns[4].onclick = function () {
    objA.removeAttribute("id");
    objA.removeAttribute("href");
    objA.removeAttribute("data-index");
};

操作”自定义属性”,建议使用 setAttribute,getAttribute

操作”内置属性”,建议使用 dom对象.内置属性名

btns[5].onclick = function () {
    console.log("inputObj.checked=>", inputObj.checked);
    console.log('inputObj.getAttribute("checked")=>', inputObj.getAttribute("checked"));
    console.log("");
}

btns[6].onclick = function () {
    // inputObj.checked = false;
    inputObj.setAttribute("checked", false);
}

04-自定义属性操作.html

节点操作(操作DOM结构,添加标签,删除标签等)

节点概述

“网页中的所有内容都是节点”（元素节点、属性节点、文本节点、注释节点等），在DOM 中，节点使用 node 来表示

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有”nodeType（节点类型）”、”nodeName（节点名称）”和”nodeValue（节点值）”这三个基本属性。
nodeType节点类型常用值有以下3个:

元素节点 nodeType为1

属性节点 nodeType为2

文本节点 nodeType为3
补充内容:

通过dom对象.getAttributeNode(“属性名”) 方法从当前元素中通过名称获取属性节点。

父节点.firstChild 返回第一个子节点,找不到则返回null

参考文档：https://www.cnblogs.com/xiaoleidiv/p/3347483.html

// 获取元素节点
var john = document.getElementById("john");
console.log(john);
console.log(john.nodeType);
console.log(john.nodeName);
console.log(john.nodeValue);
console.log("");
console.log("");

// 获取属性节点
var objName = john.getAttributeNode("name"); // 获取john这个dom对象身上的name属性节点
console.log(objName);
console.log(objName.nodeType);
console.log(objName.nodeName);
console.log(objName.nodeValue);
console.log("");
console.log("");

// 获取文本节点
var objText = john.firstChild;
console.log(objText);
console.log(objText.nodeType);
console.log(objText.nodeName);
console.log(objText.nodeValue);

07-节点概述.html

节点操作

父级节点 🧡

节点.parentNode

子节点 🧡
获取所有子节点了解

父节点.childNodes 返回包含指定节点的子节点的集合
获取子元素节点 🧡
父节点.children
获取第1个子节点
父节点.firstChild 返回第一个子节点,找不到则返回null

包含所有的节点,不管是文本节点还是元素节点
获取最后1个子节点
父节点.lastChild 返回最后一个子节点,找不到则返回null

包含所有的节点,不管是文本节点还是元素节点
获取第1个子元素节点 🧡
父节点.firstElementChild 返回第一个子元素节点,找不到则返回null
获取最后1个子元素节点 🧡
父节点.lastElementChild 返回最后一个子元素节点,找不到则返回null

兄弟节点

下一个兄弟节点
当前元素.nextSibling 返回当前元素的下一个兄弟节点, 找不到返回null 包含元素节点或者文本节点等等
上一个兄弟节点
当前元素.previousSibling 返回当前元素的上一个兄弟节点, 找不到返回null 包含元素节点或者文本节点等等
下一个兄弟元素节点（有兼容性问题） IE9以上才支持
当前元素.nextElementSibling 返回当前元素的下一个兄弟元素节点, 找不到返回null
上一个兄弟元素节点（有兼容性问题） IE9以上才支持
当前元素.previousElementSibling 返回当前元素上一个兄弟元素节点, 找不到返回null

02-节点操作补充-兄弟节点.html

创建节点 🧡

document.createElement(“标签名”) 注意: 该方法会返回一个新的”dom对象”

添加节点 🧡

父节点.appendChild(指定节点) 方法将一个节点添加到指定父节点的子节点列表末尾

父节点.insertBefore(节点,指定元素) 方法将一个节点添加到父节点的指定子元素前面

删除节点 🧡

父节点.removeChild(节点) 从父节点中删除一个子节点,返回值是被删除的节点

或者

指定节点.remove(); 删除指定节点

btns[7].onclick = function () {
    // 需要先创建节点,才能添加节点
    // 创建节点的语法
    // document.createElement("标签名")
    // 注意: document.createElement("标签名")会返回一个新的dom对象dom对象dom对象

    var newLi = document.createElement("li");
    newLi.innerText = "小猪佩奇";
    newLi.style.color = "red";
    newLi.onclick = function () {
        alert("大家好, 我是佩奇,我有个弟弟, 叫乔治");
    }

    // 添加节点到子元素列表最后
    // 父节点对象.appendChild( 被添加的子节点 )
    objUl.appendChild(newLi);
};

btns[8].onclick = function () {
    var newLi = document.createElement("li");
    newLi.innerText = "喜羊羊";
    newLi.style.color = "blue";

    console.log(objUl);
    console.log(objUl.children);
    console.log(objUl.children[1]);
    console.log("");

    // 添加节点到指定节点的前面
    // 父节点对象.insertBefore(被添加节点, 哪个节点)
    objUl.insertBefore(newLi, objUl.children[1]);
};

btns[9].onclick = function () {
    // 删除节点(删除标签)
    // 方式一  父节点.removeChild( 子节点或者子元素节点 )
    console.log(objUl.firstElementChild);
    objUl.removeChild(objUl.firstElementChild);
};

btns[10].onclick = function () {
    // 删除节点(删除标签)
    // 方式二  指点节点.remove()
    console.log(objUl.lastElementChild);
    objUl.lastElementChild.remove();
};

08-节点操作.html

复制（克隆）节点

节点.cloneNode( [布尔值] ) 克隆节点/拷贝节点返回值是节点的一个副本
注意:
1. 如果括号参数为空或者false,则是浅拷贝节点,即只克隆复制节点本身,不克隆里面的子节点
2. 如果括号参数为true,则是深度拷贝节点,会复制节点本身以及里面所有的子节点

var btns = document.querySelectorAll("button");
var objUl = document.querySelector("ul");
btns[0].onclick = function () {
    // var cloneLi = objUl.firstElementChild.cloneNode();
    var cloneLi = objUl.firstElementChild.cloneNode(false);
    console.log(cloneLi);
    objUl.appendChild(cloneLi);
}

btns[1].onclick = function () {
    var cloneLi = objUl.firstElementChild.cloneNode(true);
    console.log(cloneLi);
    objUl.appendChild(cloneLi);
}

03-节点操作补充-复制（克隆）节点.html

js动态创建元素的三种方式

document.write()
element.innerHTML
document.createElement()

区别:

document.write是直接将内容写入页面的内容流,但是文档流已经执行完毕,则它会导致页面全部重绘
innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML创建多个元素效率更好(可以拼接字符串,也可以采取数组形式拼接),结构稍微复杂
createElement()创建多个元素效率稍低一点点,但是结构更清晰

// 举例: 使用三种不同方式创建100个a标签
var btns = document.querySelectorAll("button");
var content = document.querySelector(".content");
btns[0].onclick = function () {
    for (var i = 1; i <= 100; i++) {
        document.write("<a href='https://www.taobao.com'>淘宝" + i + "</a>");
    }
};
btns[1].onclick = function () {
    // 数组
    var arr = [{
        href: "https://www.baidu.com",
        name: "百度"
    }, {
        href: "https://www.jd.com",
        name: "京东"
    }, {
        href: "https://www.taobao.com",
        name: "淘宝"
    }];

    content.innerHTML = arr.map(function (item) {
        return "<a href='" + item.href + "'>" + item.name + "</a>";
    }).join("");
};
btns[2].onclick = function () {
    for (var i = 1; i <= 100; i++) {
        // 创建a标签
        var newA = document.createElement("a");
        // 设置a标签的标签内容
        newA.innerHTML = "拼多多" + i;
        // 设置a标签的href属性
        newA.href = "https://www.pinduoduo.com/";
        // 添加到content层中
        content.appendChild(newA);
    }
};

04-js动态创建元素的三种方式.html

根据数据动态生成表格

// 数组
var datas = [{
    name: '小龙女',
    subject: 'JavaScript',
    score: 100
}, {
    name: '杨过',
    subject: 'HTML',
    score: 98
}, {
    name: '陆无双',
    subject: 'CSS',
    score: 99
}, {
    name: '郭靖',
    subject: 'Java',
    score: 88
}, {
    name: '黄蓉',
    subject: 'PHP',
    score: 20
}];

// 获取tbody标签对象
var tbody = document.querySelector("tbody");

// 使用数组的map方法
var newArr = datas.map(function (item) {
    // 定义字符串
    var str = "";

    // 拼接
    str += '<tr>';

    // for...in遍历对象
    for (var attr in item) {
        str += '<td>' + item[attr] + '</td>';
    }

    // 拼接
    str += '<td><a href="javascript:void(0)" onclick="this.parentNode.parentNode.remove()">删除</a></td>';
    str += '</tr>';

    // 返回str字符串
    return str;
});

console.log(newArr);
// 设置tbody的标签内容
tbody.innerHTML = newArr.join("");

07-课堂练习-根据数据动态生成表格.html

08-课堂练习-根据数据动态生成表格.html

事件高级

传统注册方式(传统绑定方式)

传统绑定语法语法
dom对象.on事件类型 = 匿名函数或者有名函数名
传统绑定方式特点
1. 同一个DOM对象绑定同一个类型事件多次, 后面绑定的事件驱动函数会覆盖前面绑定的
2. 没有兼容性问题
3. 事件驱动函数里面this指向绑定事件的那个DOM对象

var div1 = document.getElementById("div1");
div1.onclick = function () {
    console.log("this=>", this);
    console.log("window=>", window);
    console.log("window === this", window === this);
    console.log("div1的click事件111111");
    console.log("");
}

function abc() {
    console.log("this=>", this);
    console.log("window=>", window);
    console.log("window === this", window === this);
    console.log("div2的click事件");
    console.log("");
}

div1.onclick = abc;

事件监听方式

语法

dom对象.addEventListener(“不带on的事件类型” , 匿名函数或者有名函数名 );
特点
1. 同一个DOM对象绑定同一个类型事件多次, 会绑定顺序叠加触发事件驱动函数
2. 有兼容性问题, IE9以及IE9以后的主流浏览器才可以使用该addEventListener监听方式
3. 在事件驱动函数中,this指向绑定这个事件的DOM对象

var div1 = document.getElementById("div1");
div1.addEventListener("click", function () {
    console.log("this=>", this);
    console.log("window=>", window);
    console.log("window === this =>", window === this);
    console.log("div1的click事件11111");
    console.log("");
});

function fn() {
    console.log("我是fn函数");
    console.log("this=>", this);
    console.log("window=>", window);
    console.log("window === this =>", window === this);
    console.log("div2的click");
    console.log("");
}
div2.addEventListener("click", fn);

IE9之前事件监听方式了解

语法
dom对象.attachEvent(“带on的事件类型”, 匿名函数或者有名函数名 )
特点
1. 同一个DOM对象绑定同一个事件多次, 按绑定顺序的倒序叠加执行事件驱动程序
2. 有兼容问题,需要低版本的IE浏览器才可以使用该绑定方式(IE 5 6 7 8 9 10)
3. 事件驱动程序中this指向window对象

var div1 = document.getElementById("div1");
div1.attachEvent("onclick", function () {
    console.log("this=>", this);
    console.log("window=>", window);
    console.log("window === this =>", window === this);
    console.log("div1的click事件11111");
    console.log("");
});

function fn() {
    console.log("this=>", this);
    console.log("window=>", window);
    console.log("window === this =>", window === this);
    console.log("div1的mouseover");
    console.log("");
}
div1.attachEvent("onmouseover", fn);

删除事件（解绑事件）

解绑传统绑定的事件语法

dom对象.on事件类型 = null;
1
div1.onclick = null;
解绑addEventListener绑定的事件语法

dom对象.removeEventListener(“不带on事件类型”, 有名函数名 )
1
div2.removeEventListener("click", fn);
解绑attachEvent绑定的事件语法

dom对象.detachEvent(“带on事件类型”, 有名函数名 )
1
div3.detachEvent("onclick", fn4);

手动触发指定DOM对象的指定事件

语法一手动触发传统绑定方式要记

dom对象.on事件类型() 可以手动触发传统绑定的事件

比如:

dom对象.onclick();

var objDiv = document.querySelector("div");
objDiv.onclick = function () {
    this.innerText = "div被点击了"
    this.style.backgroundColor = "skyblue";
}

var btns = document.querySelectorAll("button");
btns[0].onclick = function () {
    objDiv.onclick();
}

事件模型(DOM事件流)

事件
1. 事件是HTML和Javascript交互的驱动器, 事件是文档或者浏览器窗口中发生的，特定的交互瞬间。
2. 事件是用户或浏览器自身执行的某种动作，如 click, load 和 mouseover 都是事件的名字。
3. 事件是 javaScript 和 DOM 之间交互的桥梁。
事件流
事件流, 即是一个事件发生的流程或者说流转, 从开始到结束, 都发生了什么

事件发生时会在元素节点之间按照特定的顺序传播, 这个传播过程, 我们就称之为DOM事件流.
事件流有三个阶段
1. 捕获阶段 Capture Phase; 从上到下, 层层传递, 直到目标接收
2. 目标阶段 Target Phase; 确认目标, 进行处理
3. 冒泡阶段 Bubbling Phase; 处理结束, 往上传递.
先捕获阶段=>目标阶段=>冒泡阶段
注意: 监听绑定方式addEventListener()方法中第三个参数可以控制是在冒泡阶段触发还是在捕获阶段触发
注意:
1. JS代码建议执行捕获或者冒泡两个阶段中的其中一个阶段
2. 传统绑定事件方式跟attachEvent绑定事件的方式只能得到”冒泡阶段”
3. addEventListener(type,listener,[,useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序; 如果是false(默认不写就是false),表示事件冒泡阶段调用事件处理程序.
4. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡.
5. 另外需要注意, 不是所有事件都会冒泡的, 有些事件是没有冒泡的,比如onmouseenter,onmouseleave
6. 事件冒泡有时候会带来麻烦,有时候又会帮助我们很巧妙的做某些事件,我们会学习事件委托,事件委托(事件代理)的原理就是事件冒泡
冒泡阶段触发,需要HTML标签是”嵌套关系(父子关系)”, 而且需要都绑定事件, 接着,触发子元素事件(子元素事件不触发也可以)的时候, 会逐级向上传播, 把父辈元素相同的事件也会触发

01-事件模型(DOM事件流)介绍以及冒泡阶段.html

02-捕获阶段.html

03-IE低版本浏览器绑定方式的事件流.html

逻辑与&& 以及逻辑或|| 的高级用法

逻辑或以及逻辑与的高级用法( 主要看&& || 前面第一个值转成布尔以后是真值还是假值 )
&&逻辑与的高级用法逻辑与,假前真后
只要”&&”前面类型转换以后的值为false，无论”&&”后面是true还是false，结果都将返”&&”前面的值;

只要”&&”前面类型转换以后的值为true，无论”&&”后面是true还是false，结果都将返”&&”后面的值;
1
2
3
console.log(10 && "abc"); //abc
console.log(undefined && "abc"); //undefined
console.log(-5 && 6); //6

||逻辑或的高级用法逻辑或, 真前假后

只要”||”前面类型转换以后的值为false, 不管”||”后面是true 还是 false，都返回 “||” 后面的值。

只要”||”前面类型转换以后的值为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。

console.log(undefined || 123); // 123
console.log("" || 123); // 123
console.log(" " || 123); // " "
console.log(true || 123); // true
console.log(false || 123); // 123
console.log("abc" || 123); // "abc"
console.log(NaN || 456); // 456

事件对象的属性和方法

属性/方法	描述
e.target	返回触发事件的对象。标准属性。 🧡
e.srcElement	返回触发事件的对象。非标准属性，IE6~8使用。
e.type	返回事件的类型字符串，例如 “click”、”mouseover”，不包含”on”前缀。
e.stopPropagation()	阻止事件冒泡的方法。标准方法。 🧡
e.cancelBubble = true	阻止事件冒泡的属性，非标准属性，IE6~8使用。
e.preventDefault()	阻止默认事件（默认行为）的方法。标准方法，例如阻止链接跳转。 🧡
e.returnValue = false	阻止默认事件（默认行为）的属性，非标准属性，IE6~8使用。

event(事件对象)详解参考 https://www.cnblogs.com/websmile/p/8807334.html

阻止事件冒泡

// 阻止事件冒泡兼容写法
if (e.stopPropagation) {
    e.stopPropagation();
} else {
    e.cancelBubble = true;
}

07-阻止事件冒泡.html

阻止默认行为

默认行为的意思就是浏览器对于某些标签本身会有一些行为,比如a标签, 设置了href属性以后,点击a标签会跳转

var myLink = document.getElementById("myLink");
myLink.onclick = function (e) {
    console.log("hello");

    e = e || window.event;

    // 阻止默认行为
    // console.log("e.preventDefault=>", e.preventDefault);

    // e.preventDefault();

    // e.returnValue = false;

    // 阻止默认行为
    if (e.preventDefault) {
        // IE9以及IE9以上浏览器阻止默认行为
        e.preventDefault();
    } else {
        // IE9以下浏览器阻止默认行为
        e.returnValue = false;
    }
}

事件委托

什么是事件委托(事件代理), 就是本身要给子元素绑定的事件, 不给子元素绑定, 而是给父辈元素绑定
事件委托的原理: 冒泡
事件委托的作用: 可以给动态新增的元素绑定事件

objUl.onclick = function (e) {
    /* console.log("ul的click事件");
            console.log("this=>", this);
            console.log("e.target=>", e.target);
            // nodeName获取节点名称
            console.log("e.target.nodeName=>", e.target.nodeName);
            // tagName获取标签名称
            console.log("e.target.tagName=>", e.target.tagName);
            e.target.style.color = "red";
            console.log(""); */

    if (e.target.nodeName === "LI") {
        for (var i = 0; i < this.children.length; i++) {
            this.children[i].style.color = "black";
            this.children[i].style.fontSize = "16px";
        }

        e.target.style.color = "red";
        e.target.style.fontSize = "30px";
    }
}

09-事件委托(事件代理).html

js三大家族属性

三大系列属性,这三个系列属性可以获取宽度高度以及相应的距离

注意: 三大系列属性返回值都是’数值’,不带单位, 只能”获取”,不能”设置”

元素可视区 client

属性	描述
dom对象.clientWidth	width + 左padding + 右padding
dom对象.clientHeight	height + 上padding + 下padding
dom对象.clientLeft	左边框的大小
dom对象.clientTop	上边框的大小

[05-js三大家族-元素可视区 client.html](....\web\每日代码\25_DOM\05-js三大家族-元素可视区 client.html)

元素偏移量 offset

属性	描述
dom对象.offsetWidth	返回自身包括padding、边框、内容区的总宽度，返回数值不带单位，其实就是盒子的真实宽度
dom对象.offsetHeight	返回自身包括padding、边框、内容区的总高度，返回数值不带单位，其实就是盒子的真实高度
dom对象.offsetParent	返回作为该元素带有”非静态定位最近”的父辈元素，如果父辈元素都没有非静态定位则返回”body”元素
dom对象.offsetLeft	返回元素相对带有”非静态定位最近”的父辈元素左方的偏移量，如果父辈都没有定位则返回相对”body”的”左”方偏移量
dom对象.offsetTop	返回元素相对带有”非静态定位最近”的父辈元素上方的偏移量，如果父辈都没有定位则返回相对”body”的”上方”偏移量

06-js三大家族-元素偏移量offset.html

元素滚动 scroll

属性	描述
dom对象.scrollWidth	返回自身实际的宽度,不含边框,返回数值不带单位
dom对象.scrollHeight	返回自身实际的高度,不含边框,返回数值不带单位
dom对象.scrollLeft	返回被卷去的左侧距离,返回数值不带单位
dom对象.scrollTop	返回被卷去的顶部距离,返回数值不带单位
window.pageXOffset	html对象获取水平滚动条距离 IE9以及IE9以上主流浏览器可以使用
window.pageYOffset	html对象获取垂直滚动条距离 IE9以及IE9以上主流浏览器可以使用

body对象获取垂直滚动条距离

1	console.log("body对象获取垂直滚动条距离:" + document.body.scrollTop);

body对象获取水平滚动条距离

1	console.log("body对象获取水平滚动条距离:" + document.body.scrollLeft);

html对象获取垂直滚动条距离

1	console.log("html对象获取垂直滚动条距离:" + document.documentElement.scrollTop);

html对象获取水平滚动条距离

1	console.log("html对象获取水平滚动条距离:" + document.documentElement.scrollLeft);

封装一个兼容写法获取页面滚动的距离

function getScroll() {
    return {
        x: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        y: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    }
}

[10-js三大家族-元素滚动 scroll.html](....\web\每日代码\25_DOM\10-js三大家族-元素滚动 scroll.html)

鼠标事件对象

鼠标事件中常用的属性及其描述：

属性	描述
e.clientX	返回鼠标相对于浏览器窗口可视区（不包括滚动条距离）的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区（不包括滚动条距离）的Y坐标
e.pageX	返回鼠标相对于文档页面（包括滚动条距离）的X坐标，IE9+支持
e.pageY	返回鼠标相对于文档页面（包括滚动条距离）的Y坐标，IE9+支持
e.offsetX	返回鼠标指针相对于目标节点内边（元素内）位置的X坐标
e.offsetY	返回鼠标指针相对于目标节点内边（元素内）位置的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

注意: e.pageX/e.pageY 鼠标在页面中的位置有兼容性问题从IE9以后才支持

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent

**扩展:**IE无法兼容pageX/pageY解决参考: https://www.cnblogs.com/mushuizzz/p/11847172.html

获取鼠标在盒子内的坐标

var objDiv = document.querySelector("div");
// 给div绑定鼠标移动事件
objDiv.onmousemove = function (e) {
    // console.log(e.offsetX, e.offsetY);
    // console.log(e.clientX - objDiv.offsetLeft, e.clientY - objDiv.offsetTop);
    // console.log(e.pageX - objDiv.offsetLeft, e.pageY - objDiv.offsetTop);
    
    // this.innerText = "x坐标是" + (e.clientX - objDiv.offsetLeft) + " y坐标是 " + (e.clientY - objDiv.offsetTop);
    this.innerText = "x坐标是" + e.offsetX + " y坐标是 " + e.offsetY;
}

获取计算以后样式属性值 window.getComputedStyle

通过 dom对象.style.css属性名的方法获取的样式只能是行内式样式属性值内嵌式和外链式样式都无法获取
获取计算以后样式属性值 window.getComputedStyle( element, [pseudoElt] ) 该方法返回一个对象
参数说明
1. element 用于获取计算样式的Element, 就是DOM对象
2. pseudoElt 可选指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。
参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

console.log(window.getComputedStyle(myDiv));
console.log(window.getComputedStyle(myDiv)["color"]);
console.log(window.getComputedStyle(myDiv).color);
console.log(window.getComputedStyle(myDiv, null).color);
console.log(window.getComputedStyle(myDiv, "::after").color);

[02-获取计算以后样式属性值 window.getComputedStyle.html](....\web\每日代码\26_DOM\02-获取计算以后样式属性值 window.getComputedStyle.html)

延时器和定时器

延时器和定时器的方法都属于window对象
参数说明
1. function 是你想要在到期时间 (delay毫秒) 之后执行的函数。
2. delay 延迟的毫秒数, 取值数值, 单位是毫秒一秒等于 1000 毫秒
延时器, 延迟多久以后, “仅执行一次”指定的代码块
全局的 setTimeout() 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
开启延时器语法
window.setTimeout( function, delay )

返回值timeoutID是一个正整数，表示延时器的编号。这个值可以传递给clearTimeout()来取消该延时器。
清除延时器语法
clearTimeout( timeoutID ) 方法取消了先前通过调用setTimeout()建立的定时器。

参数说明: timeoutID 您要取消定时器的标识符。该 ID 由相应的setTimeout()调用返回。

var btns = document.querySelectorAll("button");

function fn1() {
    console.log("我是fn1函数~~~");
}

var timeoutID1 = null;
var timeoutID2 = null;

btns[0].onclick = function () {
    if (timeoutID1 === null) {
        // 匿名函数
        timeoutID1 = window.setTimeout(function () {
            console.log("hello");
        }, 3000);
    }

    if (timeoutID2 === null) {
        // 有名函数
        timeoutID4 = window.setTimeout(fn1, 2000);
    }
};

btns[1].onclick = function () {
    window.clearTimeout(timeoutID1);
    window.clearTimeout(timeoutID2);
};

03-延时器.html

定时器, 每隔指定时间, 就执行一次指定的代码块不断重复执行
setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。
开启定时器语法
window.setInterval(function, delay);

返回值一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器。
清除定时器语法
window.clearInterval(intervalID);

function fn() {
    console.log("fn函数");
}

var intervalID1 = null;
var intervalID2 = null;

var btns = document.querySelectorAll("button");
btns[0].onclick = function () {
    if (intervalID1 === null) {
        intervalID1 = window.setInterval(function () {
            console.log("hello");
        }, 500);
    }

    if (intervalID2 === null) {
        intervalID2 = window.setInterval(fn, 2000);
    }
}

btns[1].onclick = function () {
    window.clearInterval(intervalID1);
    window.clearInterval(intervalID2);

    intervalID1 = null;
    intervalID2 = null;
}

04-定时器.html

顶级对象window

window对象是浏览器的顶级对象,它具有双重角色.

它是JS访问浏览器窗口的一个接口.
它是一个全局对象. 定义在全局作用域中的变量、函数会变成window对象的属性和方法
在调用的时候可以省略window, 比如我们前面学习alert(),prompt()都属于window对象的方法
**注意:**window对象下有一个特殊属性window.name, window.name的属性值是一个字符串
window.top属性也是window对象中一个内置属性, 它的属性值是指向回window对象自身 top属性值修改不了

避免使用name和top作为变量名

name作为变量名的时候, name的值一定会被改成字符串类型

var name = 123;
console.log(name, typeof name);
var name = true;
console.log(name, typeof name);
console.log("");
console.log("");

top变量名的值会一直指向window对象自身修改不了

console.log("top=>", top);
console.log("top === window =>", top === window);
var top = 10;
console.log("top=>", top);
var top = false;
console.log("top=>", top);
console.log("");
console.log("");

window对象的属性

属性	功能
window.innerWidth	获取浏览器内部的宽度，不包含浏览器的左右两边边框。
window.innerHeight	获取浏览器内部的高度，不包含浏览器的菜单栏、地址栏以及上下的边框。
window.outerWidth	获取整个浏览器的宽度，包括浏览器的边框。
window.outerHeight	获取整个浏览器的高度，包括浏览器的边框。

确认框

1	window.confirm("提示信息");

封装缓动框架

// 封装一个获取计算以后样式属性值的方法
function getStyle(dom, attr) {
    return window.getComputedStyle(dom)[attr];
}


// 版本三: 封装缓动框架(添加回调函数)
/**
 * 封装元素js缓慢动画框架
 * 参数1 {object} dom  要做动画的dom对象
 * 参数2 {object} obj 要做动画的一对或者多对CSS属性名和目标值 组成的对象
 * 参数3 可选参数 {function} callback  动画完成以后,要调用的函数  回调函数就是满足一定条件才调用的函数
 */

function animate(dom, obj, callback) {
    // 清除之前的定时器
    clearInterval(dom.intervalId);

    // 开启定时器
    dom.intervalId = setInterval(function () {
        // 在定时器内部定义一个变量, 保存是否所有CSS属性都达到了目标值
        var flag = true; // 假设所有属性已经达到了目标

        // for...in遍历obj对象    attr就是css属性名
        for (var attr in obj) {
            // opacity属性特殊处理
            if (attr == "opacity") {
                // 获取目标值
                var target = obj[attr] * 100;

                // 获取当前dom的attr对应的属性值
                var curVal = parseFloat(getStyle(dom, attr)) * 100;

                // 判断是否达到目标值
                if (curVal != target) { // 如果没有达到
                    // 修改flag变量的值
                    flag = false;
                }
                // 缓慢动画的意思就是速度由快变慢, 运动速度越来越慢
                // 缓慢动画公式:  速度 = ( 目标值 - 当前值 ) / 10;
                var speed = (target - curVal) / 10;
                // 因为速度有可能得到小数, 小数会导致我们无法达到目标值, 所以需要对速度进行取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                // 设置dom对象对应的attr属性值
                dom.style[attr] = (curVal + speed) / 100;
            } else if (attr == "z-index" || attr == "zIndex") {
                //  z-index或者zIndex属性特殊处理
                dom.style[attr] = obj[attr];
            } else {
                // 获取目标值
                var target = obj[attr];

                // 获取当前dom的attr对应的属性值
                var curVal = parseFloat(getStyle(dom, attr));


                // 判断是否达到目标值
                if (curVal != target) { // 如果没有达到
                    // 修改flag变量的值
                    flag = false;
                }

                // 缓慢动画的意思就是速度由快变慢, 运动速度越来越慢
                // 缓慢动画公式:  速度 = ( 目标值 - 当前值 ) / 10;
                var speed = (target - curVal) / 10;
                // 因为速度有可能得到小数, 小数会导致我们无法达到目标值, 所以需要对速度进行取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                // 设置dom对象对应的attr属性值
                dom.style[attr] = curVal + speed + "px";
            }
        }

        // for...in结束,就表示所有属性都遍历完毕了
        if (flag) { // 判断flag的值
            // 清除定时器
            clearInterval(dom.intervalId);
            // 动画完成了,所以我们可以调用回调函数, 前提是存在回调函数
            if (callback !== undefined && typeof callback === "function") {
                callback();
            }
        }
    }, 15);
}

JSON数据格式

什么是JSON数据格式
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。由于其利于阅读和编写、同时也方便机器进行解析和生成。这使得JSON成为最理想的数据交换语言。
JSON数据格式的应用场景
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。由于其利于阅读和编写、同时也方便机器进行解析和生成。这使得JSON成为最理想的数据交换语言。

JSON格式的定义语法(定义JSON对象)

{
  "name":"Mark",

  "age":18,

  "mobile":"13586007445"
}

JSON对象与JS对象的区别
1. JSON格式的数据，其键名必须使用”双引号”引起来
2. JSON格式的数据，”不能出现成员方法，只能是成员属性”
3. JSON格式的数据, 最后一个逗号不能写

注意：访问JSON对象的属性, 跟访问JS对象的属性方式一样

遍历JSON对象的属性, 跟遍历JS对象的属性方式一样

// 访问json对象属性
console.log(obj.id);
console.log(obj.name);
console.log(obj.age);
console.log(obj["id"]);
console.log(obj["name"]);
console.log(obj["age"]);
console.log("");
console.log("");
// 遍历json对象属性
for (var attr in obj) {
    console.log("attr=>", attr);
    console.log("obj[attr]=>", obj[attr]);
    console.log("");
}

JSON数组
JSON数组意思就是把JSON对象放在一个数组里面
JSON格式的字符串与JS对象的转换 🧡
json对象转成json字符串 JSON.stringify(json对象)
1
2
var jsonStr = JSON.stringify(obj);
console.log(jsonStr, typeof jsonStr);
json字符串转成json对象 JSON.parse(json字符串)
1
2
var obj2 = JSON.parse(jsonStr);
console.log(obj2, typeof obj2);

BOM（Browser object model 浏览器对象模型）

BOM 介绍

BOM( Browser object model 浏览器对象模型) 提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window对象。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM的构成; BOM 比 DOM 更大，因为它包含 DOM。
BOM的核心对象是window, window包含document,location,navigator,screen,history

BOM中的location对象

什么是location对象
window对象给我们提供了一个location属性用于”获取”或”设置”浏览器的URL(网址),并且可以用于解析URL.因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象
URL介绍了解
统一资源定位符(Uniform Resource Locaotr,URL) 是互联网上标准资源的地址. 互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它.(url可以简单理解为是某个网址)
URL的一般语法格式如下:
protocol://host[:port]/path/[?query]#fragment

例：https://www.mi.com/shop/buy/detail?product_id=10000203&selected=10000203#bottom

一个URL由以下几部分组成:

组成部分	说明
`protocol`	通信协议，常见的有`http://`、`https://`、`ftp://`等
`host`	主机(域名)，例如：`www.mi.com`
`port`	端口号，可选，省略时会使用默认端口，比如http协议默认端口为80; https协议默认端口为443
`path`	路径，由零个或多个`/`符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址比如”/shop/buy/detail”
`query`	参数，以键值对的形式通过 & 符号分隔开
`fragment`	片段，以 # 后面的内容为标识，常见于链接的锚点

location对象的属性

属性	返回值
`location.href`	获取或设置URL 🧡
`location.protocol`	获取通信协议，常见的有`http:`、`https:`等
`location.host`	返回主机(域名)
`location.port`	返回端口号，如果没有写则返回空字符串
`location.pathname`	返回路径
`location.search`	返回参数 🧡
`location.hash`	返回片段(`#`)后面的内容，常见于链接的锚点

location对象的常见方法

方法	返回值
`location.assign(网址)`	跳转页面并记录浏览历史，可实现后退功能
`location.replace(网址)`	替换当前页面，不记录浏览历史，无法后退
`location.reload()`	重新加载页面，相当于刷新，返回值为`undefined`
`location.reload(true)`	强制重新加载页面，无视缓存，返回值为`undefined`

BOM中的history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

注意: 如果想要使用history对象,那么浏览器必须有历史记录

history对象方法

方法	功能
`history.back()`	后退到上一个页面
`history.forward()`	前进到下一个页面
`history.go(n)`	前进或后退n个页面，其中n为正值表示前进，n为负值表示后退

例：history.go(1)代表前进一个页面; history.go(-1)代表后退一个页面; 🧡

注意:

history.go(1) 等价于 history.forward()

history.go(-1) 等价于 history.back()

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/History

BOM中的navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 navigator.userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。(也就是返回当前浏览器的用户代理。)

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator

BOM中的screen对象

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Screen

DOM（Document Object Model——文档对象模型）

DOM 介绍

事件基础

事件概述

事件三要素

事件的绑定方式

动态绑定事件

DOM元素获取

获取DOM元素的方法有如下:

根据ID获取元素

根据标签名获取元素

根据标签的name属性获取元素 返回值是一个伪数组

H5新增获取元素方式 IE低版本浏览器不支持(IE678)

获取特殊元素( body,html )

常用事件

onchange事件

oninput事件

常用键盘事件

常用鼠标事件

mouseenter和mouseover的区别

scroll事件

滚动窗口至文档中的特定位置

window对象的常见事件

页面（窗口）加载事件（两种）

调整窗口大小事件

DOM对象操作

DOM对象操作双标签的标签内容

DOM对象操作表单元素属性

DOM对象操作样式

排他操作

自定义属性操作

节点操作(操作DOM结构,添加标签,删除标签等)

节点概述

节点操作

父级节点 🧡

子节点 🧡

获取子元素节点 🧡

获取第1个子节点

获取最后1个子节点

获取第1个子元素节点 🧡

获取最后1个子元素节点 🧡

兄弟节点

下一个兄弟节点

上一个兄弟节点

下一个兄弟元素节点（有兼容性问题） IE9以上才支持

上一个兄弟元素节点（有兼容性问题） IE9以上才支持

创建节点 🧡

添加节点 🧡

删除节点 🧡

复制（克隆）节点

js动态创建元素的三种方式

document.write()

element.innerHTML

document.createElement()

根据数据动态生成表格

事件高级

传统注册方式(传统绑定方式)

传统绑定语法语法

传统绑定方式特点

事件监听方式

IE9之前事件监听方式 了解

语法

特点

删除事件（解绑事件）

手动触发指定DOM对象的指定事件

事件模型(DOM事件流)

事件

事件流

事件流有三个阶段

先捕获阶段=>目标阶段=>冒泡阶段

注意:

逻辑与&& 以及 逻辑或|| 的高级用法

&&逻辑与的高级用法 逻辑与,假前真后

||逻辑或的高级用法 逻辑或, 真前假后