学习时间:2017.3.6-2017.3.8
参考资料:javascript DOM 编程艺术
1.三位一体的页面
结构层:由HTML或XHTML等标记语言负责创建,利用标签对网页内容的语义含义做出描述。
表示层:由CSS负责完成,CSS描述页面内容如何呈现。
行为层:javascript DOM,负责内容应该如何响应事件。
表示层和行为层总是存在的,因为存在默认样式和默认事件。
2.三者分离
三种技术存在重叠区域。
1.利用createElement和appendChild等DOM方法允许动态地创建和添加标记。
2.css中:hover和:focus之类的伪类效果允许根据用户触发事件改变元素呈现效果。
3.DOM样式给元素设定样式。
3.style属性
文档里每个元素都是一个对象,每个元素都有一个style属性值,它们也是一个对象。
1.用DOM获取stlye对象的某个属性时,如果这个属性名没有特殊符号,则直接输入(eg:color),否则按驼峰命名法输入(eg:font-family)。
2.在某些浏览器中color属性以RGB格式的颜色值返回,即使与设置的颜色格式不同。
3.style属性是能用于内嵌样式。
4.用DOM设置的样式可以用DOM再把他们检索出来。
5.style对象的属性值永远是一个字符串。
4.根据元素在节点树的位置来设置样式
1.CSS无法根据元素之间的相对位置关系来找出某个特定元素,可以用DOM来实现。
2.目的:为紧跟h1标签后面的p变标签更改它的样式。
3.用getElementByTagName找到所有h1元素。
4.使用for循环遍历所有元素。
5.h1[i].nextSibling可以找出文档中的下一节点。
6.需要找到的是“下一元素节点”,于是设置一个getNextElement函数。
|
|
7.得到下一元素节点,更改样式即可。
8.检查浏览器能否理解DOM方法。
5.根据某种条件反复设置某种样式
1.这里设置一个表格,目的是奇数行和偶数行的背景不同,实现斑马线效果。
2.为了方便以后增减和修改,在浏览器不支持css3的情况下,进行函数的编写。
3.先把文档中所有table元素找出来。
4.找出每个table里的ty元素,创建odd变量变量并把它初始化为false。
5.遍历所有数据行。
6.如果变量odd的值是true,设置样式并把odd变量修改为false。
7.如果变量odd的值时false,不设置样式,把odd变量值修改为true。
8.检查浏览器能否理解DOM方法。
6.className属性
1.className属性是一个可读/可写的属性,凡是元素节点都有这个属性。
2.如果目的是直接替换另一个class,则可以用element.className = value;
3.如果原来没有任何class,直接对className属性赋值。
4.如果目的是追加一个class,element.className += “ 新加的class名”(class名前有空格)
这种情况,
1)检查cassName属性的值是否为null。
2)如果是,把新的class设置值直接赋值给className属性。
3)如果不是,把一个空格和新的class设置值追加到className属性上去。
7.对函数进行抽象
把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象。