目录
一、获取元素
1.根据id获取
利用getElementById()方法。
例：
<div id="time">2019-9-9</div>
<script>
var time = document.getElementById("time");
</script>2.根据标签名获取
使用getElementsByTag()方法可以返回带有指定标签名的对象的集合。
返回的是获取过来的元素对象的集合，以伪数组的形式存储的。
例：
<ul>
<li>字1</li>
</ul>
<ul id="nav">
<li>nav里的字1</li>
</ul>
<script>
var lis = document.getElementsTagName('li');
//获取元素中的某个标签
var nav = document.getElementById('nav');
var navLis = nav.getElementsByTagName('li');
</script>3.通过HTML5新增的方法获取
（1）根据类名返回元素对象集合
document.getElementsByClassName('类名');
例：
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id=nav>
<ul>
<li>文字一</li>
<li>文字二</li>
<ul>
</div>
<script>
var box = document.getElementsByClassName('box');
//返回指定选择器的第一个元素对象，里面的选择器一定要加符号
var firstBox = document.querySelector('.box');
var nav = document.querySelector('#nav');
//返回指定选择器的所有元素对象
var allBox = document.querySelectorAll('.box');4.获取特殊元素（body，html）
（1）获取body元素
document.body;
（2）获取html元素
document.documentElement;
二、事件三要素
1.事件三要素
（1）事件源：事件被触发的对象。
（2）事件类型：如何触发，什么事件。如，鼠标点击，鼠标经过，键盘按下。
（3）事件处理程序：通过一个函数赋值的方式完成。
2.innerText和innerHTML
（1）innerText：不支持HTML标签，非标准。会去除空格和换行
（2）innerHTML：识别HTML标签。
（3）这两个属性均可读写，可以获取元素里面的内容。
3.修改元素属性
常用元素的修改属性：src、href、id、alt、title
4.修改表单
可以操作type, value, checked, selected, disabled(被禁用)
若循环点击多次。可以用flag=0或1来控制。
5.操作元素案例
（1）循环精灵图
（1）获取元素 所有li
（2）利用循环修改精灵图的背景
（2）显示隐藏文本
表单需要两个新事件，获得元素焦点onfocus，失去焦点onblur，并根据需求注册两个事件
6.使用className修改元素样式
（1） 语法：this.className="类名";
（2）如果想要保留原先的类名，两个类名用空格隔开
7.排他思想
用于给多个元素绑定相同事件，利用循环的方式。
（1）所有元素全部清除样式
（2）给当前元素设置样式
例：多个按钮，只有被点击的按钮变色，其他均为无色（仅js代码）
<Script>
var btn = document.getElementsByTagName('button');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
for (var i = 0; i < btn.length; i++)
btn[i].style.backgroundColor = '';
this.style.backgroundColor = 'red';
}
}
</Script>当替换链接时：url('+ this.src +')
鼠标经过：onmouserover
鼠标离开：onmouserout
8.获取自定义属性值
（1）element.属性：获取元素自带属性。
设置元素属性值：element.属性=‘值’
（2）element.getAttribute('属性')：主要获得自定义的属性。
设置元素属性值：element.setAttribute('属性', ‘值’)
9.H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
获取element.getAttribute
（1）兼容性获取：element.getAttribute( 'data-index' );
（2）H5新增element.dataset.index 或者 element.dataset[ 'index' ];
其中dataset是一个集合里面存放了所有以data开头的自定义属性
三、节点操作
1.概念
利用节点层级关系获取元素，如父子关系。一般节点至少拥有nodeType（节点类型），nodeValue（节点值）,nodeName（节点名称）这三个基本属性。
元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3（包含文字、空格、换行等）
2.语法
（1）获取父节点
parentNode
获得的是离节点最近的父节点，若没有父节点，返回为null。
（2）子节点
parentNode.childNodes 返回值里面包含了所有节要获得元素节点需要专门处理，不推荐使用。
parentNode.children 只返回子元素节点
（3）返回第一个孩子
parentNode.firstChild 包含文本节点和元素节点
返回最后一个孩子：parentNode.lastChild
实际开发：parentNode.children[i]。
可以通过获取孩子节点的方式实现下拉菜单
（4）兄弟节点
nextSibling 下一个兄弟节点，包含元素节点和文本节点等
nextElementSibling 下一个兄弟元素节点，IE9以上支持
（5）创建和添加节点
1.创建节点：createElement( 'tagName' )
2.添加节点：
（1）node.appendChild(child) node 父级 child 子级，将一个节点添加到子节点列表的末尾
（2）node.insertBefore(child, 指定元素) 将一个节点添加到父节点指定的子节点前面
（6）删除节点
node.removeChild(child)
阻止链接跳转：javascript:; 代替herf="#"
（7）复制节点
node.cloneNode() 若括号内参数为空或为false，只复制节点本身，不复制里面的子节点。若为true则会复制里面的子节点。
3.三种动态创造元素区别
（1）document.write()：直接将页面写入页面的内容流，但是文档执行完毕，它会导致页面内容全部重绘。
（2）element.innerHTML：创建多个元素的时候效率更高（不要采取拼接字符串的形式，采用数组的形式）
（3）document.createElement()：创建多个元素效率低一些，但结构清晰
四、DOM总结
主要针对元素的创、增、删、改、查、属性操作、事件操作。
1.创
（1）documemt.write
（2）innerHTML
（3）createElement
2.增
（1）appendChild
（2）insertBefore
3.删
（1）removeChild
4.改
（1）修改元素属性：src、href、title
（2）修改普通元素内容：innerHTML,innerText
（3）修改表单元素：value, type, disabled
（4）修改元素样式：style, className
5.查
（1）DOM提供的API方法：getElementById, getElementsByTag（不提倡用这个）
（2）H5提供的方法：querySelector, querySelectorAll
（3）利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling), nextElementSibing)（提倡用这个）
6.属性操作
主要针对自定义属性
（1）setAttribute：设置dom的属性值
（2）getAttribute：得到dom的属性值
（3）removeAttribute：移除属性
7.事件操作（鼠标事件）
事件源.事件类型=事件处理程序
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
