Dom Scripting

Jeremy KeithFront End

关键字

• Dom Core
• Node Type
• 三条腿

感悟

1. Dom Core
   80/20原则，作者定义的Dom Core的4个方法是代码组织的核心

document.getElementById("id");
document.getElementsByTagName("tag");
element.getAttribute("attr_name");
element.setAttribute("attr_name","attr_value");

2. Node Type
   12种类型，常用下3

nodeType=1 元素节点
nodeType=2 属性节点
nodeType=3 文本节点

Dom的方法中要弄清楚返回的节点类型

3. 三条腿
   Html定义结构/内容；CSS定义表示；JavaScript定义行为
   通过在Html定义id及class作为hook，CSS及JavaScript对应定义样式和动作，并单独保存相应文件，解耦并便于维护
   Html一般不建议定义动作和样式，并应努力保持语义化

不推荐写法：
<a href="#" onclick="popUp('url')">

推荐写法：
// 只定义html，并href正确填写url信息
<a href="url" id="url-link">
// 通过id作为hook定义事件方法（或统一处理a标签）
window.onload = function(){
    var alink = document.getElementById("url-link");
    allink.onclick = function(){
        popUp(this.href);
        return false;
    }
}

三条腿的规范能让浏览器在不兼容/关闭CSS和JS时，基于本身的Html正确和完整性，保证访问的兼容性

其他关键字

• Ajax/XMLHttpRequest
  Ajax通过XMLHttpRequest实现异步服务器请求和刷新客户端页面，XMLHttpRequest是客户端和服务端的中间件（对象）。
• XHTML
  规范HTML写法，按XML规范
• CSS分层
  颜色；布局；字体