查看元素节点
- document代表整个文档
- document.getElementByID()//元素id在ie8一下的浏览器，不区分id大小写，而且也返回匹配name属性的元素(name = id)
- getElementsByTagName() // 标签名
<div id = "only">123</div>
var div = document. getElementsByTagName('div');
把页面里面的所有div都拿出来，放到一个类数组里,代表一个数组，所以div.style.background = "red"就会报错 为了不报错 把这个div取出来 得这样 document. getElementsByTagName('div')[0];
尽管页面只有一个div，但选出来的永远是一组 所以要加角标 - getElementsByName();//, 需注意 只有部分标签可生效（表单，表单元素，img，ifame）
- getElementsByClassName();//类名 ie8和ie8一下没有
- querySelector()// css选择器 在ie7和ie7以下得版本中没有
- querySelectorAll()// css选择器 在ie7和ie7以下得版本中没有
遍历节点树
- parentNode 父节点（最顶端的parentNode为#document);
- childNodes 子节点们
- firstChild 第一个子节点
- lastChild 最后一个子节点
- nextSibling 后一个兄弟节点previousSibling前一个兄弟节点
节点的主要类型：
元素节点 --1
属性节点 --2
文本节点 -- 3
注释节点 --8
document --9
DocumentFragment -- 11
<div>
<strong>
<span>1</span>
</strong>
<span></span>
<em></em>
</div>
div.childNodes.length -->7
div和strong之间算1一个文本节点 strong算元素节点
<div>
123
<! -- this is comment-->
<strong></strong>
<span></span>
</div>
也是七个节点
基于元素节点数的遍历
- parentElement 返回当前元素的父元素节点（ie不兼容）
- children 只返回当前元素的元素子节点
- nodechildElementCount === node.children.length当前元素节点的子元素个数
- firstElementChild 返回的是第一个元素节点
-lastElementChild 返回的是最后一个元素节点- nextElementSibling/previousElementSibling 返回的是后一个/前一个兄弟元素节点
节点的四个属性
- nodeName
元素的标签名，以大写形式表示，只读 - nodeValue
Text节点或Comment节点的文本内容，可读写 - nodeType
该节点的类型，只读 - attributes
Element节点的属性集合
节点的一个方法 Node.hasChildNodes();
<div>
123
<!-- this is comment -->
<strong> </strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function retElementChild(node){
var arr = [],
child = node.childNodes,
len = child.length;
for (var i = 0; i < len; i++) {
if(child[i].nodeType === 1){
arr.push(child[i]);
}
}
return arr;
}
console.log(retElementChild(div));
</script>
---------------------------------------------
<div>
123
<!-- this is comment -->
<strong> </strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
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;
}
console.log(retElementChild(div));
</script>
