JAVASCRIPT DOM编程艺术读书笔记
第九章 CSS-DOM
我们在浏览器看到的网页其实有三部分构成：
结构层(structural layer) 有XHTML或者HTML等标记语言创建
表示层(presentation layer) 由CSS负责创建
行为层(behavior layer) 负责内容应该如何响应事件这一动作，这主要室友javascript和DOM负责。
不过这三种技术存在重叠。CSS利用伪类进入DOM领地，DOM可以使用DOM样式给元素设定样式。在外部声明的CSS样式不会进入DOM style，在head部分声明的也一样。
<thead>标签定义表格的表头 <tbody>对表格中主体内容进行分组 <tfoot>对表格中的表注(页脚)进行分组 <thead>要与<tbody>或者<tfoot>搭配使用
function highlightRows() { var tables = document.getElementsByTagName("table"); for(var i = 0; i < tables.length; i++) { var odd = false; var rows = tables[i].getElementsByTagName("tr"); for(var j = 0; j < rows.length; j++) { if(odd == true) { rows[j].style.backgroundColor = "#ffc"; odd = false; } else odd = true; /*鼠标移动到行时粗体显示字体 CSS的tr:hover也可以做到*/ rows[j].onmouseover = function () { this.style.fontWeight = "bold"; } rows[j].onmouseout = function () { this.style.fontWeight = "normal"; } } } }
className属性：上面这段函数，让行为层去干表示层的活儿，不是明智的选择。可以在js里边增加class属性比如class = "intro" 具体的然后在css中设定.intro{...}
function addClass(element,value){ if(!element.className) //通过classname属性设定元素的class属性是,会替换而不是追加 所以我们需要判断下 这个元素原先有没有class属性 没有直接替换 有就需要追加 element.className = value; else { newClassName = element.className; newClassName += " "; newClassName += value; element.className = newClassName; } }
本章主要是JS入侵CSS的领地，这么做主要是由于1：CSS无法让我们找到想要处理的目标元素 2：CSS寻找目标的方法还未得到广泛支持
另外JS能够定时重复执行一组操作，不断地改变样式，可以达到CSS做不到的效果。
投递奇安信等公司7个岗位 >
