1 DOM基础:
1.2 浏览器兼容性?
IE9.0 40%;
Chrome 60%;
Firefox 99%;
1.3 DOM节点:
.子节点(childNode,nodeType)
.父节点(parentNode)不受样式影响
.offsetParent//用来寻找已经定位的父级元素。根据样式不同
CSS
绝对定位元素,是根据谁来定位?
它是根据已经定位父级元素来定位的,一直往上寻找已经定位的父级元素
1.4 首尾节点
.firstChild,firstElementChild
.lastChild,lastElementChild
1.5 兄弟节点
.nextSibling,nextElementSibling
.previousSibling,previousElementSibling
1.6 利用DOM来操纵元素属性
元素属性操作的方法:
第一种:oDiv.style.display='block'//只能改属性值的方法
第二种:oDiv.style['display']='block'//即可以修改属性值,又可以修改属性名
第三种:使用DOM方式
.DOM方式操作元素属性
.获取:getAttribute(名称)
.设置:setAttribute(名称,值)
.删除:removeAttribute(名称)
1.7 利用className来获取元素
.如何用className选择元素
.选出所有元素
.通过className条件筛选
.封装成函数
1.8 创建,插入和删除元素
.创建DOM元素
createElement(标签名) 创建一个节点、
appendChild(节点) 将创建的节点插入,在尾部追加节点
.插入元素
.insertBefore(节点,原有节点) 在已有元素前插入节点
.删除DOM元素
removeChild(节点) 删除一个节点
父级.removeChild(子节点) 删除一个节点
1.9 文档碎片//就是为了解决当我们需要往页面中插入很多节点时,如果不采用文档碎片,我们首先是插入一个节点,页面就要渲染一次,这样会降低DOM性能,如果我们这样做,我们把创建好的节点首先不急着插入页面而是先插入文档碎片中,最后一次性地把文档碎片中的节点全部插入,那么此时页面只需要渲染一次,大大提高DOM的性能。
.文档碎片可以提高DOM的操作性能
.文档碎片原理
.document.createDocumentFragment();
2 DOM的简单应用
应用一:表格的隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
var oTab=document.getElementById('tab');
var color='';//为了保持原来的颜色不被覆盖,当鼠标的移出时,还需要还原原来的颜色,所以设一个color的字符串全局变量
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].οnmοuseοver=function(){
color=this.style.background;//但鼠标移入时,一方面的保存当前原来的颜色
this.style.background='yellow'; //另一方面则是改变当前的颜色,即换成新颜色
}
oTab.tBodies[0].rows[i].οnmοuseοut=function(){
this.style.background=color;
}
if(i%2){oTab.tBodies[0].rows[i].style.background='blue';}
else{oTab.tBodies[0].rows[i].style.background='';}
}
}
</script>
</head>
<body>
<table border="1" bordercolor="blue" id="tab">
<thead>
<td><h2>ID</h2></td>
<td><h2>Name</h2></td>
<td><h2>Age</h2></td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>Mikyou</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>weak</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>sky</td>
<td>35</td>
</tr>
<tr>
<td>5</td>
<td>李四</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
应用二:表格的添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
var oTab=document.getElementById('tab');
var oBt=document.getElementsByTagName('input');
var id=oTab.tBodies[0].rows.length+1;
oBt[2].οnclick=function(){
var oTr=document.createElement('tr');
var oTd=document.createElement('td');
oTd.innerHTML=id++;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oBt[0].value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oBt[1].value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);
var oA=oTd.getElementsByTagName('a')[0];
oA.οnclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTab.tBodies[0].appendChild(oTr);
}
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var oA=oTab.tBodies[0].rows[i].cells[3].getElementsByTagName('a')[0];
oA.οnclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
</script>
</head>
<body>
姓名:<input type="text" />
年龄:<input type="text" />
<input type="button" value="添加数据"/>
<table border="1" bordercolor="blue" id="tab" width="300" style="text-align: center;">
<thead>
<td><h2>ID</h2></td>
<td><h2>Name</h2></td>
<td><h2>Age</h2></td>
<td><h2>操作</h2></td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>15</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>Mikyou</td>
<td>26</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>weak</td>
<td>24</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>sky</td>
<td>35</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>5</td>
<td>李四</td>
<td>18</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>