JavaScript DOM学习笔记6——HTML DOM

最新推荐文章于 2024-09-07 07:17:47 发布

wawlian

最新推荐文章于 2024-09-07 07:17:47 发布

阅读量303

点赞数

分类专栏： JavaScript 文章标签： html javascript border table class 文档

本文链接：https://blog.csdn.net/wawlian/article/details/7080140

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM其实是一套操作XML文档的标准，不同语言都有实现。前面也提到，HTML有特有的DOM，HTML DOM主要是为了简化一些常用的操作。

1.直接访问HTML元素的属性

HTML元素具有各种各样的属性，如果按照DOM的方式来访问这些属性，则需要采用setAttribute()和getAttribute()方法。而HTML DOM简化了这个操作，可以直接通过.操作符直接访问这些属性。

假设网页中有一个img元素，<img src="img.jpg" border="1">，我们已经获取了该元素的DOM对象oImg，如果需要操作其src或者border属性，我们之前讲过，需要写下列代码：

 
 alert(oImg.getAttribute("src")); 
alert(oImg.getAttribute("border")); 
oImg.setAttribute("src","newImg.jpg"); 
oImg.setAttribute("border","2");

有了HTML DOM ，上面的代码可以写成：

 
 alert(oImg.src); 
alert(oImg.border); 
oImg.src = "newImg.jpg"; 
oImg.border = "2";

基本上所有HTML元素的特性对应的属性都是一样的，只有下面的例外：

 
 <div class="myCls"></div>

对于上面的div中的class特性，在使用HTML DOM操作的时候，就必须写成：

 
 alert(oDiv.className); 
oDiv.className = "newCls";

2. HTML DOM处理表格的方法

HTML的DOM给<table/><tbody/></tr>等元素添加了一些特性和方法，如下面几个表所示：

(1)给table添加的部分：

caption	指向<caption/>元素（如果存在）
tBodies	<tbody/>元素的集合
tFoot	<tfoot/>元素集合
tHead	<thead/>元素集合
rows	表格中所有行的集合
createTHead()	创建<thead/>元素并且放入表格
createTFoot()	创建<tfoot/>元素并且放入表格
createCaption()	创建<caption/>元素并且放入表格
deleteTHead()	删除<thead/>元素
deleteTFoot()	删除<tfoot/>元素
deleteCaption()	删除<caption/>元素
deleteRow(pos)	删除指定位置的行
insertRow(pos)	在指定位置插入行

(2)<tbody/>元素添加了以下内容：

rows	<tbody/>中所有行的集合
deleteRow(pos)	删除指定位置的行
insertRow(pos)	在指定位置插入行

(3)<tr/>中添加的内容：

cells	元素中所有单元格的集合
deleteCell(pos)	删除制定位置单元格
insertCell(pos)	指定位置插入单元格

下面，使用HTML DOM写一个完整的添加表格的例子：

 
 <html> 
    <head> 
        <title></title> 
        <script type="text/javascript"> 
            function createTableUsingHtmlDOM() { 
                //创建表格 
                var oTbl = document.createElement("table"); 
                oTbl.setAttribute("border","1"); 
                oTbl.setAttribute("width","800"); 
                 
                //插入一行 
                oTbl.insertRow(0); 
                //插入一列 
                oTbl.rows[0].insertCell(0); 
                //给列加入文本内容 
                oTbl.rows[0].cells[0].appendChild(document.createTextNode("单元格11")); 
                //插入一列 
                oTbl.rows[0].insertCell(1); 
                //给列加入文本内容 
                oTbl.rows[0].cells[1].appendChild(document.createTextNode("单元格12")); 
 
                //插入一行 
                oTbl.insertRow(1); 
                //插入一列 
                oTbl.rows[1].insertCell(0); 
                //给列加入文本内容 
                oTbl.rows[1].cells[0].appendChild(document.createTextNode("单元格21")); 
                //插入一列 
                oTbl.rows[1].insertCell(1); 
                //给列加入文本内容 
                oTbl.rows[1].cells[1].appendChild(document.createTextNode("单元格22")); 
 
                //别忘了把表格加到<body/>里面去 
                document.body.appendChild(oTbl); 
            } 
        </script> 
    </head> 
    <body> 
        <input type="button" value="添加表格" onclick="createTableUsingHtmlDOM()"> 
    </body> 
</html>

至此，JavaScript DOM最基础的部分就学习完了。DOM还有很多很多其他的特性，在后续的学习中，如果接触到了，我会另外开一个小系列专门记录。

参考书目：

《JavaScript高级程序设计》

wawlian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM学习笔记6——HTML DOM

DOM其实是一套操作XML文档的标准，不同语言都有实现。前面也提到，HTML有特有的DOM，HTML DOM主要是为了简化一些常用的操作。 1.直接访问HTML元素的属性 HTML元素具有各种各样的属性，如果按照DOM的方式来访问这些属性，则需要采用setAttribute()和getAttribute()方法。而HTML DOM简化了这个操作，可以直接通过.操
复制链接

扫一扫

专栏目录