DOM介绍
DOM 文档对象模型 D - Document O - Object M - Model
Node 对象属性
1、nodeType: 节点类型
e.target.nodeType 来获取节点的类别
1、Element 1
2、Attr 2
3、Text 3
4、注释 8
5、Document 9
2、nodeName: 节点名称 返回的是大写 'DIV'
3、nodeValue: 节点的类型
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
<p>dfsdfsdf</p>
let oP = document.querySelector('p');
// 这里注意oP是元素如果直接写成oP.nodeValue返回是null，写成oP下的第一个节点才找到文本元素
oP.firstChild.nodeValue;
4、parentNode: 返回当前节点的父节点 e.target.parentNode.nodeName
document.querySelector('ul').parentNode // <div class="box">...</box>
5、childNodes、children: 返回所有子节点元素，不包括孙节点
<ul id="list">
<li>111</li>
<li>222</li>
<li>
<ul>
<li>333</li>
<li>444</li>
</ul>
</li>
</ul>
let oList = document.querySelector("#list");
let lis = oList.children;
for(let i=0; i<lis.length; i++){
console.log(lis[i].nodeName); // output LI LI LI
}
** childeNodes与children区别 **
childeNodes: 包括空行的文本节点, 如果是空行的节点返回是一个text节点
children: 不包括空行之类的节点
6、hasChildNodes(): 判断是否有子节点，返回Booleanw值
7、firstChild、lastChild: 返回子节点的第一个节点、最后一个节点
firstChild 相当于 children[0]
lastChilde 相当于 children[node.children.length-1]
<div id="car"><p>aaa</p><div>bbb</div><span>ccc</span></div>
let oCars = document.querySelector("#car");
console.log(oCars.firstNode, oCars.lastNode); //<p>aaa</p> 、 <span>ccc</span>
8、previousSibling、nextSibling: 当前节点的前一个节点、后一个节点
注意: 如果是空行返回的是 text
9、innerHTML: 获取或修改HTML元素内容
Element.innerHTML = '<div>xxxxx<div>';
10、innerText: 获取或修改的是除去html的文本
11、outerHTML、outerText: 与innerHTML、innerText相当，不同的是它包含当前节点元素，inner只包含子节点元素
12、offsetParent: 获取当前元素定位的父元素 找到基于设置position的父元素
document.querySelector('ul').offsetParent
Node 对象的方法
一、节点操作方法
1、getElementById(): 获取指定ID的元素
2、getElementsByTagName(): 获取指定标签名称的所有元素
3、getElementsByClassName(): 获取指定类名的元素
4、appendChild(): 追加子节点 注意这里插入的是一个节点，而不是HTML的字符串 parent.appendChild(children);
5、removeChild(): 删除子节点，不能删除孙子节点 (removeNode 只支持IE)
删除节点 并返回删除的节点
let oSubCar = document.querSelector('#subCar');
document.querySelector('body').removeChild(oSubCar); // <div id="subCar">...</div>
6、cloneNode(Boolean): 复制节点 如果参数为true复制指定节点下包括所有子节点，如果不写只复制当前节点不手包子节点
<div class="car">
<ul id="box">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
<div id="subCar"></div>
<script>
// 将id=box所有的节点插入到id=subCar中
let boxList = document.querySelector('#box').cloneNode(true);
var oSubCar = document.querySelector('#subCar');
oSubCar.appendChild(boxList);
</script>
7、hasAttributes(): 判断当前节点是否拥有属性
<div id="miniCar"></div>
<div>swsss</div>
let isAttribute = document.getElementsByTagName('div')[1].hasAttributes();
console.log(isAttribute); // false
8、hasChildNodes(): 判断当前节点是否拥有子节点
9、insertBefore(newitem, ex): 在指定节点之前插入
insertAfter(): 这个需要自己来写没有这个方法
let oMain = document.querySelector('#main');
let oP = document.querySelector('p');
let oUl = document.querySelector('.uls').cloneNode(true);
oMain.insertBefore(oUl, oP); 将ul元素内所有节点复制并插入到oP元素之前
10、replaceChild(newNode, oldNode): 替换节点
document.querySelector('body').replaceChild(oMiniCar, oSubCar)
二、创建元素方法
1、createAttribute(): 创建属性节点
2、createElement(): 创建元素节点
3、createTextNode(): 创建文本节点
三、操作属性方法
1、getAttribute(): 获取属性值
2、setAttribute(): 设置属性值
CSS样式
1、style：获取或设置style值 Element.style.color = 'blue'
2、currentStyle、getCurrentStyle()获取样式中每个属性的值
var oBox = document.querySelector('#box');
var getStyle = function(obj, attr){
return window.getComputedStyle ? window.getComputedStyle(obj, null)[attr] : obj.currentStyle[attr];
}
var attrTxt = getStyle(oBox, 'width'); // '100px';
注意: (1)中style只能获取元素中的内联样式，而currentStyle、getCurrentStyle()无论是内联样式还是在class中都可以找到
3、getComputedStyle(元素， 伪类): 获取指定元素值，currentStyle（ie独有）
<script>
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element, null)[attr];
} else {
return element.currentStyle[attr];
}
}
// 获取class=position-node元素上的position值
var dom = document.querySelector(".position-node");
var style = getStyle(dom);
console.log(style.position); // 返回relative
</script>
*** element.getComputedStyle与element.style的区别
element.getComputedStyle: 只读
element.style: 可读写
4、className: 获取或设置元素的类名 Element.addClass = 'classname'
其它
1、write(): 向输出流写文本或html
2、document.title: 返回标题
4、"javascript:" : 伪协议 来调用javascript http协议(http://)，FTP协议(ftp://)
5、对象检测: 可以测试浏览器是否支持当前对象
if(document.getElementById){ ...}
性能
1、createDocumentFragment: 创建文档碎片
Example: 创建节点并插入到body中，如果不使用文档碎片，每次都需要重新插入一次
var oFragment = document.createDocumentFragment();
for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
oFragment.appendChild(p);
}
document.body.appendChild(oFragment);
事件
1、表单事件：
submit事件
reset事件
click事件
change事件
focus事件（不冒泡） （IE和ES5支持冒泡的focusin）
blur事件（不冒泡） （IE和ES5支持冒泡的focusout）
input事件（ES5 textinput提供更方便的获取输入文字的方案）
2、Window事件
load: 资源全部加载完成后触发事件（图片、css、js）
DOMContentLoaded事件: Document对象构建完后就开始调用此事件
readyStatechage事件:
unload事件: 关闭borwser的时候触发
beforeunload事件
resize: 浏览器窗口发生改变触发
scroll: 滚动条有变化时触发
3、鼠标事件
click: 点击事件
dbclick：双击事件
mouseover: 鼠标移入事件（冒泡）
mouseout: 鼠标移出事件（冒泡）
mousedown: 鼠标按下事件
mouseup: 鼠标放开事件
contextmenu: 上下文本菜单事件
mouseenter: 事件（不冒泡）
mouseleave: 事件（不冒泡）
mousewheel: 事件（FF DOMMouseScroll事件、DOM3 wheel事件）
4、键盘事件
keydown事件
keyup事件
keypress事件
国内查看评论需要代理~