小结下dom节点操作

一、节点的定义

dom节点树

图中可见节点HTML文档中的每个成分都是一个节点:

• 整个文档是一个文档节点
• 每个HTML标签是一个元素节点
• 包含在HTML元素中的文本是文本节点
• 每个HTML属性是一个属性节点
• 注释属于注释节点

备注：通过DOM，可以访问HTML文档中的每个节点。

二、节点引用

节点的绝对引用：

• document.documentElement返回文档的根节点
• document.activeElement返回当前文档中被击活的标签节点
• event.fromElement返回鼠标移出的源节点
• event.toElement返回鼠标移入的源节点
• event.srcElement返回激活事件的源节点

节点的相对引用：(设当前对节点为node)

• node.parentNode node.parentElement 返回父节点,document.parentNode()返回null
• node.childNodes^[1] 符合标准，返回子节点集合（包含文本节点及标签节点），文本和属性节点的childNodes永远是null.先获取长度node.childNodes.length,然后可以通过循环或者索引找到需要的节点.
  //对与文本节点的处理：
  eg:

  var myTextNodes = document.getElementById("test").childNodes;
  var count = myTextNodes.length;
  for(var i = 0; i < count; i++) {
    if(myTextNodes[i].nodeType=="3" && myTextNodes[i].nodeName!="#text"){//排除IE空白文本的节点
    alert(myTextNodes[i]）;
  }
  }
  

• node.children 不符合标准，不推荐使用，它只返回html节点，甚至不返回文本节点
• node.firstChild返回第一个子节点，firstChild=childNodes[0]
• node.lastChild返回最后一个子节点，lastChide=childNodes[childNodes.length-1]
• node.nextSibling()返回同属下一个节点
• node.previousSibling()返回同属上一个节点

三、节点操作

• 节点定位

  getElementById(elementId)
  //寻找一个有着给定id属性值的元素，返回一个元素节点 ,document.getElementById(IDvalue)
  
  getElementsByTagName(tagName)
  //用于寻找有着给定标签名的所有元素，document.getElementsByTagName(tagName)
  
  getElementsByName(elementName)
  //在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可

• 创建节点：

  document.createElement(element)
  //参数为要新添的节点标签名，egnewnode=document.createElement("div"); 
  
  document.createTextNode(string)
  //创建一个包含着给定文本的新文本节点,eg:document.createTextNode("hello");
  

  eg：

  var a =document.createElement("span");
  var b =document.createTextNode("cssrain");
  a.appendChild(b);
  

• 添加节点:

  //添加子节点：
  node.appendChild(newChild) //newChild为生新增的节点.eg: document.body.appendChildNode(o) document.forms[0].appendChildNode(o)
  
  //插入节点
  node.insertBefore(newNode,targetNode)
  node.insertAfter(newNode,targetNode);

• 修改节点：

  //删除节点
  node.remove()[2] //当某个节点被remove方法删除时，这个节点所包含的所有子节点将同时被删除。
  node.removeChild(node) //eg:document.body.removeChild(node)
  node.removeNode()//IE支持，但FF不支持,推荐用removeChild代替实现
  
  //替换节点
  node.replaceChild(newChild,oldChild) //oldChild节点必须是node元素的一个子节点。
  node.replaceNode() node.swapNode()//只有IE支持replaceNode与swapNode方法，其他浏览器则不支持。
  

• 复制节点：

  //返回复制节点引用
  node.cloneNode(bool)//bool为布尔值，true / false 是否克隆该节点所有子节点 ,eg:node.cloneNode(true)

• 获取节点信息:

  .nodeName//只读，返回节点名称，相当于tagName.
  .nodeValue//可读可写，但对元素节点不能写。返回一个字符串，指示这个节点的值。元素节点返回null，属性节点返回属性值，文本节点返回文本。一般只用于设置文本节点的值。
  .nodeType//只读，返回节点类型：1，元素节点；2，属性节点；3，文本节点。 
  
  node.contains() //是否包含某节点，返回boolean值,IE支持，FF不支持contains()，但支持W3C标准compareDocumentPosition() .
  node.hasChildNodes()//是否有子节点，返回boolean值

• 属性节点：

  setAttribute(key,value)//element.setAttribute(attributeName,attributeValue)，setAttribute()方法只能用在属性节点上。
  getAttribute(key)//返回一个给定元素的一个给定属性节点的值

---

备注:

[1]childNodes兼容性问题说明：

用IE的调试工具会发现IE中把空格解析成“#text”，即IE会把2个标签之间只要有回车或空格的地方解析成空白文本节点，就多了个节点nodeName="#text"。而FF中却不会。

• 测试代码：

  //节点之间留有空格和回车
  <div id="test1">
  <div>first</div>
  <div>second</div>
  <div>third</div>
  </div>
  
  //除注释外，节点间无空格回车
  <div id="test2"><div>first</div><div>second</div><div>third</div></div>
  
  var val1=document.getElementById("test1").childNodes.length;
  var val2=document.getElementById("test2").childNodes.length;
  alert("val1="+val1+":"+"val2="+val2)

• 测试结果：

  IE中是val1=7:val2=3
  FF中是val1=3:val2=3

• 兼容性解决办法：

  在for循环里不妨加上：
  if(childNode.nodeName=="#text") continue;
  或者nodeType == 1。

[2]add(),remove()兼容性问题：

注意的是add,remove方法仅用于area,controlRange,options等集合对象.

<select>
<option value="1">option1</option>
<option value="2">option2</option>
</select>
<script type="text/javascript">
function fnAdd(){//兼容IE,FF,Opera,Chrome
var oOption=document.createElement("option");
document.getElementById("#oList").options.add(oOption);
oOption.text="option3";
oOption.value="3";
}
function fnRemoveChild(){//兼容IE,FF,Opera,Chrome
document.getElementById("#oList")).removeChild(document.getElementById("#oList").lastChild);
}
function fnRemove(){
//兼容IE,FF,Opera,Chrome
document.getElementById("#oList").remove(0);
}
</script>

---

扩展知识：

innerHTML、outerHTML、innerText、outerText

• 定义：

  • innerHTML设置或获取标签内的HTML,eg:获取node.innerHTML 设置node.innerHTML="hello"
  • outerHTML设置或获取标签及标签内的HTML
  • innerText设置或获取标签内的文本
  • outerText设置(包括标签)或获取(不包括标签)对象的文本

• 不同之处：

  innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

  在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

• 注意:

  W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)