总结DOM和BOM
获取网页节点：
- 标签名称：document.getElementsByTagName(' '); 返回的是一个数组
- 类名: document.getElementsByClassName(' '); 返回的是一个数组
- ID名: document.getElementById(' ') ；id名是唯一的，返回的不是数组
- name名： document.getElementsByName(' '); 返回的是一个数组
- 获取第一个节点：document.querySelector(' '); 返回的是第一个节点
- 获取所有节点： document.querySelectorAll(' '); 返回的是一个数组
//获取事件源
var lis = document.querySelectorAll('li');
//绑定事件 程序处理
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
alert(this.index)
}
}获取返回的是数组，需要遍历加事件类型
事件：
介绍：用户做的动作，⽤户和⽹⻚之间的交互⾏为（⿏标点击、⿏标进⼊、⿏标离开、键盘按下、键盘弹起、⼿指按压、⼿指移动等等）
事件三要素：1. 事件源 2.事件类型 3.事件处理程序
事件处理中的this：事件处理程序中的this指向事件源
超链接的一些特殊用法：
- 事件处理程序中最后设置return false---->取消a点击后的默认跳转⾏为
- 设置a标签的href属性值为：javascript---->给a标签的herf值设置javascript: ,表示将来点击a时，会阻⽌默认跳转⾏为，并且仅仅会执⾏js代码
- 通过a可以打开打电话应⽤---->语法：<a href="tel:">打电话</a>
- 通过a可以打开电⼦邮件应⽤---->语法：<a href="mailto:">打开邮件</a>
操作元素：
操作元素的属性：
第一种方法：获取--->语法：元素.属性名； 设置--->语法：元素.属性名 = 值；（注:class属性要写成className）
第二种方法：获取：getAttribute('属性','属性值')； 设置：setAttribute（'属性','属性值'）；删除：removeAttribute
两种方法的区别：1.通过点添加获取属性：如果是语言规定好的属性，添加就会出现在行内，否则不会出现在行内；获取属性，如果是行内属性，可以直接获取。但是行内属性是自定义的就无法获取；通过点，最好操作内置属性；通过点添加的自定义属性，可以通过点获取回来，但是不会出现在行内 2.通过Attribute添加获取属性：既可以添加内置属性，也可以添加自定义属性，都会出现在行内；获取时既可以获取内置属性们也可以获取自定义属性；无法获取通过点添加的自定义属性；Attribute只能操作出现在行内的属性
常见的属性：id、title、href、src、className、 获取内容---innerText / textContent、innerHTML
html5新增属性 data- 作⽤ ----- ⾃定义属性 取值⽅法 获得的元素.dataset 获取特定的值dataset['']
innerText和innerHTML的区别：通过innerText获取,仅仅包含⽂本通过innerHTML获取，获取标签的一切，若有⼦标签时，会包含⽂本和⼦标签通过innerText设置,若设置中包含了⼦标签，该标签不会被渲染⽽是当做普通⽂本显示通过innerHTML设置,若设置中包含了⼦标签，该标签会被渲染显示
事件属性：onclick点击事件、onmouseenter鼠标移入、onmouseleave鼠标移出、onmouseover / onmouseout
操作元素样式：1.通过style直接设置样式---->语法：元素.style.样式属性名=‘样式属性名’
2.通过修改className达到修改样式操作---->语法：元素.className=‘类名’
操作表单属性：value操作表单元素的内容；disabled操作表单元素是否禁用；checked操作表单元素是否选中；selected操作表单元素的是否选中
<body>
<button>按钮</button>
<input type="text" class="a" value="请输入...">
<input type="text" class="b" value="请输入...">
<input type="checkbox" class="c">
<select>
<option value="">中国</option>
<option value="">美国</option>
<option value="">德国</option>
<option value="">泰国</option>
<option value="">韩国</option>
</select>
<script>
var btn = document.querySelector('button');
var a = document.querySelector('.a')
var b = document.querySelector('.b')
var c = document.querySelector('.c')
btn.onclick = function () {
//alert(a.value);//弹出的是输入框里的值
alert(a.getAttribute('value')); //弹出的是默认值
//禁用
//alert(b.disabled);
b.disabled = true;
//表单元素是否选中
c.checked = !c.checked
}
</script>
</body>
节点的层级
1.父子关系
根据子节点获取父节点：⼦节点.parentNode
根据父节点获取子节点：⽗节点.childNodes、⽗元素.children、⽗节点.firstChild、⽗节点.firstElementChild、⽗节点.lastChild、⽗节点.lastElementChild
2.兄弟关系
获取上一个兄弟节点：节点.nextElementSibling、节点.nextSibling
获取上一个兄弟节点：节点.previousElementSibling、节点.previousSibling
3.节点属性
nodeType:获取节点类型（元素→ 1 属性—>2 ⽂本→3）
nodeName：获取节点名称（元素→ ⼤写的标签名 ⽂本→ #text）
nodeValue：获取节点值（元素→ null ⽂本→ ⽂本的内容）
举例：
<body>
<div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<span>
<p>你好</p>
<button>按钮</button>
</span>
</div>
<script>
var lis = document.querySelectorAll('li');
var ul = document.querySelector('ul');
var span = document.querySelector('span');
var p = document.querySelector('p');
var btn = document.querySelector('button');
console.log(lis[1].parentNode); //
console.log(ul.children); //---HTMLCollection(3)[li,li,li]
console.log(ul.childNodes);//---NodeList(7) [text, li, text, li, text, li, text]
console.log(span.firstChild);
console.log(span.firstElementChild);//---<p>你好</p>
console.log(lis[0].nextSibling);
console.log(lis[0].nextElementSibling);//---<li>222</li>
console.log(p.nodeType);//---1
console.log(btn.nodeName);//---BUTTON
console.log(ul.nodeValue);//---null
</script>
</body>元素操作
动态创建元素：
元素.innerHTML = '内容';
document.createElement(‘标签名’);
性能区别：innerHTML在追加多个元素时执⾏速度慢，性能差。不推荐使⽤；createElement⽅法执⾏速度快，性能⾼ ，在实际开发中推荐使⽤
动态追加元素：⽗元素.appendChild(⼦元素);
动态删除元素：⽗元素.removeChild(⼦元素);（只能父节点删除子节点）
插入、替换、克隆：
插入：⽗节点.insertBefore(新的节点,旧的⼦节点)
替换：⽗节点.replaceChild(新的节点,旧的⼦节点)
克隆：元素.cloneNode(true或false);
false为浅拷贝，true为深拷贝；两者的区别就是浅拷贝只复制标签，深拷贝复制标签和里面所有的元素
事件监听：
语法：事件源. addEventListener('事件类型',事件处理程序,是否捕获);
参数：事件源-->操作的元素；事件类型-->注意不要加on；事件处理程序-->执行函数；是否捕获--.true是捕获，默认为false；
事件移出：
语法：事件源.removeEventListener('事件类型',事件处理程序的名称)；
若将来要通过事件监听的⽅式移除事件时，之前注册事件要把事件处理程序单独抽取出来命名 。
事件流：
从页面中接受事件的顺序
点击事件默认在冒泡阶段执行；
事件对象：
语法: 事件源 . 事件类型 = function(e){第一个形参e就是事件对象}；
鼠标事件：
事件类型：onclick点击、onmouseenter移入、onmouseleave移出、onmousemove鼠标移动、onmousedown鼠标按下、onmouseup鼠标按钮弹起、onmouseenter不支持事件冒泡、mouseover支持事件冒泡等等；
属性：
浏览器：事件对象.clientX / 事件对象.clientY；
屏幕：事件对象.screenX / 事件对象.screenY
文档：事件对象.pageX / 事件对象.pageY；
当前元素：事件对象.offsetX / 事件对象.offsetY；
兼容写法：var pageX =event.pageX
键盘事件：
事件类型：onkeydown 键盘按下事件、onkeyup键盘弹起事件
属性：
获取键盘按键对应的键码值：事件对象.keyCode
表示alt键是否按下，返回布尔值：事件对象.altKey
表示shift键是否按下，返回布尔值：事件对象.shiftKey
表示ctrl键是否按下，返回布尔值：事件对象.ctrlKey
事件对象的公共属性和方法:
属性: 事件对象.target 获取最先触发的元素
与this的区别：this在事件处理程序中始终代表的是事件源；e.target 代表不一定是事件源，代表的是最先触发的元素【目标阶段→ document】
事件委托
把子孙元素的事件注册，完全交给子孙元素的上级元素代理。
实现：
- 给子孙元素的上级注册事件
- 在事件处理程序中，通过 事件对象.target 获取最先触发的元素
- 可以通过 事件对象.target的nodeName 属性检测最先触发的是否是指定元素
三大家族（offset、client、scroll）
offset：
获取的是当前元素距离第一个使用定位的父元素位置，如果没有就是窗口：offsetLeft、offsetTop
获取第一个使用定位的父元素，如果没有就是窗口：offsetParent
获取的是实际宽高，包括内边距外边距：offsetHeight、offsetWidth
client：
内边距加宽/高：clientHeight、clientWidth
边框的宽度：clientTop、clientLeft
scroll：
内容大小加上内边距：scrollHeight、scrollWidth
滚动了多少：scrollLeft、scrollTop
可把内容滚动到指定的坐标：window.scrollTo(x,y)
游览器对象：
window顶级对象：
全局变量和全局函数本质上都是window对象的属性或方法，window对象可以省略。
炸弹定时器：
语法：window.setTimeout(callback,time)
清除定时器：window.clearTimeout
循环定时器：
语法：window.setInterval(callback,time)
清除定时器：window.clearInterval
location对象
用来操作浏览器的地址栏
location.href 设置或获取地址、location.reload 刷新页面、location.assign 跳转页面、location.replace 替换页面
history对象
用来操作历史记录
history.length; 获取历史记录的长度、history.back(); 回退上一个历史记录、history.forward(); 前进下一个历史记录、history.go(数字); 正数，表示前进； 负数，表示回退；
navigator对象
用来获取浏览器的信息
navigator.userAgent; 用来获取浏览器的信息
onload对象
事件是页面加载事件，一般绑定给window。页面把link，scr，img图片都加载完
元素属性：
offset系列属性
获取元素的大小（内容 + padding + border）：元素.offsetWidth / 元素.offsetHeight;
获取元素的位置：元素.offsetLeft / 元素.offsetTop;
获取元素的父元素：元素.offsetParent
元素.offsetParent 和 元素.parentNode的区别：元素.offsetParent ，获取“父元素”， 按照定位关系；元素.parentNode 获取“父元素”， 按照标签关系。
client系列属性
获取元素大小（内容 + padding）：元素.clientWidth / 元素.clientHeight
获取边框厚度：元素.clientLeft / 元素.clientTop
scroll系列属性
获取元素大小（内容+ padding + 溢出）：元素.scrollWidth / 元素.scrollHeight
获取被卷起的页面间距：元素.scrollLeft / 元素.scrollTop
touch
touch事件（touchstart、touchmove、touchend）
touchEvent 事件对象
transitionend事件
事件类型：
touchstart，手指按下事件
touchmove，手指移动事件
touchend，手指松开事件
（以上事件必须通过事件监听注册事件添加：
元素.onclick = function () {}
元素.addEventlistener('click',function (){}); ）
事件对象：
事件对象.touches ：位于屏幕上的所有手指的列表；
事件对象.targetTouches ：位于该元素上的所有手指的列表；
事件对象.changedTouches：被改变的手指列表。 touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点
(手指的位置：手指对象.clientX/Y 手指相对于可视区域；手指对象.pageX/Y 手指相对于文档 )
常见手势：
本地存储
localSortage对象：把数据以字符串的方式保存本地
获取： localStorage.getItem()
设置： localStorage.setItem()
window.onload = function(){
var btnSet = document.querySelector('button')
var btnGet = document.querySelectorAll('button')[1]
var k = document.querySelector('.a')
var v = document.querySelector('.b')
btnSet.onclick = function(){
localStorage.setItem(k.value,v.value)
}
btnGet.onclick = function(){
alert( localStorage.getItem(k.value))
}
}JSON方法补充
转字符串：JSON.stringify()
转数组：JSON.parse()
var obj = {
name: '小明',
gender: '22岁'
}
var str = JSON.stringify(obj);
console.log(str);//{"name":"小明","gender":"22岁"}
console.log(typeof str + '类型');//string类型
var obj1 = JSON.parse(str);
console.log(obj1);//{name: '小明', gender: '22岁'}
console.log(typeof obj1 + '类型');//object类型
