js相关笔记（九）
1.dom和bom与前端的关系是水火交融，不可分割。
2.编程到了极致，就是内存和算法。
3.事件三要素 如唐僧念紧箍咒 孙悟空就头疼
◆事件源 --> 唐僧
◆事件类型 -->念咒
◆事件处理程序 --> 孙悟空头疼
4.在js中 事件源指的是 引发后续事件的标签，事件指的是 js已经定义好的可以直接使用的事件，事件驱动程序指的是 对样式和html的操作(Dom操作)。
5.获取事件源的四种方式
★getElement前缀表示获取一个元素对象，getElements前缀表示获取一个数组对象。
◆通过元素的id属性值来获取事件源，返回值是一个元素对象，var div=document.getElementById("box");
◆通过元素的标签名来获取事件源，返回值是一个数组对象,元素的数组，var arr1=document.getElementsByTagName("div");
◆通过元素的class属性来获取事件源，这种方式在IE678里不支持，返回值是一个数组对象，元素的数组，var arr2=document.getElementsByClassName("classname");
◆通过元素的name属性来获取事件源，返回值是一个数组对象,元素的数组，var arr3=document.getElementsByName("name");
6.事件绑定的三种方式
◆匿名函数绑定的方式，事件源.事件=function(){//事件驱动程序};
◆普通函数绑定的方式，function fn(){} 事件源.事件=fn;
◆行内绑定的方式，function fn(){} <div 事件="fn()"></div>
7.通过事件源来操作属性
◆操作style属性，事件源.style.backgroundColor="#0f0";表示通过行内样式的方式修改背景颜色，javacript中不能使用-，所以属性采用的是驼峰命名法，将原来的background-color改成了backgroundColor。
8.js的加载是和html同步加载的，所以如果使用元素时是在定义元素之前就容易报错，解决方法是使用window.onload=function(){
//使用元素
}，在页面标签加载完毕后再使用元素，window.onload有效的预防了在使用标签时是在定义标签之前的情况发生，所以便不会报错了。
9.对页面标签元素进行操作的顺序是，首先获取事件源，然后给事件源绑定事件，最后书写事件驱动程序(功能代码)
10.当页面标签拥用了id属性时，可以省略获取该标签的对象的部分的代码，直接把该标签的id属性值当作一个对象拿来用即可，但是并不推荐这么使用，因为代码的可读性就变差了，但是内部原理是，js引擎首先会去找这么一个变量，如果找不到，它就会去页面中找一个id属性值为为这个变量的标签，之后就会获取这个标签元素对象，最后进行操作。
11.javascript三个部分
◆核心（ECMAScript）欧洲计算机制造商协会规定的一个语法标准，描述了js的语法与基本对象
◆文档对象模型（DOM） 处理网页内容的方法和接口
◆浏览器对象模型（BOM） 与浏览器交互的方法和接口
12.DOM是由节点组成的，操作DOM实际上就是操作节点，DOM是html文档的模型抽象，数据是以树的形式在内存中排列的。
13.获取节点或者访问节点的方式有两种，一是直接获取，二是通过访问关系来间接获取，也就是根据自己来找与自己有关系的节点如自己的兄弟节点、父亲节点、儿子节点等等，节点的访问关系是以属性形式存在的。
◆找自己上一个兄弟节点
◇当前节点.previousElementSibling，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.previousSibling,这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己下一个兄弟节点
◇当前节点.nextElementSibling，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.nextSibling,这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己的父节点
◇当前节点.parentNode,这个找的是元素节点，自己的父元素节点
◆找自己的父节点中的第一个子节点
◇当前节点.parentNode.firstElementChild，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.parentNode.firstChild，这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己的父节点中的最后一个子节点
◇当前节点.parentNode.lastElementChild，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.parentNode.lastChild，这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己的父节点中所有的子节点
◇当前节点.parentNode.childNodes，通过自己间接找到父节点下的所有子节点 包括 文本节点等等 返回值是一个数组 （是w3c标准），但是不是很好用，因为需要判断是否是元素节点。
◇当前节点.parentNode.children，通过自己间接找到父节点下的所有子元素节点 返回值是一个数组 （非w3c标准，但是由于好用，所有浏览器都支持）
★怎么样判断一个节点是否是元素节点，nodeType==1就是元素节点，nodeType==2就是属性节点，nodeType==3就是文本节点
14.节点操作分为三种
◆节点的创建
◇使用 var 节点名=document.createElement("div"); 创建一个新的元素节点，方法中传标签名，是div就传“div” 是table 就传table
◆节点的添加
◇父节点.appendChild(节点名) 将某个节点添加到父节点里面的最下面
◇父节点.insertBefore(子节点名，参考节点名);将某个节点添加到父节点里面的 某一个参考节点的上面 如果参考节点为null 那么效果和appendChild一样。
◆节点的删除
◇父节点.removeChild(子节点) 父节点删除某个子节点
◇当前节点.parentNode.removeChild(当前节点) 自己删除自己
★节点的克隆
◇浅克隆 var 新节点=旧节点.cloneNode();//表示克隆当前旧节点，但是不会克隆旧节点内部的子节点
◇深克隆 var 新节点=旧节点.cloneNode(true);//表示克隆当前旧节点，不仅会旧节点而且还会克隆旧节点内部的子节点
14.节点的属性操作分为三种 但是在IE67中没有得到支持
◆getAttribute()//获取属性
◇对象名.getAttribute("class");表示获取类属性值，而对象名.className和对象名["className"]也是获取类属性值，两者不同之处在于，前者只是获取页面标签显示的属性值，并不会真正从对象中去找页面标签转换为对象后的属性，只会去找页面标签本身，页面标签有哪些属性，就只能找到哪些属性值，如果页面标签中没有这个属性就会直接返回一个null，后者只会获取页面标签转换为对象后的属性，转换后的对象的属性非常庞大，如果页面标签没有写，页面标签转换为的对象，该对象中也会有默认值，除非这个页面标签根本就不可能有这个属性，那么就是undefined
◇◇这两者不同的地方是前者获取的属性是存到页面标签里的，后者获取的属性是存在页面标签转换后的对象中
◇◇这两者相同的地方是前者不会去获取后者新增加的页面标签本不可能有的属性值，后者不会去获取前者新增加的页面本不可能有的属性值
◆setAttribute()//设置属性
◇对象名.setAttribute("name","img_1");表示设置元素的name属性，如果页面标签有这个属性值则会进行修改，如果页面标签没有这个属性值则会进行添加，注意点，如果添加的这个属性不是该标签应该有的，那么只能通过对象名.getAttribute()方法来获取，并不能通过 对象.该属性名 和对象["该属性名"]的方式来获取，如果新增什么原始标签本不该有的属性，这两者都是独立访问的，并不会相互影响。
◆removeAttribute()//移除属性
◇对象名.removeAttribute("name");表示移除 名为name 的属性，一定要页面标签上显示的属性才能够移除，仅仅只是移除页面标签上的属性，移除后 通过对象.getAttribute("name");再获取，返回值为null，如果通过对象.name和对象["name"]来获取则会返回默认值空字符串，所以这二者在页面标签本该有的属性上，会互相影响，但是前者针对的页面标签本身，后者针对的是页面标签转换后的对象本身
◇◇猜测是前者针对的页面标签其实后来是转换为了一个匿名对象，页面标签明显的显示了几个属性，那个匿名对象就会有几个属性。
◇◇而后者针对的页面标签转换后的对象是真正的对象，就算页面标签没有明显的显示的属性，在那个对象中也会有，并且那些属性都会被赋以默认值。
15.终止页面的超链接的默认跳转行为，可以使用return false;
◆<a href="www.baidu.com" style="display:block;" onclick="fn(); return false;" >切换</a> 表示执行一个方法后就return false;，其实行内使用的是第三种函数定义的方式，new Function("fn(); return false;");,所以页面的行内绑定事件其实是 onclick=new Function("fn(); return false;");,行内绑定事件其实绑定的函数一定得是全局的，如果你绑定的那个函数在另一个函数里面，那么那个函数就是局部的函数，所以就访问不了，自然也调用不了。
◆ a.onclick=function(){return false;//终止a链接的默认跳转行为}；表示 return false;终止 a链接的默认跳转行为，和上面的差不多，但是它使用的是第一种函数定义的方式，匿名方式绑定事件。
16.制作占位图的网站：https://placeholder.com/ ，其实不需要这个图片，可以直接用css样式模拟出来这样的图片
17.使用循环绑定事件的时候，由于函数加载时只会加载函数名，所以就会造成函数体内的i不是每一次循环的i，而是最终循环绑定事件完毕后的i，函数只有在调用的时候才会加载函数体，然而函数调用时也是循环绑定事件结束的时候，所以解决这个问题的方法是，在函数里面获取当前元素对象时，不要用 数组对象[i]的方式获取，改用this,this关键字表示，谁调用这个函数，this就会指向谁，这样就不会报错了，当函数开始报错，那么就会终止当前函数执行，当前函数就不会往下执行了，但是只是不会执行这个函数，其它的语句块会照样执行。
18.可以通过标签来找标签里面的子标签，如
根据id获取ul元素,然后根据ul元素找到内部的a标签，var ul = document.getElementById("imagegallery");，var aArr = ul.getElementsByTagName("a");
19.浏览器自带的弹窗方法，会阻塞线程，所以弹窗的时候，代码就不会往下执行了。
20.innerHTML、innerText、textContent、value属性
◆innerHTML属性是获取双标签元素<x></x>之间的内容，可以识别html标签
◆innerText属性也是获取双标签元素<x></x>之间的内容，不可以识别html标签，只能识别文本，但是在老版本火狐里面不支持innerText属性，只支持textContent属性
◆textContent属性也是获取双标签元素<x></x>之间的内容，不可以识别html标签，可以识别文本，但是在IE678里面不支持textContent属性，只支持innerText属性
◆value属性 是获取 带有value属性的标签的value属性值， 如 <input type='text' value="123" /> 或者<input type='button' value='按钮'/>
2.编程到了极致，就是内存和算法。
3.事件三要素 如唐僧念紧箍咒 孙悟空就头疼
◆事件源 --> 唐僧
◆事件类型 -->念咒
◆事件处理程序 --> 孙悟空头疼
4.在js中 事件源指的是 引发后续事件的标签，事件指的是 js已经定义好的可以直接使用的事件，事件驱动程序指的是 对样式和html的操作(Dom操作)。
5.获取事件源的四种方式
★getElement前缀表示获取一个元素对象，getElements前缀表示获取一个数组对象。
◆通过元素的id属性值来获取事件源，返回值是一个元素对象，var div=document.getElementById("box");
◆通过元素的标签名来获取事件源，返回值是一个数组对象,元素的数组，var arr1=document.getElementsByTagName("div");
◆通过元素的class属性来获取事件源，这种方式在IE678里不支持，返回值是一个数组对象，元素的数组，var arr2=document.getElementsByClassName("classname");
◆通过元素的name属性来获取事件源，返回值是一个数组对象,元素的数组，var arr3=document.getElementsByName("name");
6.事件绑定的三种方式
◆匿名函数绑定的方式，事件源.事件=function(){//事件驱动程序};
◆普通函数绑定的方式，function fn(){} 事件源.事件=fn;
◆行内绑定的方式，function fn(){} <div 事件="fn()"></div>
7.通过事件源来操作属性
◆操作style属性，事件源.style.backgroundColor="#0f0";表示通过行内样式的方式修改背景颜色，javacript中不能使用-，所以属性采用的是驼峰命名法，将原来的background-color改成了backgroundColor。
8.js的加载是和html同步加载的，所以如果使用元素时是在定义元素之前就容易报错，解决方法是使用window.onload=function(){
//使用元素
}，在页面标签加载完毕后再使用元素，window.onload有效的预防了在使用标签时是在定义标签之前的情况发生，所以便不会报错了。
9.对页面标签元素进行操作的顺序是，首先获取事件源，然后给事件源绑定事件，最后书写事件驱动程序(功能代码)
10.当页面标签拥用了id属性时，可以省略获取该标签的对象的部分的代码，直接把该标签的id属性值当作一个对象拿来用即可，但是并不推荐这么使用，因为代码的可读性就变差了，但是内部原理是，js引擎首先会去找这么一个变量，如果找不到，它就会去页面中找一个id属性值为为这个变量的标签，之后就会获取这个标签元素对象，最后进行操作。
11.javascript三个部分
◆核心（ECMAScript）欧洲计算机制造商协会规定的一个语法标准，描述了js的语法与基本对象
◆文档对象模型（DOM） 处理网页内容的方法和接口
◆浏览器对象模型（BOM） 与浏览器交互的方法和接口
12.DOM是由节点组成的，操作DOM实际上就是操作节点，DOM是html文档的模型抽象，数据是以树的形式在内存中排列的。
13.获取节点或者访问节点的方式有两种，一是直接获取，二是通过访问关系来间接获取，也就是根据自己来找与自己有关系的节点如自己的兄弟节点、父亲节点、儿子节点等等，节点的访问关系是以属性形式存在的。
◆找自己上一个兄弟节点
◇当前节点.previousElementSibling，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.previousSibling,这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己下一个兄弟节点
◇当前节点.nextElementSibling，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.nextSibling,这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己的父节点
◇当前节点.parentNode,这个找的是元素节点，自己的父元素节点
◆找自己的父节点中的第一个子节点
◇当前节点.parentNode.firstElementChild，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.parentNode.firstChild，这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己的父节点中的最后一个子节点
◇当前节点.parentNode.lastElementChild，这个找的是元素节点，但是在IE678中返回值是undefined，所以只能在非IE678中使用
◇当前节点.parentNode.lastChild，这个找的是节点，也就是文本节点属性节点注释节点都包含在内，所以不是很好用，但是在IE678中可以使用
◆找自己的父节点中所有的子节点
◇当前节点.parentNode.childNodes，通过自己间接找到父节点下的所有子节点 包括 文本节点等等 返回值是一个数组 （是w3c标准），但是不是很好用，因为需要判断是否是元素节点。
◇当前节点.parentNode.children，通过自己间接找到父节点下的所有子元素节点 返回值是一个数组 （非w3c标准，但是由于好用，所有浏览器都支持）
★怎么样判断一个节点是否是元素节点，nodeType==1就是元素节点，nodeType==2就是属性节点，nodeType==3就是文本节点
14.节点操作分为三种
◆节点的创建
◇使用 var 节点名=document.createElement("div"); 创建一个新的元素节点，方法中传标签名，是div就传“div” 是table 就传table
◆节点的添加
◇父节点.appendChild(节点名) 将某个节点添加到父节点里面的最下面
◇父节点.insertBefore(子节点名，参考节点名);将某个节点添加到父节点里面的 某一个参考节点的上面 如果参考节点为null 那么效果和appendChild一样。
◆节点的删除
◇父节点.removeChild(子节点) 父节点删除某个子节点
◇当前节点.parentNode.removeChild(当前节点) 自己删除自己
★节点的克隆
◇浅克隆 var 新节点=旧节点.cloneNode();//表示克隆当前旧节点，但是不会克隆旧节点内部的子节点
◇深克隆 var 新节点=旧节点.cloneNode(true);//表示克隆当前旧节点，不仅会旧节点而且还会克隆旧节点内部的子节点
14.节点的属性操作分为三种 但是在IE67中没有得到支持
◆getAttribute()//获取属性
◇对象名.getAttribute("class");表示获取类属性值，而对象名.className和对象名["className"]也是获取类属性值，两者不同之处在于，前者只是获取页面标签显示的属性值，并不会真正从对象中去找页面标签转换为对象后的属性，只会去找页面标签本身，页面标签有哪些属性，就只能找到哪些属性值，如果页面标签中没有这个属性就会直接返回一个null，后者只会获取页面标签转换为对象后的属性，转换后的对象的属性非常庞大，如果页面标签没有写，页面标签转换为的对象，该对象中也会有默认值，除非这个页面标签根本就不可能有这个属性，那么就是undefined
◇◇这两者不同的地方是前者获取的属性是存到页面标签里的，后者获取的属性是存在页面标签转换后的对象中
◇◇这两者相同的地方是前者不会去获取后者新增加的页面标签本不可能有的属性值，后者不会去获取前者新增加的页面本不可能有的属性值
◆setAttribute()//设置属性
◇对象名.setAttribute("name","img_1");表示设置元素的name属性，如果页面标签有这个属性值则会进行修改，如果页面标签没有这个属性值则会进行添加，注意点，如果添加的这个属性不是该标签应该有的，那么只能通过对象名.getAttribute()方法来获取，并不能通过 对象.该属性名 和对象["该属性名"]的方式来获取，如果新增什么原始标签本不该有的属性，这两者都是独立访问的，并不会相互影响。
◆removeAttribute()//移除属性
◇对象名.removeAttribute("name");表示移除 名为name 的属性，一定要页面标签上显示的属性才能够移除，仅仅只是移除页面标签上的属性，移除后 通过对象.getAttribute("name");再获取，返回值为null，如果通过对象.name和对象["name"]来获取则会返回默认值空字符串，所以这二者在页面标签本该有的属性上，会互相影响，但是前者针对的页面标签本身，后者针对的是页面标签转换后的对象本身
◇◇猜测是前者针对的页面标签其实后来是转换为了一个匿名对象，页面标签明显的显示了几个属性，那个匿名对象就会有几个属性。
◇◇而后者针对的页面标签转换后的对象是真正的对象，就算页面标签没有明显的显示的属性，在那个对象中也会有，并且那些属性都会被赋以默认值。
15.终止页面的超链接的默认跳转行为，可以使用return false;
◆<a href="www.baidu.com" style="display:block;" onclick="fn(); return false;" >切换</a> 表示执行一个方法后就return false;，其实行内使用的是第三种函数定义的方式，new Function("fn(); return false;");,所以页面的行内绑定事件其实是 onclick=new Function("fn(); return false;");,行内绑定事件其实绑定的函数一定得是全局的，如果你绑定的那个函数在另一个函数里面，那么那个函数就是局部的函数，所以就访问不了，自然也调用不了。
◆ a.onclick=function(){return false;//终止a链接的默认跳转行为}；表示 return false;终止 a链接的默认跳转行为，和上面的差不多，但是它使用的是第一种函数定义的方式，匿名方式绑定事件。
16.制作占位图的网站：https://placeholder.com/ ，其实不需要这个图片，可以直接用css样式模拟出来这样的图片
17.使用循环绑定事件的时候，由于函数加载时只会加载函数名，所以就会造成函数体内的i不是每一次循环的i，而是最终循环绑定事件完毕后的i，函数只有在调用的时候才会加载函数体，然而函数调用时也是循环绑定事件结束的时候，所以解决这个问题的方法是，在函数里面获取当前元素对象时，不要用 数组对象[i]的方式获取，改用this,this关键字表示，谁调用这个函数，this就会指向谁，这样就不会报错了，当函数开始报错，那么就会终止当前函数执行，当前函数就不会往下执行了，但是只是不会执行这个函数，其它的语句块会照样执行。
18.可以通过标签来找标签里面的子标签，如
根据id获取ul元素,然后根据ul元素找到内部的a标签，var ul = document.getElementById("imagegallery");，var aArr = ul.getElementsByTagName("a");
19.浏览器自带的弹窗方法，会阻塞线程，所以弹窗的时候，代码就不会往下执行了。
20.innerHTML、innerText、textContent、value属性
◆innerHTML属性是获取双标签元素<x></x>之间的内容，可以识别html标签
◆innerText属性也是获取双标签元素<x></x>之间的内容，不可以识别html标签，只能识别文本，但是在老版本火狐里面不支持innerText属性，只支持textContent属性
◆textContent属性也是获取双标签元素<x></x>之间的内容，不可以识别html标签，可以识别文本，但是在IE678里面不支持textContent属性，只支持innerText属性
◆value属性 是获取 带有value属性的标签的value属性值， 如 <input type='text' value="123" /> 或者<input type='button' value='按钮'/>
