JS-DOM学习之旅

什么是DOM?

	DOM：Document Objct Model  文档对象模型。

D：document–文档，本质是一个对象，由浏览器内置，相当于根标签html。
O：object–对象，文档中的每一个元素都是一个对象，对象上有大量的属性与方法。
M： model–树模型，一个文档就是一棵树，各个元素就是它的树枝树叶。

DOM的学习

一 、 操作节点：

1. 元素节点：就是html中的各个标签，创建后会挂载到DOM树上。
创建：createElement
挂载：appendChild 把创建出来的元素挂载到某个标签的最后面 ；
insertBefore 把元素添加到指定元素的前面。
克隆：cloneNode cloneNode()：只能克隆最外层的标签，叫浅克隆
cloneNode(true)：标签及里面的所有的元素都进行克隆，叫深克隆。
移除：removeChild 删除一个节点 注意：只有父元素才有权力移除子元素。
替换：replaceChild() 把一个元素节点换成（）里面的节点。

	<ul>
        <li>嗨 元素节点</li>
    </ul>

	// 获取当前文档中已存在的ul及其内部的li
 	let ul = document.getElementsByTagName("ul")[0];
    let li = document.getElementsByTagName("li")[0];
	// createElement
	let div = document.createElement("div"); // 在当前文档中创建一个div  但并未挂载到DOM树上
	// appendChild
	ul.appendChild(div);  // 将创建出来的div挂载到DOM树上，与li并列
	// insertBefore
	let h1 = document.createElement("h1");
	body.insertBefore(h1,div);  // 将创建出来的h1挂载到DOM树上，置于div之前 li之后
	// cloneNode
    let ul1 = ul.cloneNode();
    body.appendChild(ul1);  // 浅克隆 仅克隆一个空的ul
    // cloneNode(true)
    let ul2 = ul.cloneNode(true);
    body.appendChild(ul2);  // 深克隆  将ul及内部所以数据都克隆
    // removeChild  DOM对象中，夫元素才可以删除子元素
    body.removeChild(ul1);
    // replaceChild  新元素替换掉老元素之后，自己原先的位置不会保留
    let a = document.createElement("a");
    ul.replaceChild(a,h1);   //  ul外的a替换掉了ul内的h1  
    ul.replaceChild(div,li);  // ul内的div替换掉了ul内的li

