一、Dom操作
文档对象模型DOM:一套定义、规范、准则 为了能够让程序JavaScript去操作页面中的元素节点而定义的一套标准
DOM会把文档看作是一棵树,页面中的每个元素就是树上的一个一个节点;同时DOM定义了很多方法、属性等来操作这棵树中的每一个元素(节点)——每个节点称为DOM节点。
1. 节点.children —— (没有兼容性问题:只包含元素节点) 获取第一级子元素
childNodes 获取第一级子元素 有兼容性问题(标准浏览器文本和元素视为节点,非标准浏览器只把元素视为节点),nodeType属性判断:
元素节点 ELEMENT_NODE:1
属性节点 ATTRIBUTE_NODE :2
文本节点 TEXT_NODE:3
2 firstChild \ firstElementChild 获取子元素里的最后一个
(1)元素.firstChild:只读 属性 第一个子节点(有兼容性问题)。标准下:firstChild会包含文本类型的节点 ; 非标准下: 只包含元素节点
(2)元素.firstElementChild:只读 属性(有兼容性问题)。标准下获取第一个元素类型节点的子节点;非标准浏览器不支持
//兼容性写法:
if (元素.firstElementChild){
元素.firstElementChild.style.background = 'red';
} else {
元素.firstChild.style.background = 'red';
}
//兼容性写法:
var oFirst = 元素.firstElementChild || 元素.firstChild; //兼容写法
//兼容性写法:
var oFirst = 元素.children[0]
3 元素.lastElementChild || 元素.lastChild 获取子元素里的第一个
var oLast = 元素.lastElementChild || 元素.lastChild ;
Var oLast =children[元素.length-1]
4. 元素.nextElementSibling || 元素.nextSibling
5元素.parentNode: 只读, 属性 ,只有一个, 当前节点的父级节点
6元素.attributes
元素.attributes:只读 属性 属性列表集合
7元素.offsetParent:只读 属性 离当前元素最近的一个有定位的父节点
8Dom操作:
(1)document.createElement(标签名); 注意:
动态创建元素不会直接显示在页面当中,前面必须是document,不能是其他
(2)父级.appendChild(要追加的元素) //在指定父级子节点最后一个后面追加子元素
(3)父级.insertBefore(新的元素,指定的已有子元素);
在父级的指定子元素前面插入一个新元素(注意:先判断如果第二个参数的节点是否存在)
(4)元素.cloneNode(true) 或者元素.cloneNode(false) //深克隆(负值标签、标签属性、标签里面内容) 浅克隆(负值标签、标签属性不复制标签里面内容)
(5)父级.removeChild(已有子元素);
(6)父级.replaceChild(新的元素节点,原有元素节点);
二、实例
Html代码:
<body>
<input class="btn" type="button" value="增加一条,放在前面"/>
<input class="btn" type="button" value="删除最后一条"/>
<input class="btn" type="button" value="修改最后一条"/>
<input class="btn" type="button" value="复制第一条"/>
<input class="btn" type="button" value="设置样式"/>
<table border="1" cellspacing="0" cellpadding="10" >
<thead>
<tr>
<th>书籍</th>
<th>价格</th>
</tr>
</thead>
<tbody id="bookCon">
<tr>
<td id="tr1">第八条猎狗</td>
<td>¥22</td>
</tr>
<tr>
<td>不抱怨的世界</td>
<td>¥22</td>
</tr>
</tbody>
</table>
</body>
JavaScript Dom操作:
var arrInputBtn = document.getElementsByClassName( "btn") ;
var bookCon = document.getElementsByTagName("tbody")[0] ;
//add 增加一条,放在倒数第二的位置即放在length-1的前面
arrInputBtn[0].onclick = function(){
var newTr =document.createElement("tr");
newTr.innerHTML=" <td>活着</td> <td>¥22</td> " ;
bookCon.insertBefore( newTr, bookCon.children[0] )
}
//del 删除最后一个即删除tr下标为length-1
arrInputBtn[1].onclick = function(){
if( bookCon.children[bookCon.children.length-1] )
bookCon.removeChild( bookCon.children[ bookCon.children.length -1] )
}
//修改最后一个 :下标为length-1
arrInputBtn[2].onclick = function(){
if( bookCon.children[bookCon.children.length-1] )
{
var newTr = document.createElement("tr");
newTr.innerHTML=" <td>走着走着就老了</td> <td>¥22</td> " ;
bookCon.replaceChild( newTr , bookCon.children[ bookCon.children.length -1] )
}
}
//复制第一条 下标为0
arrInputBtn[3].onclick = function(){
if ( bookCon.children[0] ){
var newTr = bookCon.children[0].cloneNode( true ) ;
bookCon.insertBefore( newTr, bookCon.children[bookCon.children.length-1] )
}
}
//样式
var colors=["#faa","orange","#ffa","greenyellow","#ccc","#949","#fff"];
var i =0;
arrInputBtn[4].onclick = function(){
i%=colors.length ;
document.getElementsByTagName("table")[0].children[0].children[0].style.background=colors[i];
i++;
}