《JavaScript DOM编程艺术》studyNote part1

刚刚结束《JavaScript DOM编程艺术》这本书，可能就是因为自己了解到的东西太少，所以这本书让我感觉学到了很多有用的东西，你可以在豆瓣上看到这本书的介绍和相关评论，我给的推荐等级是“力荐”，当然这是对初学者来说

http://www.douban.com/subject/1921890/

由于内容比较多，我决定把这本书的studynote分成两个部分。这一部分介绍关于“JavaScript语法与良好编程习惯”以及“DOM常用属性与方法”方面的学习笔记。

 

现实世界的API：库尔斯码、国际时区、化学元素周期表（这个例子很有趣）

JavaScript部分语法介绍：
1、在JavaScript中<!-与//是一样的，只能用来注释单行语句，而且它不需要->的结尾（会把它视为注释的一部分）。这点与Html的风格不同，因此建议不使用这种注释，而使用//或/**/

2、最有效的声明方法：
var mood = “happy”, age = 33;它等效于var mood , age; mood = “happy”; age =33;

3、强调：var married = true ，千万不要写成”ture” ，否则为字符串。

4、数组的声明 var lennon = Array(“John”,1940,false);
关联数组的声明 var lennon = Array();lennon[“name”]=”John”;lennon[“year”]=1940;
lennon[“living”]=false;
var beatles = Array(); beatles[“vocalist”]=lennon;则 beatles[“vocalist”][“name”]值为”John”

5、 parseInt，praseFloat的用法

6、将字符串里的字母转换成小写字母的方法：string.toLowerCase()

7、查询子串substring在字符串string里第一次出现的位置：string.indexOf(substring)

8、split()方法是根据某个给定的分隔符把一个字符串拆分成两个或更多个部分的常用方法：array= string.split(character)

9、把某种非常具体的东西改进为一种较通用的东西的过程叫作抽象化。函数的抽象化，就是把函数里硬编码的对象，转换成函数的传入参数，从而增加其通用性。一般来说，函数都要尽量进行抽象化。

JavaScript良好的编程习惯：
用双引号来给出字符串，并在整个脚本中保持一致；
给if语句加上{}，即使是单条语句；
先定义函数，再调用函数；
命名变量时使用_，命名函数时使用第二单词字母大写，这种标记方法称为Camel记号；
函数里的局部变量使用var 关键字声明；
慎用onkeypress事件处理函数
Ajax开发过程也应该遵循循序渐进的原则，让即使“退化”了的Ajax网页也能正常访问。

 

JavaScript编程的三条基本原则：
预留退路：确保网页在没有JavaScript的情况下也能正常工作；
分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开；
向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死机。

 

DOM相关介绍与属性方法使用注意事项

1、DOM是Document Object Model文档对象模型，BOM是浏览器对象模型。

2、对象的分类有：用户定义对象；内建对象，如Math, Array, Date；宿主对象，如 Form, Element, Window,其中重要的是document对象。

3、document.getElementsByTagName(“*”)的方法返回的是对象数组，可以使用*通配符，但必须放引号内。

4、getAttribute()/setAttribute()方法比直接引用属性方法要规范，可移植性更好。

5、childNodes属性将返回一个数组

6、nodeType属性共有12种可取值，其中有实用价值的是：
“元素节点”的nodeType属性值是1；
“属性节点”的nodeType属性值是2；
“文本节点”的nodeType属性值是3。

7、childNodes[0]==firstChild；node.childNodes[node.childNodes.length-1]==lastChild

8、createElement()、createTextNode()；appendChild()元素节点才能使用该方法

9、insertBefore()方法的调用方法：parentElement.insertBefore(newElement,targetElement)
编写insertAfter()函数：
function insertAfter(newElement,targetElement){
       var parent = targetElement.parentNode;
       if(parent.lastChild == targetElement){
              parent.appendChild(newElement);
}else{
       parent.insertBefore(newElement,targetElement.nextSibling);
}
}

10、不应该用DOM方法呈现核心内容，因为用户可能禁用JavaScript，并且搜索引擎也无法搜索到。

11、一般来说改变显示效果都可以用CSS来解决，包括CSS的伪类。但如果是周期性地改变样式信息就只能用DOM。

12、某些浏览器会把一个标签里的换行看成是一个文本节点，比如Friefox。寻找一个标签里最后一个元素节点的方法不是直接用lastChild因为那样容易引用到一个文本节点。代码示例：
var quoteChildren = quotes[i].getElementsByTagName(“*”);
var elem = quoteChildren[quoteChildren.length – 1];

13、style属性返回的是一个对象；style对象的属性值必须放在引号里，单引号或双引号均可。DOM style属性不能用来检索在外部CSS文件里声明的样式信息，甚至是放在<style></style>里的CSS信息。

14、element.style.font-family，这里的-被解释为减号，DOM会采用“Camel记号”来表示为element.style.fontFamily

15、对事件做出的响应，何时选用CSS，何时选用DOM，原则：
改变呈现效果用CSS，改变元素行为用DOM。若想根据某个元素的行为去改变它的呈现效果，需遵循：(1)这个问题最简单的解决方案是什么（2）哪种解决方案会得到更多浏览器的支持。

16、使用className属性来刷新元素样式比直接在JavaScript中定义要好，不足的是className属性会替换而不会追加该元素样式，解决方法是使用addClass函数追加样式：

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

17、innerHTML属性适合插入大段文本的情况，DOM方法提供精确的内容处理。但innerHTML属性是一项专利技术，不是一项业界标准。浏览器在呈现正宗的XHTML文档（即MIME类型是application/xhtml+xml的XHTML文档）时不会去执行innerHTML属性。document.write()方法不推荐使用。

附：常用DOM方法和属性（即必须掌握部分）

创建节点：createElement()；createTextNode()
复制节点：cloneNode()
插入节点：appendChild()；insertBefore()
删除节点：removeChild()
替换节点：replaceChild()
设置节点属性：setAttribute()
查找节点：getAttribute()；getElementById()；getElementsByTagName()；hasChildNodes
节点的属性：nodeName；nodeType；nodeValue
遍历节点树：childNodes；firstChild；lastChild；nextSibling；parentNode；previousSibling