HTML5權威指南讀書筆記【第四部分】

1、compatMode怪異模式 CSS1Compat遵循 BackCompat已觸發怪異模式

2、document.location.port 80不返回

3、通過設置document.location.hash實現跳轉

4、replace assign document.location.replace會講當前文檔從歷史中清除

5、document.readyState loading(瀏覽器正在加載) interactive（除圖片等媒體文件已加載完成） complete（所有資源已加載完成）

6、innerHTML內容屬性

7、elems.namedItem(“apple”).src namedItem返回集合裏帶有指定id或name屬性值的項目

8、document[“標識”] 首次匹配到id則匹配id,首次匹配到name則不再匹配id，也可寫成document.標識

9、getElement找不到返回null getElements找不到返回數組長度爲0

10、querySelectorAll(“p, img#apple”) 匹配 p標籤和id爲apple的img標籤

11、document.defaultView獲取window對象 或直接使用window

12、window.scrollTo(0,400)

13、function(e) e.target.innerHTML 當前事件的觸發者

14、獲取狀態 window.history.state 或者監聽window.onpopstate

15、stateObj = {ss:ss,ss:ss} window.history.pushState(stateObj, “”) 複雜狀態保存

16、window[“nested”].postMessage(“消息內容”,”http://xxxx:11信息來源” )發送消息

接收者添加監聽事件 window.addEventListener(“message”, receiveMessage監聽到觸發的方法, false)

function receiceMessage(e) {
    if(e.origin == “來源”) {
        檢測來源
    }
}

17、計時器 setTimeout 只執行一次 setInterval重複執行 返回唯一標示，作爲clear函數的參數進行清理

18、document.getElementById(“textblock”).className += “ newclass” 

19、document.getElementById(“textblock”).classList【獲取所有class】.toggle(“newclass”); 如果不存在添加，存在刪除

20、HTMLElement.setAttribute(“屬性名”,“屬性值”) getAttribute獲取

21、獲取data-fruit屬性值 可以使用dataset[“fruit”]

22、var row = HTMLElement.appendChild(document.createElement(“tr”))

createTextNode(“內容節點的值”)

23、移動元素僅需要把待移動的元素關聯到新的父元素上，無需讓其脫離原始位置

24、isSameNode同一個 isEqualNode不是同一個但是是一樣的

25、outerHTML包含定義該元素及其子元素的內容 inner只返回子元素的

26、insertAdjacentHTML插入內容 after begin after end before begin beforeend

27、targetElem.style.cssText = “color:black” 改變元素所指定樣式的值

28、var style = document.styleSheets[0].cssRules[0].style;    style[i] 打印第i個屬性名 style.getPropertyValue(style[i]) 打印第i個屬性值

29、顏色獲取 var color = style.getPropertyCSSValue(style[i]).getRGBColorValue()

color.red.cssText color.green  blue

30、獲取計算屬性

var targetElem = document.getElementById(“block1”);

var style = document.defaulView.getComputedStyle(targetElem);

31、<p onmouseover=“this.style.background=‘white’”>

this代表觸發事件元素的HTMLElement style元素會返回CSSStyleDeclaration

 mouseover <==>mouseout

onmouseout=”this.style.removeProperty(‘color’)“

32、事件處理函數簡單版

function handleMouseOver(elem){
    elem.style.background=‘white’;
}

<p onmouseover=“handleMouseOver(this)”>

33、javascript負責對於事件的添加

var pElems = document.getElementsByTagName(“p”);
for (var i = 0; i < pElems.length; i++) {
    pElems[i].onmouseover = handleMouseOver;
    //或者 pElems[i].addEventListener(“mouseover”, handleMouseOver);
    //第二種方式可以訪問某些高級事件特性
}
function handleMouseOver(e) {
    e.target.style.background = ‘white’;
    //e.type == “mouseover” 可以用於判斷事件的類型
}

34、<p><span>sss</span></p> addEventListener(“mouseover”, handleDescendantEvent, true（true 爲捕捉階段 false爲冒泡階段 不加此參數爲目標階段）)

點擊span部分 target爲p currentTarget爲span(導致函數被調用的元素)

e.eventPhase == Event.AT_TARGET

35、默認事件可以通過e.preventDefault()來組織發生

36、mouse特殊事件 e.clientX e.clientY

37、String.fromCharCode(e.keyCode)