《JavaScript DOM编程艺术》笔记
知识点:
注意代码分离:
-
- CSS表示层
- JS行为层
- HTML内容
标记良好的代码就是一切!
Html:
- id实现页内导航: id=here <a href="#here"/>
- XHTML : <img /><br />为了向后兼容,反斜杠前有一个空格
JS:
- js关联数组:vocalist[“piano”][name]=“Jhon”;
- js内建对象:Array()\Date()\Math
- 宿主对象:Form\Image\Element
- 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:visible\hidden\scroll\auto;全看到、隐藏多出的部分、滚动条、又多出才有滚动条
- margin: 1em 10%;缺少4做外边距从2右外边距复制,缺少3下外边距,从1上外边距复制;百分数是相对于父元素算的
- display:inline-block;行内块
- margin:auto;居中显示
- list-style:none;去掉ul\li\id等元素的默认样式
- 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\与位置相关的属性:firstChild\lastChild\nextSibling\previousSibling\parentNode\ChildNodes
2\与本身有关属性:nodeType\nodeName
3\style 属性,返回对象:elementt.style.property,属性以驼峰命名方式,不能检索外部CSS文档的信息
4\element.className 可读可写 ;等价于element.setAttribute("class","className")
1、
-
- element.childNodes 含给定元素节点的子元素数组
- node.firstChild=node.childNodes[0]
- node.lastNode
- node.nodeValue 返回节点的值
- Reference=node.cloneNode(deep:true\false);返回指向新节点的指针,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和随书代码