网站建设实训过程,wordpress腾讯云cdn,手机百度账号登录个人中心,指示灯具网站建设第 21 章 DOM 操作表格及样式
1.操作表格
2.操作样式
DOM 在操作生成 HTML 上#xff0c;还是比较简明的。不过#xff0c;由于浏览器总是存在兼容和陷阱#xff0c;导致最终的操作就不是那么简单方便了。本章主要了解一下 DOM 操作表格和样式的一些知识。
一#xff0…第 21 章 DOM 操作表格及样式
1.操作表格
2.操作样式
DOM 在操作生成 HTML 上还是比较简明的。不过由于浏览器总是存在兼容和陷阱导致最终的操作就不是那么简单方便了。本章主要了解一下 DOM 操作表格和样式的一些知识。
一操作表格 标签是 HTML 中结构最为复杂的一个我们可以通过 DOM 来创建生成它或者 HTML DOM 来操作它。(PSHTML DOM 提供了更加方便快捷的方式来操作 HTML有手册)。 //需要操作的 tabletable border1 width300 caption人员表/captiontheadtrth姓名/th th性别/th th年龄/th
/tr/theadtbodytrtd张三/td td男/td
td20/td/trtrtd李四/td td女/td
td22/td/tr/tbodytfoottrtd colspan3合计N/td/tr/tfoot/table//使用 DOM 来创建这个表格 var table document.createElement(table); table.border 1;table.width 300;var caption document.createElement(caption); table.appendChild(caption); caption.appendChild(document.createTextNode(人员表));var thead document.createElement(thead); table.appendChild(thead);var tr document.createElement(tr); thead.appendChild(tr);var th1 document.createElement(th); var th2 document.createElement(th); var th3 document.createElement(th);tr.appendChild(th1); th1.appendChild(document.createTextNode(姓名));tr.appendChild(th2); th2.appendChild(document.createTextNode(年龄));document.body.appendChild(table);PS使用 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 集合中的指定位置插入一行tbody元素添加的属性和方法
属性或方法 说明rows 保存着tbody元素中行的 HTMLCollectiondeleteRow(pos) 删除指定位置的行insertRow(pos) 向 rows 集合中的指定位置插入一行并返回引用tr元素添加的属性和方法
属性或方法 说明cells 保存着tr元素中单元格的 HTMLCollectiondeleteCell(pos) 删除指定位置的单元格insertCell(pos) 向 cells 集合的指定位置插入一个单元格并返回引用PS因为表格较为繁杂层次也多在使用之前所学习的 DOM 只是来获取某个元素会非常难受所以使用 HTML DOM 会清晰很多。
//使用 HTML DOM 来获取表格元素 var table document.getElementsByTagName(table)[0]; //获取 table 引用//按照之前的 DOM 节点方法获取captionalert(table.children[0].innerHTML); //获取 caption 的内容PS这里使用了 children[0]本身就忽略了空白如果使用 firstChild 或者 childNodes[0]
需要更多的代码。
//按 HTML DOM 来获取表格的captionalert(table.caption.innerHTML); //获取 caption 的内容//按 HTML DOM 来获取表头表尾thead、tfootalert(table.tHead); //获取表头alert(table.tFoot); //获取表尾//按 HTML DOM 来获取表体tbodyalert(table.tBodies); //获取表体的集合PS在一个表格中和是唯一的只能有一个。而不是唯一的可以有多个这样导致最后返回的和是元素引用而返回的是元素集合。
//按 HTML DOM 来获取表格的行数alert(table.rows.length); //获取行数的集合数量//按 HTML DOM 来获取表格主体里的行数alert(table.tBodies[0].rows.length); //获取主体的行数的集合数量//按 HTML DOM 来获取表格主体内第一行的单元格数量(tr) alert(table.tBodies[0].rows[0].cells.length); //获取第一行单元格的数量//按 HTML DOM 来获取表格主体内第一行第一个单元格的内容(td) alert(table.tBodies[0].rows[0].cells[0].innerHTML); //获取第一行第一个单元格的内容//按 HTML DOM 来删除标题、表头、表尾、行、单元格table.deleteCaption(); //删除标题table.deleteTHead(); //删除theadtable.tBodies[0].deleteRow(0); //删除tr一行table.tBodies[0].rows[0].deleteCell(0); //删除td一个单元格//按 HTML DOM 创建一个表格var table document.createElement(table);table.border 1;table.width 300;table.createCaption().innerHTML 人员表;//table.createTHead();//table.tHead.insertRow(0);var thead table.createTHead();var tr thead.insertRow(0);var td tr.insertCell(0); td.appendChild(document.createTextNode(数据));var td2 tr.insertCell(1); td2.appendChild(document.createTextNode(数据 2));document.body.appendChild(table);PS在创建表格的时候、、
没有特定的方法需要使用 document 来创建。也可以模拟已有的方法编写特定的函数即可例如insertTH()之类的。
二操作样式
CSS 作为(X)HTML 的辅助可以增强页面的显示效果。但不是每个浏览器都能支持最新的 CSS 能力。CSS 的能力和 DOM 级别密切相关所以我们有必要检测当前浏览器支持 CSS 能力的级别。 DOM1 级实现了最基本的文档处理DOM2 和 DOM3 在这个基础上增加了更多的交互能力这里我们主要探讨 CSSDOM2 增加了 CSS 编程访问方式和改变 CSS 样式信息。 DOM 一致性检测功能 版本号 说明
Core 1.0、2.0、3.0 基本的 DOM,用于表现文档节点树
XML 1.0、2.0、3.0 Core 的 XML 扩展添加了对 CDATA 等支持
HTML 1.0、2.0 XML 的 HTML 扩展添加了对 HTML 特有元素支持
Views 2.0 基于某些样式完成文档的格式化
StyleSheets 2.0 将样式表关联到文档
CSS 2.0 对层叠样式表 1 级的支持
CSS2 2.0 对层叠样式表 2 级的支持
Events 2.0 常规的 DOM 事件
UIEvents 2.0 用户界面事件
MouseEvents 2.0 由鼠标引发的事件(如click)
MutationEvents 2.0 DOM 树变化时引发的事件
HTMLEvents 2.0 HTML4.01 事件
Range 2.0 用于操作 DOM 树中某个范围的对象和方法
Traversal 2.0 遍历 DOM 树的方法
LS 3.0 文件与 DOM 树之间的同步加载和保存
LS-Async 3.0 文件与 DOM 树之间的异步加载和保存
Valuidation 3.0 在确保有效的前提下修改 DOM 树的方法
//检测浏览器是否支持 DOM1 级 CSS 能力或 DOM2 级 CSS 能力 alert(DOM1 级 CSS 能力 document.implementation.hasFeature(CSS, 2.0));
alert(DOM2 级 CSS 能力 document.implementation.hasFeature(CSS2, 2.0));PS这种检测方案在 IE 浏览器上不精确IE6 中hasFeature()方法只为 HTML 和版本 1.0 返回 true其他所有功能均返回 false。但 IE 浏览器还是支持最常用的 CSS2 模块。
1.访问元素的样式
任何 HTML 元素标签都会有一个通用的属性style。它会返回 CSSStypeDeclaration 对
象。下面我们看几个最常见的行内 style 样式的访问方式。
CSS 属性及 JavaScript 调用
CSS 属性 JavaScript 调用 color style.color font-size style.fontSize float 非 IEstyle.cssFloat float IEstyle.styleFloat var box document.getElementById(box); //获取 box
box.style.cssFloat.style; //CSSStyleDeclaration
box.style.cssFloat.style.color; //red
box.style.cssFloat.style.fontSize; //20px
box.style.cssFloat || box.style.styleFloat; //left非 IE 用 cssFloatIE 用 styleFloatPS以上取值方式也可以赋值最后一种赋值可以如下 typeof
box.style.cssFloat ! undefined ?box.style.cssFloat right : box.style.styleFloat right;DOM2 级样式规范为 style 定义了一些属性和方法
属性或方法 说明
cssText 访问或设置 style 中的 CSS 代码length CSS 属性的数量parentRule CSS 信息的 CSSRule 对象getPropertyCSSValue(name) 返回包含给定属性值的 CSSValue 对象getPropertyPriority(name) 如果设置了!important则返回否则返回空字符串item(index) 返回指定位置 CSS 属性名称removeProperty(name) 从样式中删除指定属性setProperty(name,v,p) 给属性设置为相应的值并加上优先权box.style.cssText; //获取 CSS 代码
//box.style.length; //3IE 不支持
//box.style.removeProperty(color); //移除某个 CSS 属性IE 不支持
//box.style.setProperty(color,blue); //设置某个 CSS 属性IE 不支持PSFirefox、Safari、Opera9、Chrome 支持这些属性和方法。IE 只支持 cssText而getPropertyCSSValue()方法只有 Safari3和 Chrome 支持。 PSstyle 属性仅仅只能获取行内的 CSS 样式对于另外两种形式内联
虽然可以通过 style 来获取单一值的 CSS 样式但对于复合值的样式信息就需要通过计算样式来获取。DOM2 级样式window 对象下提供了 getComputedStyle()方法。接受两个
参数需要计算的样式元素第二个伪类(:hover)如果没有没有伪类就填 null。
PSIE 不支持这个 DOM2 级的方法但有个类似的属性可以使用
currentStyle 属性。 var box document.getElementById(box);var style window.getComputedStyle ?window.getComputedStyle(box, null) : null || box.currentStyle;alert(style .color); //颜色在不同的浏览器会有 rgb()格式alert(style .border); //不同浏览器不同的结果alert(style .fontFamily); //计算显示复合的样式值alert(box.style.fontFamily); //空PSborder 属性是一个综合属性所以他在 Chrome 显示了Firefox 为空IE 为 undefined。
所谓综合性属性就是 XHTML 课程里所的简写形式所以DOM 在获取 CSS 的时候最好采用完整写法兼容性最好比如border-top-color 之类的。
2.操作样式表
使用 style 属性可以设置行内的 CSS 样式而通过 id 和 class 调用是最常用的方法。
box.id pox; //把 ID 改变会带来灾难性的问题box.className red; //通过 className 关键字来设置样式在添加 className 的时候我们想给一个元素添加多个 class 是没有办法的后面一个必将覆盖掉前面一个所以必须来写个函数
//判断是否存在这个 class function hasClass(element, className) {return element.className.match(new RegExp((\\s|^)className(\\s|$)));}//添加一个 class如果不存在的话 function addClass(element, className) {if (!hasClass(element, className)) { element.className className;
}}//删除一个 class如果存在的话 function removeClass(element, className) {if (hasClass(element, className)) { element.className element.className.replace(new RegExp((\\s|^)className(\\s|$)), );}}之前我们使用 style 属性仅仅只能获取和设置行内的样式如果是通过内联
document.implementation.hasFeature(StyleSheets, 2.0) //是否支持 DOM2 级样式表
document.getElementsByTagName(link)[0]; //HTMLLinkElement document.getElementsByTagName(style)[0]; //HTMLStyleElement这两个元素本身返回的是 HTMLLinkElement 和 HTMLStyleElement 类型但 CSSStyleSheet 类型更加通用一些。得到这个类型非 IE 使用 sheet 属性IE 使用 styleSheet
var link document.getElementsByTagName(link)[0];var sheet link.sheet || link.styleSheet; //得到 CSSStyleSheet属性或方法 说明
disabled 获取和设置样式表是否被禁用href 如果是通过link包含的则样式表为 URL否则为 nullmedia 样式表支持的所有媒体类型的集合ownerNode 指向拥有当前样式表节点的指针parentStyleSheet import 导入的情况下得到父 CSS 对象title ownerNode 中 title 属性的值type 样式表类型字符串cssRules 样式表包含样式规则的集合IE 不支持ownerRule import 导入的情况下指向表示导入的规则IE 不支持deleteRule(index) 删除 cssRules 集合中指定位置的规则IE 不支持insertRule(rule, index) 向 cssRules 集合中指定位置插入 rule 字符串IE 不支持sheet.disabled; //false可设置为 true
sheet.href; //css 的 URL
sheet.media; //MediaList集合
sheet.media[0]; //第一个 media 的值
sheet.title; //得到 title 属性的值
sheet.cssRules //CSSRuleList样式表规则集合
sheet.deleteRule(0); //删除第一个样式规则sheet.insertRule(body {background-color:red}, 0); //在第一个位置添加一个样式规则PS除了几个不用和 IE 不支持的我们忽略了还有三个有 IE 对应的另一种方式
sheet.rules; //代替 cssRules 的 IE 版本sheet.removeRule(0); //代替 deleteRule 的 IE 版本sheet.addRule(body, background-color:red, 0);//代替 insertRule 的 IE 版本除了刚才的方法可以得到 CSSStyleSheet 类型还有一种方法是通过 document 的 styleSheets 属性来获取。
document.styleSheets; //StyleSheetList集合var sheet document.styleSheets[0]; //CSSStyleSheet第一个样式表对象为了添加 CSS 规则并且兼容所有浏览器我们必须写一个函数
var sheet document.styleSheets[0];
insertRule(sheet, body, background-color:red;, 0);function insertRule(sheet, selectorText, cssText, position) { //如果是非 IE if (sheet.insertRule) {sheet.insertRule(selectorText { cssText }, position); //如果是 IE } else if (sheet.addRule) {sheet.addRule(selectorText, cssText, position);}}为了删除 CSS 规则并且兼容所有浏览器我们必须写一个函数
var sheet document.styleSheets[0];
deleteRule(sheet, 0);function deleteRule(sheet, index) { //如果是非 IE if (sheet.deleteRule) {sheet.deleteRule(index); //如果是 IE} else if (sheet.removeRule) { sheet.removeRule(index);
}}通过 CSSRules 属性(非 IE)和 rules 属性(IE)我们可以获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。
var sheet document.styleSheets[0]; //CSSStyleSheetvar rules sheet.cssRules || sheet.rules; //CSSRuleList样式表的规则集合列表var rule rules[0]; //CSSStyleRule样式表第一个规则CSSStyleRule 可以使用的属性
属性 说明cssText 获取当前整条规则对应的文本IE 不支持parentRule import 导入的返回规则或 nullIE 不支持parentStyleSheet 当前规则的样式表IE 不支持selectorText 获取当前规则的选择符文本style 返回 CSSStyleDeclaration 对象可以获取和设置样式type 表示规则的常量值对于样式规则值为 1IE 不支持rule.cssText; //当前规则的样式文本
rule.selectorText; //#box样式的选择符
rule.style.color; //red得到具体样式值PSChrome 浏览器在本地运行时会出现问题rules 会变成 null只要把它放到服务器上允许即可正常。
总结三种操作 CSS 的方法第一种 style 行内可读可写第二种行内、内联和链接使用 getComputedStyle 或 currentStyle可读不可写第三种 cssRules 或 rules内联和链接可读可写。
