【JS总结】——DOM操作表格和样式

    都说HTML做的是静态网页,而JS把网页做活了,那么到底怎么样才算是把网页做活了呢??其实就是JS将网页的各种动作做活了,简单点理解,可以算是动态加载吧。比如网页的CSS,它能够控制网页的样式,如果可以动态加载,那么也就是说把网页做活了。


一、操作表格

    在HTML中,表格的操作可谓是难点,刚刚结束的图书管理系统就让我深切的感受到了,表格实在是太不好控制了。不过DOM就可以对表格进行操作,而且方便实用。表格其实就是用各种元素标签组合而成的,包括表头、主体、尾部,主体部分又包括行、单元格等等,HTML DOM中给这些元素标签提供了一些属性和方法。

HTML DOM中的属性方法
属性或方法说明
caption保存着<caption>元素的引用
tBodies保存着<tbody>元素的HTMLCollection集合
tFoot保存着对<tfoot>元素的引用
tHead保存着对<thead>元素的引用
rows保存着对<tr>元素的HTMLCollection集合
createTHead()创建<thead>元素,并返回引用
createTFoot()创建<tfoot>元素,并返回引用
createCaption()创建<caption>元素,并返回引用
deleteTHead()删除<thead>元素
deleteTFoot()删除<tfoot>元素
deleteCaption()删除<caption>元素
deleteRow(pos)删除指定的行
insertRow(pos)向rows集合中的指定位置插入一行

二、操作样式

    CSS样式能够增强页面的显示效果,但是并不是每个浏览器都能兼容各种CSS样式,所以DOM会分出各个级别来检测浏览器的兼容性。


1、访问元素的样式

    每个元素都有style属性,JS通过style属性就可以访问到元素的CSS,

                    


2、操作样式表

    通过style属性可以操作行内的CSS样式,但是通过内联和链接提供的样式就没办法操作了。就拿图书管理系统中,在一个表格的某一个单元格中会有一个超链接按钮,采用style属性设置样式就无法对超链接按钮的样式进行操作,所以就要用到样式表。

                

总结

    其实再怎么说,这些东西都是很抽象的,还是要敲些例子练习一下,就算是都练习过了,也不一定能掌握,以后用到还是得查,多查多用才能够好好掌握。


评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值