什么是DOM?
DOM:即文档对象模型
D:整个Web加载的网页文档
O:类似window对象之类的东西,可以调用属性和方法,可以理解为document对象
M:网页文档的树形结构
DOM有三个等级:DOM1/DOM2/DOM3其中DOM1是W3C标准。
DOM 定义了访问诸如 XML 和 XHTML 文档的标准。
它有HTML DOM:定义了所有 HTML 元素的对象和属性,以及访问它们的方法(接口)
XML DOM:定义了所有 XML 元素的对象和属性,以及访问它们的方法(接口)
核心DOM:用于任何结构化文档的标准模型
下面用表格的创建简单说明一下DOM的使用:
创建表格的规则: 在表格里,也就是<table></table>标签里,只能有一个表头<thead>,和一个表尾<tfoot>.表的标题为<caption>只能有一个,<tr>和<td>和<th>标签,在表格里可以有N个。
用HTML创建表格:
我们可以用HTML代码在前台用手写生成表格:例如:
<table>
<caption>学生成绩统计</caption>
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>花花</td>
<td>一班</td>
<td>女</td>
<td>88</td>
</tr>
<tr>
<td>毛毛</td>
<td>二班</td>
<td>男</td>
<td>79</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>综合为:3456</td>
</tr>
</tfoot>
</table>
这样就生成了下面这个表:
但是这种做法就是把表格写死在代码中,不灵活,而且代码量增加,如果每个HTML页都需要创建表格那岂不是得写很多的表格代码!!那是要不得的!那么我们要如何解决呢?
用DOM创建表格:
这种方法将代码封装在JS文件中,前台只需要引用这个JS文件(添加一句类似:
<script type="text/javascript" src="demo1.js">
</script>的代码就行
)就可以随时创建表格,减少了重复代码量,还方便了表格的创建,代码如下:
window.οnlοad=function(){
var table=document.createElement('table');
table.with=300;
table.border=1;
<span style="color:#009900;">//创建标题</span>
var caption=document.createElement('caption');
table.appendChild(caption);
caption.innerHTML='学生成绩统计';
<span style="color:#009900;">//创建表头,表头里面有tr,tr里面有th</span>
var thead=document.createElement('thead');
table.appendChild(thead);
var tr=document.createElement('tr');
thead.appendChild(tr);
<span style="color:#009900;">//创建一个th</span>
var th=document.createElement('th');
tr.appendChild(th);
<span style="color:#009900;">//给th添加内容</span>
th.appendChild(document.createTextNode('姓名'));<span style="color:#009900;">//用innerHTML也可以</span>
<span style="color:#009900;">//再创建一个th</span>
var th2=document.createElement('th');
tr.appendChild(th2);
<span style="color:#009900;">//给th2添加内容</span>
th2.appendChild(document.createTextNode('班级'));
var th3=document.createElement('th');
tr.appendChild(th3);
<span style="color:#009900;">//给th3添加内容</span>
th3.appendChild(document.createTextNode('性别'));
var th4=document.createElement('th');
tr.appendChild(th4);
<span style="color:#009900;">//给th2添加内容</span>
th4.appendChild(document.createTextNode('成绩'));
}
这样是不是方便了很多?但是咱们也看到了它的代码,比较绕,创建表的语句比较繁琐,很容易出错,那么有没有一种更好的方法呢?答案当然是有了!看下面:
用HTML DOM创建表格
这种方法也是将代码放到JS文件中,前台调用方法和用DOM创建表格后一样!
不多说,咱们上代码:
window.οnlοad=function(){
var table=document.createElement('table');
table.width=300;
table.border=1;
<span style="color:#33cc00;">//创建标题</span>
table.createCaption().innerHTML='学生成绩统计';
<span style="color:#009900;">//创建表头</span>
var thead=table.createTHead();
var tr=thead.insertRow(0);
tr.insertCell(0).innerHTML='姓名';
tr.insertCell(1).innerHTML='班级';
tr.insertCell(2).innerHTML='性别';
tr.insertCell(3).innerHTML='成绩';
document.body.appendChild(table);
}
是不是简单很多啊!
总结:
DOM除了可以对表格样式进行操作以外,还可以操作CSS样式。功能非常强大!DOM由于满足正确的语义结构、表现与内容分离等要求,都已经成为网页设计中的基本要求。关于DOM的知识还有很多,要一步一步的总结才能更好的应用!