知识点：
注意代码分离：
-
- CSS表示层
- JS行为层
- HTML内容
标记良好的代码就是一切！
Html：
- id实现页内导航： id=here <a href="#here"/>
- XHTML ： <img /><br />为了向后兼容，反斜杠前有一个空格
JS：
- js关联数组：vocalist[“piano”][name]=“Jhon”;
- js内建对象：Array()Date()Math
- 宿主对象：FormImageElement
- Var variable=setTimeout("functionName",1000ms);隔一段时间执行一次函数
- clearTimeOut(variable);清除等待队列中的函数
- parseInt("")的返回值永远是整数
- element.property 可以为元素创建属性
- Math.ceil(number);向大于方向舍入最接近的整数
- Math.floor(number);~~小于~~
- Math.round(7.53438);四舍五入：向最接近的整数舍入
- 当前页面的urlwindow.location.href;
- String.indexOf(subString) ；
- String.splitting(char)：以char将string分成数组，char属于前一个
- window.onload = functionName;
- /*页面加载完毕再执行，可重写使页面加载时执行若干函数(eg:
- addLoadEvent(preparePlaceholder);
- addLoadEvent(prepareGallery);
- )*/
CSS：
- 选择器、默认继承，因此特殊性大的要后定义
- z-index 属性设置元素的堆叠顺序,数值越大，越在前面，PS：仅能在定位元素上奏效
- overflow:visiblehiddenscrollauto;全看到、隐藏多出的部分、滚动条、又多出才有滚动条
- margin: 1em 10%;缺少4做外边距从2右外边距复制，缺少3下外边距，从1上外边距复制；百分数是相对于父元素算的
- display:inline-block;行内块
- margin:auto;居中显示
- list-style:none;去掉ulliid等元素的默认样式
- text-decoration:none;a没有下划线
- text-align:center;文字居中显示
- imv的alt属性有利于图片被搜索到；title属性，鼠标悬停会显示
- <html lang=“zh-CN”>
- <meta charset="utf-8">
- 定义列表<dl><dt><dd>标题和描述
- search robot对em、strong的内容会关注
- 引用：block quote 自动缩进; cite属性标志引用来源
- <pre>保留换行、显示代码
DOM方法和属性：
0、
CSS-DOM:
元素节点:
1与位置相关的属性：firstChildlastChild
extSiblingpreviousSiblingparentNodeChildNodes
2与本身有关属性：nodeType
odeName
3style 属性，返回对象:elementt.style.property,属性以驼峰命名方式，不能检索外部CSS文档的信息
4element.className 可读可写 ；等价于element.setAttribute("class","className")
1、
-
- element.childNodes 含给定元素节点的子元素数组
- node.firstChild=node.childNodes[0]
- node.lastNode
- node.nodeValue 返回节点的值
- Reference=node.cloneNode(deep：truefalse)；返回指向新节点的指针，true子节点一起复制，但属性节点会一起复制
- Parent=element.removeChild(node);
- Parent=element.replaceChild(new,old);
- insertAfter()自己写
- attributeValue = element.getAttribute(attributeName);返回属性值
- booleanValue=element.hasChildNodes;
2、
-
- node.nodeType 代表节点的数字，12种：元素节点1、属性节点2、文本节点3、
3、
| 1级DOM(DOM Core): | HTML-DOM | 返回类型 |
| document.getElementById(“idValue”) | return 元素节点对象 | |
| document/element.getElementByTagName(“tag name”) | documet.TagName（eg：document.body == document.getElementByTagName("body")[0] | return 整个文档/元素下所有的对象的数组 |
| element/object.getAttribute(“Attribute”) | element.attributeName | return 属性值 |
| object.setAttribute(“Attribute”,”Attribute Value”) | element.attributeNAme = Attribute Value | 不会改变文档本身的源代码：动态刷新不影响文档静态内容 |
4、
用JS写入HTML：node.nodeValue="value";
旧方法：
-
- document.whrite(“HTML statement”)
- innerHTML();读写，无法区分插入、替换，并且会替换源文件
DOM：只改变DOM节点树，对源文件不做物理性改变/*不要滥用，重要内容不要用这种方式添加*/
-
- createElement("nodeName");返回指向新节点的指针
- document.createTextNode("Text");返回指向新节点的指针
- parent.appendChild(child);
- insertBefore();
Ajax：
-
- 异步：不用每次做出一个改动就重新刷新整个页面；
- 快速透明：google的及时关键词提示；
- XMLHttpRequest
===============优雅的分割线====================
写优雅的代码应该注意什么？
- 程序被执行的顺序：从上到下、if分支、while等循环、中断异常
- 程序化设计：一个入口一个出口；/*实际中为了功能和代码的优雅可以不遵循*/
黄金准则：
1、循序渐进：从最核心的内容（用HTML给核心内容加上最正确的标签，使她呈现正确的结构），然后逐步充实内容！
2、预留退路
写HTML需要注意什么？
1、使用的标记必须与做出的doctype声明保持一致！
2、写语义正确的HTML代码
3、Html 变量名应该用功能性命名，而不是样式命名
HTML5的意义：
标准 跨浏览器 标准的重要性 兼容
/*浏览器嗅探，很难做到面面俱到，还使代码复杂*/
CSS不要过度依赖类选择器ID选择器，要组合使用类型后代id和类伪类
Js要注意空的判断，使程序不会异常退出：
1、检测dom方法、检测对象，为程序预留退路（没有js也不影响内容的正常显示）
2、检测不到对象，程序也能正常运行
================================================================================
参考：《JavaScript DOM编程艺术》pdf和随书代码