笔记:充实文档内容、CSS-DOM、动画
充实文档内容
一般不会用JS添加重要内容到网页上,主要因为网络爬虫(各大搜索引擎的)不一定支持JS。JS应知用来充实文档内容,而避免用DOM技术创建核心内容。
<abbr>和<acronym>:HTML5中,<acronym>已被<abbr>替代,但在IE早期版本可能会导致一些问题,利用平稳退化的方案(IE浏览器在统计abbr元素的子节点个数总是会返回一个错误的值“0”,所以在从abbr元素提取属性值和文本值的循环中添加if(current_abbr.childNodes.length < 1) continue;语句解决)
blockquot元素,其包含一个属性cite。可以给其一个URL地址,来表示元素内容引自哪里。
注意:在编写DOM脚本时,会想当然的认为某个节点一定是一个元素节点,这容易犯错,方法是检查nodeType属性值,有很多DOM方法只能用于元素节点,而不能用于文本节点等。
accesskey属性,可以把一个元素(如链接)与肩旁上某个特定案件关联在一起。Win平台下用法是按下Alt键和特定按键;Mac下按下Ctrl键和特定按键
检索和添加信息:创建缩略语列表、文献来源链接、快捷键清单来使网页变得更有条理,更易预览。
CSS-DOM
三层信息:
- 结构层(HTML等标记语言创建)
- 表示层(CSS)
- 行为层(JS语言、DOM)
他们设计应尽量分离
style属性
style属性是一个对象
element.style.property
JS吧”-“视为一个减法运算,故不允许出现在标量名和函数中,当CSS样式中出现连字符,如”font-size“,DOM用驼峰命名法表示,如”fontSize“。
style属性只能返回内嵌样式,同时style对象的属性只能放在引号里。
用DOM脚本设置样式
nextSibling属性查找文档中的下一个节点。headers[i].nextSibling
创建一个getNextElement函数来寻找下一个元素节点
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
className属性
element.className = value;这样设置某个元素的class属性是将替换而不追加;
用字符串拼接操作可以完成追加className
elem.className += ”intro”;
抽象:编写通用函数
动画效果
时间
setTimeout() 方法
setTimeout(code,millisec)
code:要调用的函数后要执行的 JavaScript 代码串。
millisec:在执行代码前需等待的毫秒数。
clearTimeout函数可以取消“等待执行”
setInterval() 方法
setInterval(code,millisec[,"lang"])
code:要调用的函数或要执行的代码串。
millisec:周期性执行或调用 code 之间的时间间隔,以毫秒计。
parseInt()函数可以把字符串里的数值信息提取出来。
针对赋值为字符串而不是数值的问题。
var xpos = parseInt(elem.style.left);
elem.style.left = xpos + "px";
变量作用域问题:创建一个属性来消除变量作用域的影响。