筆記:充實(shí)文檔內(nèi)容归粉、CSS-DOM椿疗、動(dòng)畫
充實(shí)文檔內(nèi)容
一般不會(huì)用JS添加重要內(nèi)容到網(wǎng)頁上,主要因?yàn)榫W(wǎng)絡(luò)爬蟲(各大搜索引擎的)不一定支持JS糠悼。JS應(yīng)知用來充實(shí)文檔內(nèi)容届榄,而避免用DOM技術(shù)創(chuàng)建核心內(nèi)容。
<abbr>和<acronym>:HTML5中绢掰,<acronym>已被<abbr>替代痒蓬,但在IE早期版本可能會(huì)導(dǎo)致一些問題,利用平穩(wěn)退化的方案(IE瀏覽器在統(tǒng)計(jì)abbr元素的子節(jié)點(diǎn)個(gè)數(shù)總是會(huì)返回一個(gè)錯(cuò)誤的值“0”滴劲,所以在從abbr元素提取屬性值和文本值的循環(huán)中添加if(current_abbr.childNodes.length < 1) continue;語句解決)
blockquot元素攻晒,其包含一個(gè)屬性cite“嗤冢可以給其一個(gè)URL地址鲁捏,來表示元素內(nèi)容引自哪里。
注意:在編寫DOM腳本時(shí)萧芙,會(huì)想當(dāng)然的認(rèn)為某個(gè)節(jié)點(diǎn)一定是一個(gè)元素節(jié)點(diǎn)给梅,這容易犯錯(cuò),方法是檢查nodeType屬性值双揪,有很多DOM方法只能用于元素節(jié)點(diǎn)动羽,而不能用于文本節(jié)點(diǎn)等。
accesskey屬性渔期,可以把一個(gè)元素(如鏈接)與肩旁上某個(gè)特定案件關(guān)聯(lián)在一起运吓。Win平臺(tái)下用法是按下Alt鍵和特定按鍵;Mac下按下Ctrl鍵和特定按鍵
檢索和添加信息:創(chuàng)建縮略語列表疯趟、文獻(xiàn)來源鏈接拘哨、快捷鍵清單來使網(wǎng)頁變得更有條理,更易預(yù)覽信峻。
CSS-DOM
三層信息:
- 結(jié)構(gòu)層(HTML等標(biāo)記語言創(chuàng)建)
- 表示層(CSS)
- 行為層(JS語言倦青、DOM)
他們?cè)O(shè)計(jì)應(yīng)盡量分離
style屬性
style屬性是一個(gè)對(duì)象
element.style.property
JS吧”-“視為一個(gè)減法運(yùn)算,故不允許出現(xiàn)在標(biāo)量名和函數(shù)中盹舞,當(dāng)CSS樣式中出現(xiàn)連字符产镐,如”font-size“隘庄,DOM用駝峰命名法表示,如”fontSize“磷账。
style屬性只能返回內(nèi)嵌樣式峭沦,同時(shí)style對(duì)象的屬性只能放在引號(hào)里。
用DOM腳本設(shè)置樣式
nextSibling屬性查找文檔中的下一個(gè)節(jié)點(diǎn)逃糟。headers[i].nextSibling
創(chuàng)建一個(gè)getNextElement函數(shù)來尋找下一個(gè)元素節(jié)點(diǎn)
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
className屬性
element.className = value;這樣設(shè)置某個(gè)元素的class屬性是將替換而不追加吼鱼;
用字符串拼接操作可以完成追加className
elem.className += ”intro”;
抽象:編寫通用函數(shù)
動(dòng)畫效果
時(shí)間
setTimeout() 方法
setTimeout(code,millisec)
code:要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。
millisec:在執(zhí)行代碼前需等待的毫秒數(shù)绰咽。
clearTimeout函數(shù)可以取消“等待執(zhí)行”
setInterval() 方法
setInterval(code,millisec[,"lang"])
code:要調(diào)用的函數(shù)或要執(zhí)行的代碼串菇肃。
millisec:周期性執(zhí)行或調(diào)用 code 之間的時(shí)間間隔,以毫秒計(jì)取募。
parseInt()函數(shù)可以把字符串里的數(shù)值信息提取出來琐谤。
針對(duì)賦值為字符串而不是數(shù)值的問題。
var xpos = parseInt(elem.style.left);
elem.style.left = xpos + "px";
變量作用域問題:創(chuàng)建一個(gè)屬性來消除變量作用域的影響玩敏。