DOM方法和属性

以下内容是《JavaScript+DOM编程艺术》和个人的一些总结。

1. 创建节点：

a) document.createElement() //返回的是一个文本节点，nodeType=3；
b) document.createTextNode() //返回的是一个文本节点，nodeType=3；

以上两个方法都需要使用
parentNode.appendChild(childNode)插入到父节点中。

Ps：现在很少人用createTextNode()了，更流行的是innerHTML，但据说，innerHTML是一项专利技术，不是一项业界标准哈！~

2. 复制节点：

a) element.cloneNode(bool) //参数为true/false，分表表示是否复制子节点;

3. 插入节点：

a) p.appendChild(c);
b) p.insertBefore(newElement,targetElment);

4. 删除节点：

a) p.removeElement(c);

5. 替换节点:

a) p.replace(newElement,oldElement);

6. 节点属性：

a) element.getAttribute(attr) //获取节点的属性，如果属性为空，返回空字符串;
b) element.setAttribute(a,b) //设置节点的属性;
c) element.removeAttribute(attr) //删除属性;

7. 查找节点：

a) document.getElementById(id) //按id获取节点;
b) document.getElementsByTagName(tagname) //按标签名获取节点，返回的是一个集合;
c) element.hasChildNodes() //检查是否拥有子节点，返回布尔值;
d) element.childNodes //子节点;
e) element.firstChild //第一个子节点;
f) element.lastChild //最后一个子节点;
g) element.nextSibling //下一个子节点;
h) element.previousSibling //上一个子节点;
i) element.parentNode //父节点;

不过，在实际应用中，dom编程不只这么简单。抛开框架，原生态的做了个小项目，发现了很多问题，总结如下[基本上所有的原因都出自IE浏览器]:

1. getAttribute():此函数的作用是获取节点的属性，在dom标准中有一个参数。但是，IE却有两个参数：
   vAttrValue = object.getAttribute(sAttrName [, iFlags])
   第一个参数不解释，第二参数是一个整数，值为：0|1|2|4,
   0表示忽略属性的大小写；
   1表示对大小写敏感；
   2表示将属性当做string返回，并且它不支持事情属性；
   4表示返回完整的URL的值，但是它仅用于URL属性中。
   下面这些属性将返回完整的URL：

    action, background, BaseHref, cite, codeBase, data, dynsrc, href, longDesc, lowsrc, pluginspage, profile, src, url, and vrml.
   

2. IE对setAttribute的功能上有些限制，不能用setAttribute来设定class、style于onclick等事件的值以及设置name属性，解决办法如下：

    class:element.className=’xxx’;
    style:element.style.xxx=xxx;
   

   name:兼容name是个苦逼的办法，只能在innerHTML一次性写好。
   事件设置：把事件直接赋值给一个函数，如：

   element.setAttribute("onclick","funcName");
   element.setAttribute("onfocus", function(){alert(this.name)});
   element.setAttribute("onfocus", "alert(this.name)");
   

3. setAttribute在设置属性时，还有许多属性在IE下与标准浏览器的命名是不一样的，虽然不常用，但是万一踩雷了，可以参考一下。下面是一个详尽的参照表：左边为标准游览器的，右边是IE的。

   var IEfix = {
    acceptcharset: "acceptCharset",
    accesskey: "accessKey",
    allowtransparency: "allowTransparency",
    bgcolor: "bgColor",
    cellpadding: "cellPadding",
    cellspacing: "cellSpacing",
    class: "className",
    colspan: "colSpan",
    checked: "defaultChecked",
    selected: "defaultSelected",
    for: "htmlFor" ,
    frameborder: "frameBorder",
    hspace: "hSpace",
    longdesc: "longDesc",
    maxlength: "maxLength",
    marginwidth: "marginWidth",
    marginheight: "marginHeight",
    noresize: "noResize",
    noshade: "noShade",
    readonly: "readOnly",
    rowspan: "rowSpan",
    tabindex: "tabIndex",
    valign: "vAlign",
    vspace: "vSpace"
   }