DOM编程艺术总结笔记
hi hi～这里是萌芽子！前几天萌芽读完了《JavaScript DOM编程艺术》跑来跟大家分享一下，全篇读起来很愉快萌芽来做个小总结！书里基本上都是围绕案例展开的非常易理解，还讲了关于平稳退化以及浏览器不支持JS的年代需要怎么应对，虽然在这个马上都2020年的时代已经不用担心浏览器禁用JS问题但是多多少少了解一下真的是很有趣！感兴趣的小伙伴可以看看。
【 扫盲：JavaScript是由 ECMAScript + DOM + BOM 的统称，本书主要描述DOM实例(Document Object Model) 】
- 节点
- 方法
- 性能
DOM节点
文档是由节点构成的集合：元素节点、文本节点、属性节点。
像我们的<p>,<body>,<ul>之类的属于元素节点。
里面的内容比如说<p>hello,world!<p/>其中的hello,world!就是文本节点。
我们标签中的属性则为属性节点，是不是很好理解？
拿到这些节点我们就可以对他进行一个操控，也就是DOM操作。
DOM方法
获取节点
document.getElementById("intro")
document.getElementsByTagName("p")
document.getElementsByClassName("intro")操作节点
getAttribute('title') //获取属性
setAttribute('title','萌芽子') //添加/更改属性
childNodes //获取一个元素的所有子元素（注:返回的是个数组）
nodeType //打印节点 1:元素 2:属性 3:文本
nodeValue //获取节点的值（注:直接使用会返回当前元素节点的value而不是他的文本节点）
firstChild //第一个元素(注:等价于childNodes[0])
lastChild //最后一个元素传统方法
document.write() //将字符串插入文档(注:不推荐)
innerHTML //将字符串插入文档(注:推荐) DOM方法
createElement() //创建元素
createTextNode() //创建文本
appendChild() //添加节点
insertBefore（） //添加到开始位置
removeChild() //移除元素
replaceChild() //替换元素(交换元素)更改属性
document.getElementById("image").src="landscape.jpg";
document.getElementById('id1').style.color='red'事件
onmousedown //鼠标点击
onmouseup //鼠标释放
onclick //完成点击
onload //进入页面
onchange //内容更改
onmouseover //鼠标悬停
onmouseout //鼠标离开监听器
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
element.removeEventListener("mousemove", myFunction);
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:性能考虑
1.尽量少访问DOM和尽量减少标记
我们要知道，只要是查询DOM中的某些元素，浏览器都会搜索 整个DOM树 从中查找可能匹配的元素。所以我们应该将重复用到的搜索结果保存在一个变量中，之后再重用该结果就能有效地减少重复搜索！
2.合并和放置脚本
如果一个页面要引入多个js文件推荐把这些文件合并到一个js文件当中，这样就可以减少加载页面时发送的请求数量！
科普：位于<head>快中的脚本会导致浏览器无法进行加载其他文件。一般来说根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件，在下载脚本期间浏览器不会下载其他任何文件，所以推荐把js文件放入文档末尾，body标记之前，这样可以让页面变得更快，在加载脚本时，load事件依旧可以执行对文档进行的各种操作。
3.压缩脚本
压缩min版本会使代码执行速度更快。推荐工具webpack之类的打包工具都很好用的哟！
萌芽踩坑记
关于this指向
<a href="" onclick="showPic();return false">图片1</a>
//return false 可以阻止默认行为
//如果不给参数此时的this指向Window(因为这时候showPic是全局函数，是通过window直接调用的)
function showPic(){
console.log(this)
}
但是如果这个时候给他传入this的话那么则指向当前元素。
<a href="" onclick="showPic(this);return false">图片1</a>
function showPic(msg){
console.log(msg)
}
