JavaScript节点属性

源自：慕女郎

1）在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。

eg:获取所有的li类型元素，并输出节点属性值

  <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
    var node=document.getElementsByTagName("li");
    for(var i=0;i<node.length;i++){
        document.write("li的名称:"+node[i].nodeName);
        document.write("  li的属性值:"+node[i].nodeValue);
        document.write("  li的属性类型:"+node[i].nodeType);
        document.write("<br>");
        }
  </script>

2）子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

3）访问子节点的第一和最后一项

firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。 

 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

4）访问父节点

获取指定节点的父节点
语法：
elementNode.parentNode
注意:父节点只能有一个
访问祖节点:
elementNode.parentNode.parentNode

5）访问兄弟节点

1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
nodeObject.previousSibling  
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点

6）插入节点

1、在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode：指定追加的节点。

2、insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:
insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。

7）删除节点removeChild

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:
nodeObject.removeChild(node)
参数:
node ：必需，指定需要删除的节点。

8）替换元素节点replaceChild

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 
语法：
node.replaceChild (newnode,oldnew ) 
参数：
newnode : 必需，用于替换 oldnew 的对象。 
oldnew : 必需，被 newnode 替换的对象。

9）创建元素节点

1、createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：
document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

2、创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：
document.createTextNode(data)
参数：
data : 字符串值，可规定此节点的文本。

10）获窗口的高度以及宽度

浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

11）网页尺寸scroll

scrollHeight和scrollWidth，获取网页内容高度和宽度。
var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

12）网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;