DOM节点
类型
最常用的有三种,分别是元素节点、文本节点以及属性节点。
元素节点:可以理解为HTML标签
属性节点:可以理解为html标签里的属性
文本节点:就是一对标签之间的内容。
文档节点:其实就是document
注意:
还有一个叫做空白文本节点的东西!!!(IE9以下没这个问题,其余浏览器都有)
如果在写html标签时,你使用了回车进行换行,它存在于上一个闭合标签到下一个开始标签。
获取节点
getElementById (IE8使用时,name不要和id同名)
getElementsByTagName (IE8不支持)
getElementsByClassName(IE8不支持)
节点属性
1. nodeType
元素节点 :nodeType == 1
属性节点 :nodeType == 2
文本节点 :nodeType == 3
文档节点 :nodeType == 9
2. nodeName
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
3. nodeValue
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是 文本自身
属性节点的 nodeValue 是 属性的值
访问节点
1. 访问子节点
childNodes
语法:
元素节点.childNodes
实例:
<div>
javascript
<p>node</p>
<div>jQuery</div>
<h5>Bootstrap</h5>
</div>
var x=document.getElementsByTagName("div")[0].childNodes;
for(var i = 0; i < x.length; i++){
document.write("第"+(i+1)+"个节点的值是:"+x[i].nodeValue+"<br />");
document.write("第"+(i+1)+"个节点的名称是:"+x[i].nodeName+"<br />");
document.write("第"+(i+1)+"个节点的属性是:"+x[i].nodeType+"<br />");
document.write("<br />");
}
使用childNodes一定要注意处理空白节点!!!!
添加nodeType==1进行判断,只选择中元素节点。
children
使用children同样可以访问到子节点,而且不包括文本节点!!!
实例:
<ul id = "ul1">
<li></li>
<li></li>
</ul>
var oUl = document.getElementById("ul1");
alert(oUl.children.length); // 2
2. 访问父节点
parentNode
语法:
元素节点.parentNode
实例:
点击a标签,隐藏父元素。
<ul id = "ul1">
<li>这是第一个 <a href = "#">隐藏</a> </li>
<li>这是第二个 <a href = "#">隐藏</a> </li>
<li>这是第三个 <a href = "#">隐藏</a> </li>
</ul>
var addA = document.getElementsByTagName('a');
for(var i = 0; i < addA.length; i++){
addA[i].onclick = function (){
this.parentNode.style.display = "none";
};
}
3. 访问子节点首个和最后一个
语法:
首个
父节点.firstChild IE6-8
父节点.firstElementChild IE9+、现代浏览器
最后一个
父节点.lastChild IE6-8
父节点.lastElementChild IE9+、现代浏览器
4. 访问兄弟节点
语法:
下一个
节点.nextSibling IE6-8
节点.nextElementSibling IE9+、现代浏览器
前一个
节点.previousSibling IE6-8
节点.previousElementSibling IE9+、现代浏览器
DOM操作元素
操作属性
getAttribute( "属性名",“属性值”) 获取
setAttribute( "属性名","属性值") 设置
removeAttribute( "属性名","属性值") 删除
操作元素
1. 创建
语法:
createElement('标签名') 创建
父节点.appendChild(子节点) 追加到末尾处
父节点.insertBefore(子节点,在谁之前) 插入到指定位置
它们要配合起来用,才能在页面显示。
实例1:
点击按钮,添加li。
<input id = "btn1" type = "button" value = "创建">
<ul id = "ul1"></ul>
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
oBtn.onclick = function(){
var oLi = document.createElement("li");
oUl.appendChild(oLi);
}
实例2:
如果已有li,则通过insertBefore插入;
如果没有,则通过appendChild添加。
<input id = "btn1" type = "button" value = "创建">
<ul id = "ul1"></ul>
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
oBtn.onclick = function(){
var oLi = document.createElement("li");
var aLi = oUl.getElementByTagName("li");
if(aLi.length > 0){
oUl.insertBefore(oLi, aLi[0]);
}else{
oUl.appendChild(oLi);
}
}
2. 删除
语法:
父节点.removeChild(子节点)
实例:
<ul id = "ul1">
<li>这是第一个 <a href = "#">删除</a> </li>
<li>这是第二个 <a href = "#">删除</a> </li>
<li>这是第三个 <a href = "#">删除</a> </li>
</ul>
var aA = document.getElementsByTagName("a");
var oUl = document.getElementById("ul1");
for(var i = 0; i < aA.length; i++){
aA[i].onclick = function(){
oUl.removeChild(this.parentNode);
}
}
文档碎片
ps:对现代浏览器来说,提高不了什么性能,反倒有可能负优化,仅作了解之用。
每次创建一个元素,不要急着马上把其直接添加到页面,因为添加元素太多的话,有可能需要渲染几次。
我们可以先把这些元素加到文档碎片当中,最后一次性加到页面中去。
实例:
var oUl = document。getElmentById("ul1");
//注意这里,创建文档碎片
var oFrag = document.createDocumentFragment();
for(var i = 0; i < 10000; i++){
var oLi = document.createElement("li");
//添加到文档碎片
oFrag.appendChild(oLi);
//一次性添加完毕
oUl.append(oFrag);