.target不行时，试试.currentTarget .target是点击或操作的(可能是a的span)，.currentTarget是监听的 T23-4-23.34
location: location.href 当前网站地址，可以location.href='http://' + str 更改跳转页面(模拟用户在地址栏输入)。
可以选择使用.id 来调试
刷新页面后编辑内容消失，变更时用localstorage存
调bug1.0：
iconImg = document.createElement('img')
if (hash[row[index2]]) {
iconImg.src = 'http://' + hash[row[index2]] + '/favicon.ico'
}
keybd.appendChild(iconImg)
上面正确，下面错误。原因应该是，如果不满足条件生成不了iconImg，会出现指定混乱。
if (hash[row[index2]]) {
iconImg = document.createElement('img')
iconImg.src = 'http://' + hash[row[index2]] + '/favicon.ico'
}
keybd.appendChild(iconImg)
出错时候，先看target指向哪里，然后修改target指向的东西。例如： iconImg.onerror = function (xxx) {
// console.log('error here!!!!!!!!!')
// console.log(xxx)
xxx.target.src = './img/13.png'
}
bug未解决1.0 ？？
var div1 = tag('div', {
className: 'row' //三行
})
function tag(tagName, attributes) {
var element = document.createElement(tagName)
for (var key in attributes) { //key 为 className，id，textContent
console.log(key)
// element[key] = attributes[key] //这个可以
element.key = attributes[key] //这个不行
}
return element
}
错误监听：元素 .onerror属性
拿元素兄弟节点：.previousSibling .nextSibling 注意，可能会找到回车，记得多.几次（详情见mdn）
.nodeType：可以与上一条结合使用，.nodeType === 3 是文本， ===1 是元素节点 详情见nodeType mdn
获取页面宽高： var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
if无花括号只管后一行
console.log(x)
var x = 1 看似先后执行，实际上顺序为 var x; console.log(x); x = 1; 不会报错，会undefined 很烦。。易bug
canvas context需要在设定好画板大小后才可以使用 var context = yyy.getContext('2d');
// context.strokeStyle = 'red' //必须在设定好画板大小后才有用。
鼠标不点击，但点击效果：.click()方法。可以用于a标签
7种数据类型：1.数字 number 2.字符串 string 3. 布尔 boolean 4. symbol(符号) 5. null 6. undefined 7. 对象 object（function是对象）
除了前六种，其他都是对象。
null 和 undefined区别：
1. 变量没有赋值--undefined 2. 有一个对象object，但现在没有赋值，推荐null。 有一个非对象，目前不想给赋值-- undefined
浏览器console.log瞎打的，不注重格式
可以对象里面套对象（都hash表）
typeof bug: bug1 type of null : 'object' typeof function : 'function'(没有这类数据类型)
变量a是否声明过： if('a' in window)
知道对象有哪些key：Object.keys
对象的keys是无序的。
Base64：字符串->base64编码（仅限ascii编码） atob(str) base64->64 : btoa(str)
var name = 'x' object.name name是字符串的name。相当于从object找的key为'name'，其与object['name']相同。 object[name] 则为object[ 'x' ]
转string
null, undefined 无toString() obejct toString() 可以但得不到我们想要的，想得到类似
"{name: 'efho'}" 必须自己写函数
console.log 原则上只接受字符串。
数字必须加括号 toString 例如：(1).toString()
简单变字符串--与空字符串相加 xxx + '' 所有都可以转为string
与字符串相加，优先转字符串。 例如：1+'1' = '11'
还有一个方法，window.String(xxx) 功能和+空字符串一样强大。
转boolean：
Boolean(0) = false , Boolean(1) = true, Boolean('') = false , Boolean(' ') = true ()Boolean(null) = false Boolean(undefined) = false. Boolean({}) = true
也可以用 !!两个感叹号
Boolean后为false : number: 0,NaN string: '' 空字符串 null为false，undefined为false
所有object都是true 包括 array和function
Falsy 5个 0 NaN null undefined '' Boolean后为false
垃圾回收
把每个页面用完的内存还给浏览器给别的页面
什么时候垃圾回收：如果一个对象没有或者失去被引用，它就是垃圾，将被回收。
回收需要费cpu，不一定什么时候回收
有一好题目，
var fn = function(){}
document.body.onclick = fn
var fn = null 此时function(){}的内存被回收了吗？没有。因为 document.body.onclick 和 fn 在stack中保有function(){}的内存地址，fn的凉了，另一个还在。
但是如果页面关闭，全凉
IE6 相互指但失去了stack内存地址的内存块不会被回收，会垃圾堆积。可以使用 window.onunload = function(){
document.body.onclick = null
}
如果监听100个div的onmouse，什么的，需要100个上图所示代码。
浅拷贝与深拷贝
var a = 1 b变不影响a，则是深拷贝
var b = a
b = 2
a 还是 = 1
基本类型（除了对象），简单的赋值就是深拷贝。
////////////////////////////////////
var a = {name:'a'} var b = a b.name = 'b'，此时a.name = 'b' 此时是浅拷贝。
JS中的对象
浏览器 哪里都可以访问到 window
window属性分两类
1. ecmaScript 规定。parseInt parseFloat Number String Boolean Object. window.setTimeout 在多少毫秒后执行某函数。
2. 私有、浏览器自己搞得（chrome/firefox） alert 弹框提示 prompt 用户填写 confirm用户确认 console 开发者打印。 document（文档）代表能对文档的一切操作，是私有的！！！自己的规范是DOM（W3C制定）window.history（浏览器专属对象）（BOM标准） 可以返回上一界面。
1. Number('1') 2. var n = new Number(1) 把1包装成了对象！！！stack存地址，调用valueOf()函数获取值（有了valueOf这一属性）。但是 var n = 1 也可以toString()，实际上，BE搞了技巧。var n = 1 n.toString() === var n = 1; temp = new Number(n); n = temp.toString(); 之后temp被消除 var n = 1; n.xxx = 2; 可以，不报错。 然而，打印n.xxx为undefined。因为第一个temp被抹杀了，第二个里没有xxx这个属性
String()和Number()类似，var a = 'fgsgsdg'也就是在stack，要各种其他函数属性都有temp变量。记忆几个函数： a.charCodeAt(0) = 97 ，unicode编码。 'a'.charCodeAt(0).toString(16) = '61' 可以16进制表示97
重点API
去掉字符串两边的空格(用户输入账号密码。。)： a = ' safa '; a.trim();即可
字符串连接: s1.concat(s2)
字符串切片：slice 例如：var s1 = 'hello' s1.slice(0,2) = 'he' 包前不包后。
字符替换：var s1 = 'hello' s1.replace('e', 'o') = 'hollo'
Boolean: 也基本类似。
var f = false var f2 = new Boolean(false) if(f){console.log(1)} if (f2){console.log(2)} !!!打印这个，所有对象都是truey。
对象：
var o1 = {} var o2 = new Object() 这两个语句完全没区别
最大是Object类，String、Number、Boolean、Function（但是很特殊先不考虑他，后面讲）是Object子类，他们三个的实例对象拥有属性__proto__指向一片共有空间，那片空间里还有__proto属性，指向另一片为Obejct准备的空间。
如果不引用那片公共空间会导致垃圾被回收，所以全局window的Number、Object、String、Boolean、Function（它特殊不指向Object.prototype后面单独讲）函数存在.prototype来指向它，让他不被回收
Object.prototype 可以看到Object原型，也叫共有属性。
var o1 = {} o1.__proto__ === object.prototype
var n1 = new Number(1) n1.__proto__ === Number.prototype n1.__proto__.__proto)) ===Object.prototype
面试题目：函数的.prototype 是对象吗？是！不是对象怎么能存hash呢。
对象.__proto__ === 函数.prototype
函数.prototype.__proto__ === Object.prototype
Function.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
JS 所有对象都有__proto__只有Object的__proto__指向null
Function 是特殊的函数，因为他还需要构建其他的函数，就和Object有点像。所以全局Function有属=属性.prototype指向某内存空间保存Function共用属性（防止垃圾回收），Function也是一个函数，所以 Function的__proto__也指向那片共用属性（不光他构建的儿子要用，当爹的也要用）因为 Function的__proto__和.prototype存的是同一个地址，所以，他们两个互相指向对方。
总结就是，Function 和 Object一样diao！
JS特效
sticky navbar 不管怎么滚动，导航不动
auto highlight navbar 滚到哪里，导航栏某一项高亮。
auto scroll smoothly 点一下导航栏每项就自动定位到那里
border从左往右滑 css js皆可做
menu 菜单 鼠标放上去出菜单
auto hide aside 自动隐藏的侧边栏。
gapless（存疑） slides（轮播）无缝轮播
loading animation 加载动画
animate when scroll 滚动才会动的动画。
延迟效果：
setTimeout(function () {
siteWelcome.classList.remove('active')
}, 2000)
滚动时效果 搜索 mdn window scroll。
window.onscroll = function(xxx){
console.log(window.scrollY)
}
JS只改变class，其他一概不动，js就能写好
鼠标进入：.onmouseenter
鼠标出来：.onmouseleave
tagName找标签：.tagName 注意，返回的是大写的！！可以.tagName.toLowerCase()变小写（文本节点.tagName是undefined。没有这个方法，会报错，算了，还是别用了）
尽量从响应事件里取信息，比如xxx.onclick = function(xxx){} 从xxx中取，JS不可靠。
.target不行时，试试.currentTarget .target是点击或操作的(可能是a的span)，.currentTarget是监听的 T23-4-23.34
阻止默认动作，不要浏览器设置的，我们自己弄 a.onclick = function(x){ x.preventDefault() } 阻止浏览器默认跳转方式
a标签.href 获取的地址是带有http协议的，
要用a.getAttribute('href')获得 我们写的的href，例如 #siteAbout
document.querySelectorAll('nav.menu >ul >li > a')
let href = a.getAttribute('href') // '#siteAbout'
查找id需要# let element = document.querySelector(href) 返回第一个元素
查找class var el=document.querySelector(".myclass");
OffsetTop得到元素距离页面最顶端距离：.offsetTop 不会变
窗口滚到指定位置：window.scrollTo(0, top) x轴不变，y轴到top
setTimeout() 只有一次
setInterval() 一直动，除非clear了
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
https://www.cnblogs.com/wenruo/p/9754576.html
window.scrollY: 页面往下滚动了多少距离
元素.offsetTop 该元素相对于页面顶部滚动距离。
tweenjs 缓动，使动画更自然。
缓动函数速查表：easings.net
获取库在线地址（不下载）：cdnjs搜索库名
html给元素属性，并用js获取：<section data-x id='siteSkills' class="skills">
不知道为什么可以这样，大概就这么给属性的。。
specialTags = document.querySelectorAll('[data-x]') 如果是只要section标签的需要写作'section[data-x]'
可以获取属性，然后获取id，
通过id获取a标签 let a = document.querySelector('a[href="#' + id + '"]') 注意必须有双引号
获取父节点 .parentNode
获取兄弟和自己 .parentNode.children
window.onscroll = function (xxx) { 这样的只能一次，赋值只能一次。
可以这样：用队列
window.addEventListener('scroll', function (x) {
findClosestAndRemoveOffset()
})
window.addEventListener('scroll', function (xxx) {
这样可以添加两次
window.addEventListener('scroll', function (xxx) 这里面用this指的是滚动的元素，可以用bind(this)约束 详情：T36-6
箭头函数内外this不变，箭头函数没传统意义上的this
阻止默认刷新
myForm.addEventListener('submit', function (e) {
e.preventDefault() // 不然默认刷新一下页面
帮用户刷新：
window.location.reload()
