首页 > 代码库 > HTML5权威指南读书笔记【第四部分】

HTML5权威指南读书笔记【第四部分】

2024-08-07 01:18:38   241人阅读

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 onm ouseover=“this.style.background=‘white’”>
this代表触发事件元素的HTMLElement style元素会返回CSSStyleDeclaration
 mouseover <==>mouseout
onmouseout=”this.style.removeProperty(‘color’)“
32、事件处理函数简单版
function handleMouseOver(elem){
    elem.style.background=‘white’;
}
<p onm ouseover=“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)

HTML5权威指南读书笔记【第四部分】


联系
我们