【javascript】DOM操作
1、document代表整个文档
2、document.getElementById()
-> 元素id在ie8以下的浏览器不区分id大小写, 而且也返回name属性的元素
3、document.getElementsByClassName()
-> ie8和ie8以下的ie版本没有
4、document.getElementsByTagName()
-> 生成一个类数组，后面需加[0]取到特定tag
5、document.querySelector()、document.querySelectorAll()
->选出来的是副本，不是实时的！！
6、document.getElementsByName()
-> 只有部分标签name 可生效（表单, 表单元素, img, iframe）
遍历节点树：(考虑节点类型)
1、parentNode 父节点（最顶端的 parentNode 为 document，document.parentNode 为 null)
2、childNodes 子节点们
例子：
<div> <!-- This is comment --> <strong></strong> <span> </span> </div> 该结构有以下节点： <div> [1文本节点] <!-- This is comment -->[2注释节点] [3文本节点]<strong></strong>[4元素节点] [5文本节点]<span> [6文本节点] </span>[7元素节点][8文本节点] </div> div.childNodes --> 8
3、firstChild 第一个子节点
div.firstChild --> text
4、lastChild 最后一个子节点
div.lastChild --> text
5、nextSibling 后一个兄弟节点
6、previousSibling 前一个兄弟节点
7、例子：使用childNodes 返回元素节点
function retElementChild(node) { var temp = { length : 0, push : Array.prototype.push, splice : Array.prototype.splice, }, child = node.childNodes, len = child.length; for(var i = 0; i < len; i ++) { if(child(i).nodeType === 1) { temp.push(child[i]); } } return temp; }
节点类型：
1、元素节点 nodeType: 1
2、属性节点 nodeType: 2
3、文本节点 nodeType: 3
4、注释节点 nodeType: 8
5、Document nodeType: 9
6、DocumentFragment nodeType: 11
基于元素节点数的遍历
1、parentElement IE9以下不兼容
2、children IE9以下兼容
3、firstElementChild 返回的是第一个元素节点 IE9以下不兼容
4、lastElementChild IE9以下不兼容
5、nextElementSibling
6、previousElementSibling
节点属性：
1、nodeName 元素的标签名，以大写形式表示，只读，不能修改
2、nodeValue Text节点或Comment 节点的文本内容，可以读写
3、nodeType 节点类型，只读
4、attributes Elements节点的属性集合
节点方法：
1、Node.hasChildNodes() 返回true false
DOM结构树
1、getElementById
->方法定义在Document.prototype上，即Element节点上不能使用。
2、getElementsByName
->方法定义在HTMLDocument.prototype上，即非html中的document不能使用，如xml document.Element
3、getElementsByTagName
->方法定义在Document.prototype和Element.prototype上
4、HTMLDocument.prtotype
->定义了一些常用的属性，document.body document.head分别指代HTML文档中的 <body><head>
5、Document.prototype
->定义了document.documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素
6、getElementsByClassName
querySelectotAll
querySelector
->在Document.prototype Element.prototype类中均有定义
封装 myChildren 功能
Element.prototype.myChildren = function() { var child = this.childNodes; var len = child.length; for(var i = 0; i < len; i ++) { if(child[i].nodeType == 1) { arr.push(child[i]); } } return arr; } var div = document.getElementsByTagName('div')[0];
增：
Document.createElement();
Document.createTextNode();
Document.createComment();
Document.createDocumentFragment();
插：
Parentnode.appendChild();
Parentnode.insertBefore(a, b); //a待插入的元素
删：
Parent.removeChild();
Child.remove();
替换：
Parent.replaceChild(new, origin);
Element节点的一些属性
innerHTML
innerText（火狐不兼容） / textContent （老版本IE不好使）
Element节点的一些方法
Element.setAttribute()
Element.getAttribute()
封装 insertAfter
<p></p>
<script type="text/javascript">
Element.prototype.insertAfter = function (targetElem, afterElem) {
var beforElem = afterElem.nextElementSibling;
if (beforElem == null) {
this.appendChild(targetElem);
} else {
this.insertBefore(targetElem, beforElem);
}
}
var p = document.getElementsByTagName('p')[0];
var a = document.createElement('a');
a.innerText = '123';
document.body.insertAfter(a,p);
</script>
