另一个网友整理了很多书中的代码:http://www.cnblogs.com/jingangel/archive/2013/01/03/2843505.html

1. 三位一体的网页

  浏览器看到的网页有三部分构成:结构层(HTML)、表示层(CSS)、行为层(javascript).

2. style属性

  每个元素有各种各样的属性,比如位置属性:parentNode,childNOdes, previousSibling;元素本身信息属性:nodeType, nodeName;所有元素都有style属性,包含元素的样式。

var obj = document.getElementById("obj");
alert(obj.nodeName);//如果是p标签,则为p
alert(typeof obj.type);//object,是一个对象
alert(typeof obj.nodeName);//string

举例:

//局限style只能获取内部样式,不能获取样式文件中的样式
element.style.color;//颜色
element.style.fontFamily;//返回字体,中间爱你没有下划线
element.style.fontSize;//字体大小

3. 获取样式

#第一种,根据标签名称
p{
font-size: 1em;
}
#第二种,根据样式名称
.findprint{
font-size: 1em;
}
#第三种,根据元素的id
#intro{
font-size: 1em;
}

4. 奇偶选择

tr:nth-child(odd){background-color:#ffc;}
tr:nth-child(even){background-color:#fff;}

5. 响应事件,CSS可以实现,dom可以利用onmouseover事件来实现

#鼠标移过
a:hover{
color:#c60;
}
tr:hover{
color:#c60;
font-weight: bold;
}
function highlightPage(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
var headers = document.getElementsByTagName('header');
if(headers.length == 0) return false;
var navs = headers[0].getElementsByTagName('nav');
if(navs.length == 0) return false;
var links = navs[0].getElementsByTagName('a');
for(var i=0; i<links.length; i++){
linkurl = links[i].getAttribute('href');
if(window.location.href.indexOf(linkurl)!=-1){
links[i].className = "now";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
addLoadEvent(highlightPage);

6. className属性

obj.classNme = "intro";
elem.className += " intro";//追加

第九章 CSS-DOM的更多相关文章

  1. 第九章 利用DOM脚本检索,替换,设置,追加样式信息

    我们浏览器里看到的网页是由以下三层信息构成的一个共同体: -结构层,由HTML或XHTML之类的标记语言负责去搭建文档的结构. -表示层,由CSS负责设置文档的呈现效果. -行为层,由JavaScri ...

  2. JavaScript DOM编程艺术-学习笔记(第八章、第九章)

    第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让 ...

  3. Knockout应用开发指南 第九章:高级应用举例

    原文:Knockout应用开发指南 第九章:高级应用举例 1   Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的 ...

  4. CSS3秘笈复习:第九章&第十章

    第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时 这四种方式一定要严格按上面 ...

  5. jQuery第九章

    第九章 jQuery Mobile 一.HTML5.0简介 谈到Web设计,我们经常把Web分为三个层: (1)结构层:(2)表现层:(3)行为层. 对应的技术分别是: (1)HTML:(2)CSS: ...

  6. 《Django By Example》第九章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag 注:哈哈哈,第九章终于来啦 ...

  7. o'Reill的SVG精髓(第二版)学习笔记——第九章

    第九章:文本 9.1 字符:在XML文档中,字符是指带有一个数字值的一个或多个字节,数字只与Unicode标准对应. 符号:符号(glyph)是指字符的视觉呈现.每个字符都可以用很多不同的符号来呈现. ...

  8. SEO 第九章

    SEO第九章 本次课目标: 1.  外部优化之平台优化 2.  如何撰写SEO诊断方案 一.外部平台优化——百度系列平台 百度系列的平台都是属于百度自己的产品,排名都是比较高的,所以我们在做外部推广的 ...

  9. 第九章 基于HTTP的功能追加协议

    第九章 基于HTTP的功能追加协议 通过在HTTP的基础上添加新的功能来提高性能和功能. 一.消除HTTP瓶颈的SPDY SPDY(SPeeDY)目的是提高HTTP性能,缩短Web页面的加载时间(50 ...

  10. 鸟哥的linux私房菜——第九章学习(vim编辑器)

    第九章vim编辑器 1.0).vi与vim Linux下文本界面的文书编辑器通常会有常常听到的就有: emacs, pico, nano, joe, 与 vim 等等. vi的优势: 所有的 Unix ...

随机推荐

  1. 观察者(observer)设计模式

    转载:http://www.tracefact.net/CSharp-Programming/Delegates-and-Events-in-CSharp.aspx 假设我们有个高档的热水器,我们给它 ...

  2. 《第一行代码--Android》阅读笔记之Activity

    1.BaseActivity里面可以干什么 定义一个Context定义一个TAG 记录当前的Activity名字getClass().getSimpleName(); 2.Activity里面的几个重 ...

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  4. Hbase之shell操作

    一. 介绍 HBase是一个分布式的.面向列的 开源数据库,源于google的一篇论文<bigtable:一个结构化数据的分布式存储系统>.HBase是Google Bigtable的开源 ...

  5. Library工程No resource identifier found for attribute

    使用library工程中自定义属性无法识别问题 解决:xmlns:ptr="http://schemas.android.com/apk/res/包名, 改成xmlns:ptr=" ...

  6. KNN算法的简单实现

    一  算法原理:已知一个训练样本集,其中每个训练样本都有自己的标记(label),即我们知道样本集中每一个样本数据与所属分类的对应关系.输入没有标记的新数据后,将新数据的每个特征与样本集中的数据对应的 ...

  7. 解决在sublime text3在ubuntu下无法输入中文的问题

    方法链接:https://github.com/lyfeyaj/sublime-text-imfix 效果图:

  8. SAP B1 ADDON 开发

    承接各类SAP B1 ADDON 开发. 有需要,请联系.

  9. Oracle 11g Windows 迁移至 Linux

    OS: windows server 2008 R2 enterprise DB: 11.2.0.1.0 数据库配置: ORACLE_BASE=D:\app\Administrator ORACLE_ ...

  10. CSS3中新出现的技术

    CSS3中新出现的技术 CSS媒体查询 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定 ...