DOM(二)

一、DOM节点的简介

    HTML文档中的每一个成分都是节点

    具体理解为：

         1、每一个HTML标签是一个元素节点

         2、包含在HTML的文本是一个文本节点（所有的换行符也属于文本节点）

         3、每一个HTML属性是一个属性节点

         4、注释属于注释节点

二、如何获取DOM节点

    我们都知道，在之前一片的文章中，获取DOM节点的方式可以通过以下几种方式：

         1、document.getElementById(id);    //通过id名的方式获取

         2、document.getElementsByTagName(tagName);      //通过标签名的方式获取

         3、document.getElementsByName(name);      //通过name属性的方式获取

         4、document.getEoementsByClassName(className);      //通过元素的class名来获取

但是这种方法有缺点，就是浪费内存，且逻辑性不强，就比方你要获取好多好多的DOM节点，难道要取好多的id名吗？这将是一场很大的工程量吧，这时候，我们可以回忆昨天说的DOM是一个树形结构，它是存在父子兄弟关系的，那么能否用这种方式获取一个DOM节点呢，当然答案是肯定的！！！

通过节点的关系属性来获得节点的引

           对象.parentNode      获得父节点的引用
           对象.childNodes       获得子节点的集合，包括空白节点。IE7/8不包含空文本节点，但IE7包含首个注释节点（前面没有元素节点），IE8包含所有的注释节点。
          对象.children         获取子节点的集合，不包含空白节点，但IE7包含首个注释节点（前面没有元素节点），IE8包含所有的注释节点

         对象.firstChild        获得第一个子节点（IE7/8非空白节点，可能是注释节点）

         对象.firstElementChild       获得第一个非空白的子节点（IE7/8不支持）

  对象.lastChild        获得最后一个子节点（IE7最后一个子元素节点，IE8最后一个非空白节点，可能是注释节点）

  对象.lastElementChild        获得最后一个非空白的子节点（IE7/8不支持）

  对象.nextSibling                获得下个兄弟节点的引用（包括空白节点和注释，IE7/8包括注释节点）

  对象.nextElementSibling          获得下个兄弟节点的引用（IE7/8不支持）

 

 nextSibling和nextElementSibling的区别 ：

      nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；
           nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

对象.

previousSibling         获得上个兄弟节点的引用（获得空白节点和注释，IE7/8，包括注释节点，不包括空白节点）

对象.previousElementSibling         获得上个兄弟节点的引用   （IE7/8不支持）

缺点就是兼容性不好

节点的其他属性

         ownerDocument：获取该节点的文档根节点，相当于document

         attributes：获取当前元素节点的所有属性节点集合（IE7以下不正常）

         tagName：获取元素节点的标签名

         id：元素节点的id名

        title： 元素节点的title属性值（鼠标悬停时提示）

        className：元素节点的类名

    节点信息（属性）

      

      创建文档碎片

              语法： var oFragmen t  = document.createDocumentFragment();

 经过测试，在ie和火狐下性能明显以提高

    

 

节点计算属性

        1、offsetParent：获取元素的最近的具有定位属性的父级元素，如果没有则返回body

     2、offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离（子元素的marginLeft+left+父元素的paddingLeft）

      3、offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离。（子元素的marginTop + top + 父元素的paddingTop）

       4、  scrollLeft /scrollTop：滚动条最顶端和窗口中可见内容最顶端之间的距离

       5、clientWidth/clientHeight：元素视窗宽度/高度

       6、offsetWidth/ offsetHeight：元素实际宽度/高度

       7、scrollWidth/scrollHeight：获取对象的滚动条宽度/高度

获取form表单

一、通过直接定位的方式获取

       document.getElementById();

       document.getElementsByName();

       document.getElementsByTagName();

二、通过集合的方式来获取引用

      表单对象.elements        //获得表单里面所有元素的集合

      表单对象.elements[index]；

      表单对象.elements["name"];

      表单对象.elements.name 

三、通过name直接获取

      表单对象.name           //name指的是元素的name

表单元素共同的属性和方法

一、获取表单元素的值

      表单元素对象.value       //获取或者是设置值

二、属性

      disabled         //获取或设置表单控件是否禁用   true    false

三、方法（表单元素是否获得焦点）

     blur()        //失去焦点

     focus()       //获得焦点

操作form表单元素

一、文本域

      value 属性：设置或者获取值

二、单选按钮

      checked 属性： 返回或者设置单选的选中状态   返回值true选中，false未选中

      value 属性：获取选中的值，必须先判断单选按钮是否被选中

三、多选按钮

      checked 属性：返回或者设置多选的选中状态   返回值true选中，false未选中

      value 属性：获取选中的值，必须先判断选中状态

四、下拉框

       selected 属性：给option设置或者返回下拉框的选中状态    true选中，false未选中

       selectedIndex 属性：设置或者返回下拉框被选中的索引号

五、文本区域

       value 属性：设置或者获取值

六、验证表单

       1、事件：

            onsubmit     当表单提交的时候触发的事件

            onblur          失去焦点   

            onfocus        获得焦点

            onchange     下拉框改变值的时候

       2、return false;       //阻止事件的默认行为

七、提交方法

      表单对象.submit();