浅谈JavaScript之DOM

DOM(文档对象模型)

1、常见HTML节点

元素节点：

html标签，主要属性有TagName和innerHtml(以文本的方式返回标签内(说明这个标签、节点中必须有内容)所有内容，不解析Html，但是设置的时候可以增加html标签，可以解析);

文本节点：纯文本

属性节点：id、style、title、className … … 不能被遍历

2、寻找节点的方法

getElemwntById返回结果唯一

getElementsByTagName返回一个结果集，以数组的方式

拥有一个item()方法可以使用

li(item(0))和 li[0]作用相同

getElementsByName返回结果集

/*以上都是返回的元素节点*/

getAttribute()不支持使用className、Style、onclick属性中有兼容性

setAttribute()

removeAtrribute()IE6及一下不支持

getElementsByClassName() html5新增

3、node节点属性

只操作当前节点，不操作节点内的内容。

nodeValue和innerHtml的区别?

innerHtml：操作的是节点里面的内容，不是节点本身，在设置值的时候可以解析Html标记

nodeValue：操作的是节点本身，对节点里面的内容无效，在设置值的时候不能解析Html标记

4、层次节点属性

childNodes子节点，返回值是一个结果集(节点列表)

firstChild 第一个子节点

lastChild最后一个子节点

parentNode父节点

previousSibling 紧挨着的前一个兄弟节点

nextSibling 紧挨着的后一个兄弟节点

attributes 返回一个属性节点列表，遍历方式：从后到前 attributes[0]—表示最后一个属性，也可以通过attributes[‘atrrName’]=atrrValue 即 又一个属性为id=”box” 通过attributes[‘id’]就可以获得box。(location.search与解析?后的字符串方法中的一样)

5、忽略空白节点

除IE浏览器，在html中每一个折行都被当作一个空白文本节点，这会严重影响到我们遍历节点，所以要想获得遍历节点的更好浏览器兼容，所以我们要移除这些空白节点，如下：

window.onload = function(){
   var box = document.getElementById("test");
   var child = box.childNodes;
   alert(removeEmpy(child).length);
 
} ;
 
/*移除空白字符*/
function removeEmpy(node){
   for(var i = 0;i < node.length;i++){
       if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)){
           node[i].parentNode.removeChild(node[i]);
       }
    }
   return node;
}

6.节点操作(经常会收到空白节点的影响)

创建新节点

write(“

标签

”) 创建新的节点可以解析HTML标记，但是会删除之前HTML中的内容。

createElement(tagName) 创建一个新的元素节点，当只调用这个方法的时候只是在内存中建立，在HTML中是不存在的，需要调用添加节点的方法，才能将这个节点添加到HTML中。

另外，createElement方法在IE浏览器中有兼容问题，ifram、input中的button、chexkBox、radio，在使用该方法时需要写完整的HTML，如下：

createElement(“”);

createTetxNode(text) 创建一个文本节点

节点操作

appendChild(newnode) 在应用标签的最后添加一个子节点

insertBefore(newnode,oldChildnode) 在已有子节点前添加一个节点

removeChild(node) 删除节点，如果删除成功则返回这个节点，这就表示当我们调用这个方法时，虽然HTML的DOM树种不存在该节点了，但是这个节点本身还是存在于内存中的，要想完全删除代码如下：

var r = decument.removeChild(node);

r=null;//完全销毁

replaceChild(newnode,oldnode) 用新节点替换指定节点

cloneNode() 复制节点，该节点有两个参数，true和false，当cloneNode(true)时表示连复制节点的内容一起复制，当当cloneNode(false)时只会复制节点而不会复制里面的内容。

7、节点类型(常见)

Node：判断所以节点类型的接口(IE不支持)

Document：文档节点

Element：元素节点

Text：文本节点类型，当同时在一个元素节点下创建连续两个文本节点时，这两个文本节点不会自动合并成一个节点，仍然保持两个节点状态。下面介绍文本节点常用方法：

normalize()：合并节点，把两个相邻的节点合并成一个文本节点

String.splitText(num)：将String字符的签num个字符分隔出来，形成两个新节点

deleteData(0,3)：将第0个到第3个删除

inserData(0,’hello’)：将hello添加到第0个位置前

replaceData(0,2,’new’)：使用new将第0个到第2个的字符串替换掉

substringData(0,2)：获取第0个到第2个字符

comment：注释节点

nodeName：#comment

nodeValue：注释内容

nodeType：8

Attr：属性节点

其他常用方法

scrollIntoView()：特定元素(默认当前视口不可见的元素)设置成即刻可见

children：返回对象的子节点(但是会自动忽视空白节点)

contains：判定一个节点是否为指定节点的子节点 兼容性：firefox3.6以下，safari3.0以下以及其他更低版本浏览器不支持