DOM之节点|属性

1.查询文档的一个或多个元素有如下方法

  a. 用指定的id属性；(若一个文档中有两个相同的id，只会选择第一个;在低于IE8的IE中，getElementById()对匹配元素的ID不区分大小写，而且也会返回匹配name属性的元素；）

  b.基于name属性选取HTML元素；（getElementsByName()定义在HTMLDocument类中，只在HTML文档可用，在XML文档中不可能）

  c.通过标签名来查询

  d.通过快捷属性来访问各种各样的节点；（document.imgs/ document.forms/ document.links/ document.iframes/ document.anchors/ document.body/ document.head/ document.documentElement/ document.scripts[html5]

  e.通过css类来选取元素（一个空格隔开的class属性列表）

  f.通过css选择器来选取元素；

     注意： 以上几种方法返回的NodeList或HTMLCollection对象都是实时的，如果在后续操作中动态添加或删除一些元素后，它们会实时的进行更新

     但在querySelector/querySelectorAll方法中返回的NodeList对象，是静态的，不会实时去更新

=====================================================================

1.children  与 childNodes

　　childNodes  标准属性，IE9以下会除去文本，属性，只会获取html节点，IE9及chrome ff会获取文本，属性节点

　　children  只会获取html节点

2.firstChild,lastChild 与firstElementChild,lastElementChild

　　firstElementChild与lastElementChild 是标准属性，只会获取html节点，但IE9以下不支持

　　firstChild与lastChild 在IE9以下只会获取HTML节点，其余的会获取文本，属性，及html节点，可以通过nodeType去判断

节点演示

3.nodeType(节点常量)

Element	元素节点	1
Attr	属性节点	2
Text	文本节点	3
CDATASection	CDATASection节点	4
Comment	注释节点	8
Document	Document文档节点	9
DocumentFragment	Document片段	11

 

4.nodeName(节点名称， 大写)

Element	标签名
Attr	属性名称
Text	#text
Document	#document

 

5.nodeValue(节点值）

Element	null
Attr	属性值
Text	文本值
Document	null

 

6.引自javascript权威指南第六版有用的几个函数

   a. 返回元素e的第n层祖先元素，如果不存在此类祖先或祖先不是Element（Document，DocumentFragment）则返回null

function parent(e, n) {
  if ( n === undefined)  n = 1;
  while ( n -- && e) e = e.parentNode;
  if (!e || e.nodeType !== 1) return null;
  return e;
}

  b.返回元素e的第n个兄弟元素，（n为正,则是后续的第n个兄弟元素，n为负，则是前面的第n个兄弟元素,n为零，返回e本身)

function sibling(e, n) {
  while (e && n !== 0){
    if (n > 0) {
      if (e.nextElementSibling) e = e.nextElmentSibing;
      else{   //兼容Ie8以下的
        for(e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling)  //空循环
   }
     n--;
    }
   else{
      if (e.previousElementSibling) e = e.previousElmentSibing;
      else{   //兼容Ie8以下的
        for(e = e.previousSibling; e && e.nodeType !== 1; e = e.previousSibling)  //空循环
   }
     n++;
    }
  }
  return e;
}

  c.返回元素e的第n个子元素，如果不存在则为null;(n为负，代表从后向前计数，0表示第一个子元素，而-1代表最后一个；-2代表倒数第二个)

function child (e, n) {
  if(e.child){
    if(n < 0) n += e.children.length   //转换负的n为数组索引
  if( n < 0 ) return null
    return e.children[n]
  }
  if(n >= 0){    //n非负： 从第一个子元素向前数
    if (e.firstElementChild) e = e.firstElementChild;
    else{
      for(e = e.firstChild; e && e.nodeType !== 1; e = e.nextSibling)
    }
    return sibling(e, n);
  }
  else{
    if (e.lastElmentChild) e = e.lastElementChild;
    else{      //n为负：从最后一个子元素往回数
      for( e = e.lastChild; e && e.nodeType !== 1; e = e.previousSiblings)
    }
    return siblings(e, n+1);    //+1来转化最后1个子元素为最后1个兄弟元素
  }
}

=====================================================================

属性

  HTMLElement定义了通用的一些属性

    a.核心属性(class,id,style,title)

    b.语言属性(dir,lang,xml:lang)

    c.键盘属性(accessKey,tabindex)

    d.事件程序属性

    e. 特定的Element子类型为其子元素定义了特定的属性

   注意： 表示HTML属性的值通常是字符串，当属性为布尔值或数值时，属性也是布尔值或数值，而不是字符串，事件程序属性值总是Function对象（或null)

             HTML属性名不区分大小写，但JavaScript属性名对大小写敏感，若属性名包含不止一个单词，则将除了第一个单词以外的单词的首字母大写(defaultChecked/tabIndex)

             有些HTML属性名在JavaScript中是保留字，对于这些属性，一般的规则是为属性名加前缀“html”(如htmlFor);但也有例外（className)

以上都是针对标准html属性；如果要获取和设置非标准的HTML属性，则用以下方法

     getAttribute()  //获取    ie < 8 中  for  ==> htmlFor    class ==> className

     setAttribute()  //设置    ie < 8 中  for  ==> htmlFor    class ==> className

     hasAttribute()  //检测属性是否存在   ie < 8中没有此方法

     removeAttribute()   //完全删除属性

     注意：这四个方法和上述的区别

             属性值都被看来字符串

             方法使用标准属性名，甚至当这些名称为JavaScript保留字也不例外（setAttribute(‘class’,'fsy’))

      如果操作包含来自其他命名空间中属性的XML文档，可以使用以下4个命名空间版本

           getAttributeNS()/setAttributeNS()/hasAttributeNS()/removeAttributeNS()

       这些方法需要两个属性名字符串作为参数，而不是一个，第一个是标识命名空间的URI，第二个通常是属性的本地名字，在命名空间中是无效的。但setAttributeNS()的第二个参数是属性的有效名字，它包含命名空间的前缀

      用法：w3c  XML DOM - Element 对象

      在IE7及IE6中有一些属性无法通过getAttribute/setAttribute来来进行操作，需要用getAttributeNode/setAttributeNode来进行，

       1.getAttributeNode  是先得到属性节点，然后取得属性值
       2. getAttributeNode 效率低一点
        3.可以解决IE6 7下一些不能取值的Bug

       IE6-7  Attribute

 

==================================================================

03/09/2013补记

 <a href ="../index.html id="link">link</a>

  document.getElementById('link').href  ==> '域名’ + index.html

  document.getElementById('link').getAttribute('href') ==> '../index.html'