DOM:文档对象模型（document object module）
用于操作页面元素
jquery 1.version 方式 无兼容性问题 凡是使用jquery1.version 无论是事件操作还是获取元素等操作都无兼容性问题
获取元素（element）
通过id获取元素
<div id = "dv"></div>
document.getElementById('dv') // javascript方式获取id元素
$('#dv') // jquery方式获取id元素
通过标签名获取元素(返回一个数组，需要遍历)无兼容性问题
<div></div>
document.getElementsByTagName('div') // javascript方式获取标签元素
$('div') // jquery方式获取标签元素
通过name属性值获取元素(返回一个数组，需要遍历)无兼容性问题
<input type = "text" name = "user"/>
document.getElementsByName("user") // javascript方式获取name属性值元素
$('input[name="user"]') // jquery方式获取name属性值元素
通过类样式名字获取元素(返回一个数组，需要遍历)IE8及以下浏览器兼容性问题
<div class = "dv"></div>
document.getElementsByClassName("dv") // javascript方式获取类样式元素
$('.dv') // jquery方式获取类样式元素
通过选择器获取元素（类似于jquery获取选择器）HTML5 新增 IE7及以下浏览器兼容性问题
<ul>
<li>其实</li>
<li>我</li>
<li>是你</li>
<li class = 'active'>爸爸</li>
</ul>
document.querySelector("li.active"); /*获取li中带有class为active的元素*/
document.querySelectorAll("li"); /*获取所有的li*/
节点（node）
| nodeType(节点类型) | ===1:标签 | ===2：属性 | ===3：文本 |
|
nodeName(节点名字) |
大写的标签：标签 | 小写的属性名：属性 | #text:文本 |
| nodeValue(节点的值) | 标签：null | 属性：shux属性的值 | 文本：文本内容 |
JavaScript方式获取节点 （几乎没什么用处）
获取父节点 ： .parentNode
获取父元素 ： .parentElement
获取子节点 : .childNodes
获取子元素 : .children
获取第一个子节点 : .firstChild
获取第一个 子元素 ： .firstElementChild
获取最后一个子节点 : .lastChild
获取最后一个子元素 : .lastElementChild
获取前一个节点 : .previousSibling
获取前一个元素 : .previousElementSibling
获取后一个节点 : .nextSibling
获取后一个元素 : .nextElementSibling
jQuery方式获取节点操作
获取下一个兄弟节点 ： .next()
获取上一个兄弟节点 ： .prev()
获取子类选择器 ： .children()
获取后代选择器 ： .find()
查找兄弟节点（排他功能） ：.siblings()
获取父级元素 ： .parent()
事件
特别提醒 ： 在IE8及以下浏览器中没有事件参数 e，需要使用window.event代替
鼠标事件
鼠标按下事件 ：
.onmousedown = function(){
}
鼠标松开事件:
.onmouseup = function(){
}
鼠标进入事件
.onmouseover = function(){ // javascript方式鼠标进入事件
}
.on('mouseenter',function(){ // jquery方式鼠标进入事件
}) // 优点：只触发一次；若使用mouseover触发次数不限
鼠标离开事件
.onmouseout = function(){ //javascript 方式鼠标离开事件
}
.on('mouseleave',function(){ //jquery 方式鼠标离开事件
})
鼠标移动事件
.onmousemove = function(){
}
焦点事件
获取焦点事件：
.onfocus = function(){
}
失去焦点事件：
.onblur = function(){
}
表单事件
提交事件
.submit()
重置事件
.reset()
文本框值发生改变事件
.onchange = function(){
}
点击事件
点击事件：
.onclick = function(){
}
双击事件：
.ondblclick = function(){
}
键盘事件
键盘按下事件
document.onkeydown = function(e){
var key = e.keyCode;
}
键盘擡起事件
document.onkeyup = function(e){
}
阻止事件冒泡
e.stopPropagation();
window.event.cancelBubble = true // ===== IE8及以下
阻止默认事件
e.preventDefault();
阻止事件冒泡和默认事件
return false;
自定义属性（IE7及以下浏览器兼容性问题）
.setAttribute('data-id',1); /*javascript 设置自定义属性 data-id*/
$().attr('data-id',1) /*jquery 设置属性 data-id*/
.getAttribute('data-id'); /*javascript 获取自定义属性 data-id*/
$().attr('data-id') /*jquery 获取属性 data-id*/
.removeAttribute('data-id'); /*javascript 移除自定义属性 data-id*/
$().removeAttr('data-id') /*jquery 移除标签属性 data-id */
JavaScript的DOM增删改插、克隆 与 jquery的DOM增删插、克隆
JavaScript ：
<style>
div {
height: 200px;
width: 200px;
border: 1px solid #ccc;
margin: 100px auto;
}
</style>
<body>
<input type="button" value="追加" id="add">
<input type="button" value="插入" id="insert">
<input type="button" value="移除" id="remove">
<input type="button" value="替换" id="replace">
<input type="button" value="克隆" id="clone">
<a href="javascript:void(0);" id="a"></a>
<div>
<ul></ul>
www.kanglang.xyz<span>事件</span>
</div>
</body>
<!-- 创建元素 -->
<script>
document.querySelector('span').onclick = function(){
alert(1)
}
window.onload = function () {
/* 创建元素的第一种方式: (缺陷：当页面被加载完毕之后,使用write方法创建元素，那么页面上原有存在的内容全部消失)
使用情况：几乎不使用 */
// document.write('<span>直接写被创建的元素及内容</span>')
/* 创建元素的第二种方式: innerHTML 使用情况：适中 */
// document.querySelector('a').innerHTML = "<h1>这是使用innerHTML创建的H1元素，无缺陷</h1>"
/* 创建元素的第三种方式及操作: createElement 使用情况：普遍使用 */
// 追加 元素
document.getElementById('add').onclick = function () {
var p = document.createElement('p') // 创建元素
p.innerHTML = "创建了一个p元素"
p.style.color = "red"
document.querySelector('div').appendChild(p) // 将创建的元素追加到div中
}
// 插入 元素
document.getElementById('insert').onclick = function () {
var p = document.createElement('p')
p.innerHTML = "创建了一个p元素"
p.style.color = "red"
document.querySelector('div').insertBefore(p, document.querySelector('ul')) // 将创建的元素插入到div和ul之间
}
// 移除 元素
document.getElementById('remove').onclick = function () {
var p = document.querySelector('p')
if (p) {
document.querySelector('div').removeChild(document.querySelector('p')) // 删除元素节点
}
}
// 替换 元素
document.getElementById('replace').onclick = function () {
var p = document.querySelector('p')
var h6 = document.createElement('h6')
h6.innerHTML = "现在是h6标签"
if(p){
document.querySelector('div').replaceChild(h6, p) // 从第一个开始将p元素替换成h6元素
}
}
// 克隆 节点
document.getElementById('clone').onclick = function(){
var cloneN = document.querySelector('div').cloneNode(true) /* 克隆div节点 不会复制事件，参数可选，true：复制当前节点中所有的子节点, false:复制当前节点(默认false) */
document.getElementById('a').appendChild(cloneN)
}
}
</script>
jquery：
<style>
div {
height: 200px;
width: 200px;
border: 1px solid #ccc;
margin: 100px auto;
}
</style>
<body>
<input type="button" value="追加" id="add">
<input type="button" value="插入" id="insert">
<input type="button" value="移除" id="remove">
<input type="button" value="替换" id="replace">
<input type="button" value="克隆" id="clone">
<a href="javascript:void(0);" id="a"></a>
<div>
<ul></ul>
www.kanglang.xyz<span>事件</span>
</div>
</body>
<script>
$('span').on('click',function(){
alert(1)
})
$(function () {
/* 创建元素的方式$('元素标签及内容') */
// 添加元素
$('#add').on('click',function(){
// append appendTo : 在父级元素中最后添加元素
$('div').append($('<p>子元素被追加到父元素中</p>')) // 父元素.append(子元素)
$('<p>把子元素放在父元素中</p>').appendTo($('div')) // 子元素.appendTo(父元素)
// prepend prependTo :在父级元素中最前面添加元素
})
// 插入元素
$('#insert').on('click',function(){
$('div').before('<p>插入到div元素的前面</p>')
$('div').after('<p>插入到div元素的后面</p>')
})
// 移除元素 移除掉所有选中的元素
$('#remove').on('click',function(){
if($('p')){
// $('p').html('') /*方式1: 移除所有的P元素 缺点：内存泄漏，只是将文本内容设置为空，标签元素还在*/
// $('p').empty() /*方式2: 清理门户：将自身元素中所有的子元素清空,只保留自身标签 */
$('p').remove() /*方式3： 移除掉所有的P标签元素(使用) */
}
})
// 克隆节点 参数可选，
/* 与原生JavaScript的区别：无论是false还是true都会复制当前元素及所有子元素，
false：潜复制（不会复制事件）
true: 深度复制（会复制事件）
*/
$('#clone').on('click',function(){
var cloneN = $('div').clone(true)
$('a').append(cloneN)
})
})
</script>
二者之间的区别：
1.删除元素节点操作：JavaScript原生方式从第一个开始删除；jquery库方式找到所有所选中的元素节点全部删除
2.克隆元素节点操作：JavaScript原生方式根据参数为true进行复制当前元素的所有子节点，不会复制事件，参数为false只复制当前元素； jquery库方式直接复制当前元素的所有子节点，根据参数为true进行复制事件，为false不复制事件