JavaScript 学习记录（1）——DOM编程

参考书：JavaScript DOM编程艺术（第二版）

1.DOM（Document Object Model）

包含的节点：元素节点、属性节点、文本节点，其中属性节点被包含在元素节点之中。每个节点都是一个对象。

2.获取元素

2.1 getElementById方法
document.getElementById(id)//参数是要获取对象的id属性值，返回这个对象。
2.2 getElementsByTagName方法
document.getElementsByTagName(tag)//参数是标签的名字，返回一个对象数组。
可以先用法一确定对象，再使用通配符“*“匹配其所有子元素。
2.3 getElementsByClassName方法
document.getElementsByClassName(class)//参数是要获取对象的类别class，返回一个对象数组。

3. 获取和设置属性

3.1 getAttribute方法
object.getAttribute(attribute)//不能通过document对象调用，只能通过元素节点对象调用。
3.2 setAttribute方法
object.setAttribute(attribute,value)//修改属性值。

4.事件处理函数

鼠标指针悬停触发：onmouseover
鼠标指针离开触发：onmouseout
鼠标点击触发：onclick

paras = document.getElementsByTag("p")
for(var i=0,i<paras.length,i++){
   paras[i].onclick=function(){
       this.style.fontSize = "14px";
}

5.一些与子节点有关的属性

5.1 childNodes属性可以用来获取任何一个元素的所有子节点（不一定是元素节点）
5.2 nodeType属性：元素节点的nodeType属性值是1，属性节点2，文本节点3。
5.3 nodeValue属性可以获取元素的值。
5.4 firstChild和lastChild属性：表示childNodes数组的第一个元素和最后一个元素。（不一定是元素节点）

//获取元素p的文本: <p id="get">abcd></p>
para = document.getElementById("get")
para_text = para.firstChild.nodeValue 

6.JS代码压缩工具

实际运用中应保存工作版本和精简版本的JS文件。

7.使页面加载完毕时使用多个函数，可以采用如下函数，将每一个需要被使用的函数调用这个函数即可。

常用自定义函数：
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

appendChild(需要加载完成调用的函数）

8.动态创建标记——利用dom方法

（1）创建一个新元素；
（2）把这个新元素插入节点树。
8.1 createElement方法新建空白元素
document.createElement(nodeName)
8.2 appendChild方法将该元素作为某个父元素的子元素
parent.appendChild(child)
8.3 createTextNode方法创建文本节点
document.createTextNode(text)//最后还要用一次appendChild方法才能将该文本节点链接到元素节点上。
8.4 insertBefore方法在已有元素前面插入一个新元素（作为兄弟元素）
parentElement.insertBefore(newElement,targetElement)//可以用parentNode属性获得父元素

常用自定义函数：
//在已有元素后面插入一个新元素（作为兄弟元素）
function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement){
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

9.利用JS动态修改元素样式

9.1利用style属性直接修改

element.style.styleValue = "newValue";

9.2利用className属性为元素增加类名，结合CSS间接修改

element.className = "newName"
.newName{
  //CSS中增加修改的样式；
}

常用自定义函数：
//在不影响已有类名的前提下增加新类名
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

10.使JavaScript平稳退化

1.增加检测；
2.使用Modernizr，在不支持JS时增加CSS样式以弥补。

//使用方法，在head元素中增加：
<script src="mdernizr-1.5.min.js"></script>