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 οnmοuseοver=“this.style.background=‘white’”>

this代表触发事件元素的HTMLElement style元素会返回CSSStyleDeclaration

 mouseover <==>mouseout

οnmοuseοut=”this.style.removeProperty(‘color’)“

32、事件处理函数简单版

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

<p οnmοuseοver=“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)