2. 属性节点：标签的各项属性，不会挂载到DOM树上。
1）标准属性 标签中已经定义好的属性 id="box"
2）自定义属性 程序员自己写的属性 nihao="hello"
操作属性节点：
访问：obj.xxx; / obj.getAttribute(“xxx”);
设置：obj.xxx = "123"; / obj.setAttribute(“xxx”，“123”）;
删除：obj.removeAttribute("xxx");

	<ul>
        <li title="属性节点">嗨 属性节点</li>
    </ul> 

	let li = document.getElementsByTagName("li")[0];
    // 访问/获取属性节点   
    console.log(li.title); // 属性节点
    console.log(li.getAttribute("title"));  // 属性节点
    // 设置属性节点
    li.title = "打点设置属性节点";
    console.log(li.title); // 打点设置属性节点
    li.setAttribute("title","调用方法设置属性节点");
    console.log(li.getAttribute("title"));  // 调用方法设置属性节点
    // 删除属性节点
    li.removeAttributeNode(title);
    console.log(li.title); // title is not defined

3. 文本节点：开始标签与结束标签之间的文本内容，会挂载到DOM树上。
获取文本节点：li.innerHTML;
设置文本节点：li.innerHTML = "hello";

	<ul>
        <li>嗨 文本节点</li>
    </ul> 

	let li = document.getElementsByTagName("li")[0];
    // 访问/获取文本节点   
    console.log(li.innerHTML); // 嗨 文本节点
    // 设置文本节点
    li.innerHTML = "设置文本节点"; 
    console.log(li.innerHTML); // 设置文本节点

二 、 操作CSS：

1. 操作行内样式：
也就是控制标签的style属性
访问/获取：div.style.backgroundColor ；
设置：div.style.backgroundColor = "gold"；

	<div style="background-color: blue;"></div>

	let div = document.querySelector("div");
	// 访问/获取
	console.log(div.style.backgroundColor); // blue
	// 设置
	div.style.backgroundColor = "gold";
	console.log(div.style.backgroundColor); // gold

    不足：如果需要换的样式非常多，就需要写非常多的`div.style.xxx = yyy`。

2. 操作CSS类：
div.className = xxx

	<div class=""></div>
	<button>JS控制CSS类</button>

	div{
		width: 100px;
		height: 100px;
		border: 2px solid red;
	}
	.on{
	    background-color: blue;    
	}

	let div = document.querySelector("div");
	let btn = document.querySelector("button");
	btn.addEventListener("click",function(){
        div.className = "on";  // <div class="on"></div>
    });

3. 操作盒子模型：

了解这13个 API:

> client系列: 
	clientWidth： 获取盒子的内容区域width以及左右padding，即可视区域width的大小；
	clientHeight： 获取盒子的内容区域height以及上下padding，即可视区域height的大小；
	clientTop： 获取盒子上边框的大小；
	clientLeft： 获取盒子左边框的大小；
client系列只能获取值，不能设置值，且获取的是一个不带单位的整数。

> offset系列:
	offsetWidth：在clientWidth的基础上加了border；
	offsetHeight：在clientHeight的基础上加了border；
	offsetTop：获取一个定位元素相对于参考点上方的距离；
	offsetLeft：获取一个定位元素相对于参考点左方的距离；
	offsetParent：获取一个定位元素的参考点；
offsetWidth和offsetHeight只能获取值，不能设置值。

> scroll系列:
	scrollWidth: 在没有内容溢出的情况下：scrollWidth = clientWidth；
有内容溢出的情况下：scrollWidth的值约等于真实内容的宽度，只读；
    scrollHeight: 在没有内容溢出的情况下：scrollHeight = clientHeight； 
有内容溢出的情况下：scrollHeight的值约等于真实内容的高度，只读；
    scrollTop：获取垂直滚动条滚动的距离，可读可写；
	scrollLeft：获取水平滚动条滚动的距离，可读可写。

三 、事件 ：

	事件，也可以看成条件，当事件发生（条件满足）时，我们就启动预备方案
（已经写好的代码）来响应事件，进而完成一些功能。

1. 事件绑定：
HTML0级别的事件绑定 <button onclick = f() >xxx</button>
DOM0级别的事件绑定 btn.onclick = function(){} 基本属性赋值
DOM2级别的事件绑定 btn.addEventLisener() 基于事件池机制

2. 事件流以及事件传播：
事件是具有流动性的，默认情况下，事件由内向外进行传播，称为事件冒泡，当事件由外向内传播，称为事件捕获。

	// 事件冒泡
	let  son = document.querySelector("#son");
	let  father = document.querySelector("#father");
	son.onclick = function () {
        console.log("son...") 
    }
    father.onclick = function () {
        console.log("box...")
    }

现在有两个盒子分别是father与son，son是father的子盒子。当我们给son绑定的事件，在father上也会触发，即事件冒泡。

3. 事件对象：
box.onclick = function (e) { }
当点击事件发生时，浏览器会帮我们调用这个函数，进行参数的传递，浏览器会把一个对象传递到这个函数中，这个对象，我们叫事件对象。其中e仅仅是形参，通常是：e,event,ev…

4. 阻止默认事件：
这里介绍两个常见的需要阻止的默认事件：a标签的click事件；form表单的submit事件。
(1) 阻止a标签的click事件：
①：将a标签的href属性设为javascript:; 如： <a href="javascript:;"></a>
②：利用事件对象阻止默认事件：

  	a.onclick = function (e) {
        e.preventDefault() // 
    }

③：在监听器最后面加上return false;

	a.onclick = function (e) {
        return false;
    }

(2) 阻止form表单的submit事件：
①：利用事件对象阻止默认事件：

  	form.onsubmit = function (e) {
        e.preventDefault() // 
    }

②：在监听器最后面加上return false;

	form.onsubmit = function (e) {
        return false;
    }

四 、动画（定时器） ：

1. 一次性定时器：
setTimeout(()=>{},1000); 1000代表1000ms即1s，1s后浏览器会执行里面的回调函数。
关闭定时器：clearTimeout(); 使用完定时器后一定要关闭。
2. 循环定时器：
setInterval(()=>{},1000); 与一次性定时器不同，每隔1s浏览器就会执行里面的回调函数。
循环定时器会产生很多EC，如果不用了，一定要关闭定时器。
关闭定时器：clearInterval();
3. jQ中的万能动画函数animate：
animate(p,[s],[e],[fn])
p：即params，一个包括属性和终值集合；
s：即speed，动画速度"slow","normal", or "fast"或者写数值表示多少毫秒，如1000表1s；
e: 即easing，实现擦除效果(需要插件支持)；
fn：即function，在动画完成后执行的函数。

	$("span").click(function(){
		$("h1").animate({width:100px,height:100px,color:blue},1000,()=>{
		console.log("animate is great!")
		})
	})

点击了span标签后，h1的width，height，color等属性就会在一秒后变为我们设定的100px，100px，blue，并在控制台输出animate is great!