Javascript Dom

nodeName
    如果是document 返回#document
    如果是普通节点 返回标签名
    如果是属性节点 返回属性的键
    如果是文本节点 返回#text
 nodeValue
    如果是文本节点 返回文本值
    如果是属性节点 返回属性值
 attributes
    IE上返回100多个属性，真鸡  八变态
    其他浏览器上写了几个属性返回几个属性
 childNodes
      IE 与 Opera上面 回车不算是文本节点
     Safari和Mozill还有Chrome上面 回车算是文本节点
 firstChild
   第一个节点
 lastChild
   最后一个节点
 parentNode
   父节点
 nodeType -- [
    document  DOCUMENT_NODE 9
    element   ELEMENT_NODE  1
    text      TEXT_NODE    3
    attribute ATTRIBUTE_NODE 2
    commet    COMMET_NODE 8
    documenttype DOCUMENT_TYPE_NODE 10
  ]
  Node.DOCUMENT_NODE  9
  Node.ELEMENT_NODE   1
  Node.TEXT_NODE      3
  Node.ATTRIBUTE_NODE 2
  Node.COMMET_NODE    8
  Node.DOCUMENT_TYPE_NODE 10
 ownerDocument 对应的就是Document节点
 previousSibling
 nextSibling
 
 document.getElementByName('name'); 数组或item的方式访问
  ie和opera会查询id和name的节点
  firefox safari chrome会查询name的节点
  ie上不支持div,table有name属性
 
 所有浏览器可以
  document.myform引用name为myform的元素,但是不能引用别的元素
   有重复name的时候不能正确的引用
 所有浏览器可以
  document.getElementById();正确的引用元素
   如有重复id的元素，则不能正确引用
 所有的浏览器都可以正确运行
  document.getElementsByTagName();
  可以使用数组或item(index)的方式访问其中的元素访问属性
 attributes.getNamedItem(key);
  使用node.setAttribute('key' , value);更加方便
  查看指定的属性节点
 attributes.removeNamedItem(key);
  使用node.removeAttribute(key);更加方便
  移除制定的属性节点
 attributes.item(index)
  访问index处的属性节点
 node.getAttribute('name');
 node.setAttribute('name' , 'value');
 node.removeAttribute('name');
 node.getAttributeNode('key');
 node.setAttributeNode();
  注意:
   node.getAttribute,node.getNamedItem
   node.setAttribute,node.setNamedItem
   node.getAttributeNode,node.setAttributeNode
   node.removeAttribute,node.removeNamedItem
   在使用的时候，对于这些html属性，最好采用下面的键名，防止程序发生意想不到的错误
    对于ie getAttribute时候下面的属性需要按照后面的来进行获得，而
     其他的浏览器按照正常的键进行获取
    对于所有的浏览器 直接存取这些值的时候 需要按照后面的键值对进行存取
     所以最好的办法，针对这些值，直接采用后面的键值对进行存取
    for : htmlFor
    class : className
    readonly : readOnly
    maxlength:  maxLength
    cellspaceing : cellSpacing
    rowspan : rowSpan
    tabindex : tabIndex
 
 createElement
 createTextNode
 createAttribute   得到一个节点 ， attr.nodeValue = 'xxx'
 appendChild
 cloneNode    node.cloneNode(true|false) 将当前节点进行克隆，true的话会克隆当前节点下面所有的子节点,不会克隆事件
 hasChildNodes     查看当前节点下面是否含有子节点
 setNamedItem     attributes.setNamedItem(attributeNode);
 insertBefore   parentnode.insertBefore(new_node , ref_node); 可以通过此方法改变元素在父节点中的顺序
 removeChild    parentnode.removeChild(remove_node);   在父元素下面移除制定节点
 replaceChild   parentnode.replaceChild(new_node , ref_node); 在父元素下面替换制定节点为新节点
 
 id属性可以直接访问,比如说input type="text" id="aaa"
  可以直接aaa.value = '123123';
 注意：1.按照id访问元素时，需要保证变量中不能有同名的变量，否则无法分辨是变量还是元素节点
    2.保证元素的父节点不是form元素,因为不同的form元素中可以有相同的id节点
 
 通过name直接访问，这一类的元素为form元素，form元素的子元素(通过formname.nodename方式)
  iframe元素，frame元素 , applet元素
  document.myform.username.value   通过form,表单元素的name访问
  window.framea.form1.text1.value  通过frame,form,表单元素的name
 frame通过window访问
 form通过document访问
 frameset与body不能同时存在
 
 通过元素数组访问
  window.frames frames[0] frames[1]
  document.forms forms[0],forms[1]   
  document.anchors anchors[0],anchors[1]    <a name="a1">我是锚链1</a>     指的是这个name
  document.links links[0] links[1]          <a href="dhasjh">链接</a>      这个才是链接
  document.forms[0].elements  elements[0],elements[1]  form有elements元素，包含的是表单元素，不包括其他元素
  document.forms[0].myselect.options options[0],options[1]
  document.images   images[0] , images[1];
  
  Html超链接的属性
   protocol hostname port host pathname hash search href target
   <a target="_blank" href="http://www.google.com.hk/search?as_q=%E4%B8%AD%E5%9B%BD&hl=zh-CN&newwindow=1&num=20&btnG=Google+%E6%90%9C%E7%B4%A2&as_epq=&as_oq=&as_eq=&lr=lang_zh-TW&cr=&as_ft=i&as_filetype=&as_qdr=all&as_occt=any&as_dt=i&as_sitesearch=&as_rights=#a15">我是超链接</a>
   protocol   :   http:
   hostname   :   www.google.com.hk
   port   :   80
   host   :   www.google.com.hk:80
   pathname   :   search
   hash   :   #a15
   search   :   ?as_q=%E4%B8%AD%E5%9B%BD&hl=zh-CN&newwindow=1&num=20&btnG=Google+%E6%90%9C%E7%B4%A2&as_epq=&as_oq=&as_eq=&lr=lang_zh-TW&cr=&as_ft=i&as_filetype=&as_qdr=all&as_occt=any&as_dt=i&as_sitesearch=&as_rights=
   href   :   http://www.google.com.hk/search?as_q=%E4%B8%AD%E5%9B%BD&hl=zh-CN&newwindow=1&num=20&btnG=Google+%E6%90%9C%E7%B4%A2&as_epq=&as_oq=&as_eq=&lr=lang_zh-TW&cr=&as_ft=i&as_filetype=&as_qdr=all&as_occt=any&as_dt=i&as_sitesearch=&as_rights=#a15
   target   :   _blank
  
  Form上面的属性
   name action method target encoding length
  Select Option
   size属性，表示用户能看到的选项数是几个
   multiple属性，表示是否可以多选 多选的选项都将被发送到服务器
   
   form当前select属于哪个form元素
   disabled 当前是否处于不可用状态 可读写
   length  表示option 的个数
   selectedIndex 当前选中的option元素在select中的整数值 如果是选择的多项，返回的是第一项
   tabIndex tab键切换到当前元素的时候的索引值
   type 当前所处的选择类型 如果是单选的话，是select-one
    如果是多选的话，是select-multiple
   value 当前选中项的值 如果选择多项，返回的是第一项
   options对象，当前select里面的options对象 设置其length属性，会更改options的个数
    将某个option设置为null,当导致该option元素在select中移除
   
   add方法  select.add(new_option , ref_option);
    1.ie
     select.add(new_option , ref_optionIndex); 添加之后将会变为的index
    2.other
     select.add(new_option , refOption);       添加的后面的option，如果是最后一个，则为undefined
   blur方法
    使select失去焦点
   focus方法
    使select获得焦点
   remove方法   select.remove(5);
    移除指定index处的option
    
   Option
    构造方法
    new Option(text , value , defaultSelected , selected);
         显示文字，值，默认是否选中(重置时选中) , 是否选中
    var option = document.createElement('OPTION');
    option.text = 'myoption';
    option.value = 'aaaaaa'
    
    属性
    defaultSelected  是否默认选中，设为true后当表单重置的时候，该项会被默认选中
    disabled   是否禁用该项，禁用后，该项将不能被选择
    form    包含此项的form元素
    index            此项在option列表中的索引
    selected   此项是否被选中
    text    此option项的内容
    value    此option所对应的值