DOM总结

时间:2021-06-16 14:30:03

一、DOM概念

  1、DOM:Document Object Model  文档对象模型

    (1) 文档:html页面;

    (2) 文档对象:页面中的元素;

    (3) 文档对象模型:代表的是一套准则、标准,是WC3组织定义的;为了能够让程序(js)去操作页面中的元素,定义出来的一套标准

  2、DMO定义:

    DOM为了能够更方便的定义和操作页面中的元素,首先会把当前整个页面看作成一个竖状结构,也就是说DOM会把文档看作是一棵树,同时定义了很多方法来操作这棵树中的每一个元素,我们称之为DOM节点

二、DOM的节点类型   (总共有12种)

  1、最常用的是:元素节点:返回1

           属性节点:返回2

           文本节点:返回3

  2、元素.nodeType:只读属性

    作用:可以获得当前元素的节点类型

    alert(元素.nodeType)

三、属性

(一)获取父级下的子节点

  1、元素.childNodes   只读属性  子节点列表的集合

    兼容:标准下:包含了文本和元素类型的节点,并且也会包含非法嵌套的子节点;

       非标准下:只包含元素类型的节点,IE7以下不会包含非法嵌套子节点;

    需要注意的是:childNodes只包含一级子节点,不包含后辈孙级以下的节点

    alert(元素.childNodes[0].nodeType);     // 通过nodeType可以查看当前元素的节点类型

  2、元素.children:只读属性   子节点列表的集合

    a : 标准下和非标准下:只包含元素类型的节点

    b : 用法与childNodes相同,只是说childNodes是存在兼容问题的

  3、元素.attributes:只读属性  属性列表集合

    alert(元素.attributes.length);        // 元素属性的个数

    alert(元素.attributes[0]);            // object attr  属性对象

    alert(元素.attributes[0].name);       // 获得当前属性的名称

    alert(元素.attributes[0].value);      // 获得当前属性的值

    alert(元素.attributes[0].nodeType);   // 可以通过nodeType查看节点类型:属性节点 返回2

(二)获取元素的子节点: (用法都是一样的)

  1、获取元素下第一个子节点

    (1) 元素.firstChild:只读属性 (非标准下获取第一个元素类型的子节点)

      标准下:firstChild会包含文本类型的节点

      非标准下:只包含元素节点

    (2) 元素.firstElementChild:只读属性  (标准下获取第一个元素类型的子节点)

      标准下:包含元素节点

      非标准下:undefined

    (3) 想要做到兼容,可以这样写:

      var oFirst = oUl.firstElementChild || oUl.firstChild;

    (4) 想要获取元素的第一个子节点,可以用children[0]的方法找到第一个元素

  2、获取元素的最后一个子节点:

    (1) 元素.lastChild

    (2) 元素.lastElementChild

    (3) 想要做到兼容,可以这样写:

      var oLast = oUl.lastElementChild || oUl.lastChild;

  3、获取元素的下一个兄弟节点:

    (1)元素.nextSibling

    (2)元素.nextElementSibling

  4、获取元素的上一个兄弟节点:

    (1)元素.previousSibling

    (2)元素.previousElementSibling

(三)获取父节点

  1、元素.parentNode: 只读属性,父节点,只有一个,没有兼容问题

  2、元素.offsetParent: 只读属性,离当前元素最近的一个有定位属性的父节点

    需注意的问题:

      (1)如果没有定位父级,默认指向body。 ( offsetParent —> body )

      (2)IE7以下,如果当前元素没有定位默认指向body,有定位则指向的是html

      实例:

      #div3{background:red;position:relative;}  // 当前元素设置了定位

      alert(oDiv3.offsetParent.tagName);   // 当前oDiv3在css样式中设置了定位,那么在JS中offsetParent就会指向html

      (3)IE7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上

  3、offsetLeft、offsetTop

    元素.offsetLeft[top]:只读属性,当前元素到定位父级(offsetParent)的距离(也叫偏移值)。

    需注意的问题:

      (1) 如果没有定位父级:

      offsetLeft —> html

      (2) 如果有定位父级:

       IE7以下:    如果当前元素也有定位,那么就是到定位父级的距离,如果当前元素没有定位,那么就是到body的距离(要想得到兼容,当前元素必须有定位)

      其他浏览器: 到定位父级的距离

  4、width、height 取值

    (1) style.width:样式宽  

    (2) clientWidth:可视区宽(样式宽+padding)

    (3) offsetWidth:占位宽(可视区宽+边框)

四、DOM方法

(一)操作特性的DOM方法

  1、元素.getAttribute(属性名称); 获取指定元素的指定属性的值

    需要注意的是:

    alert(oImg.getAttribute('src'));   // 在ie7下获取图片的src还是会返回资源的绝对路径,而标准浏览器返回的是相对路径

  2、元素.setAttribute(属性名称); 给指定元素指定的属性设置值,两个参数

    实例:

    oText.setAttribute( 'value', 'hello' );   // 给value属性设置了'hello'值

  3、元素.removeAttribute(属性名称); 移除指定元素的指定的属性

(二)创建元素

  父级.createElement(要创建元素的标签名)    

(三)操作动态创建出来的节点

  1、添加到页面中:

    (1) 父级.appendChild();   追加子元素

    (2) 父级.insertBefore(新的元素,被插入的元素);   在指定元素前面插入一个新元素

      实例:

        oUl.insertBefore(oLi,oUl.children[0]);

      存在问题:

        a:在ie下如果第二个参数的节点不存在,会报错;

        b:在其他标准浏览器下,如果第二个参数的节点不存在,则会以appendChild的形式进行添加

      解决方案:

        if(oUl.children[0]){
                    oUl.insertBefore(oLi,oUl.children[0]);
                }else{
                    oUl.appendChild(oLi);
                }

  2、替换子节点

    父级.replaceChild(新节点,被替换节点)

  3、删除元素

    父级.removeChild(要删除的元素);

五、操作表格的属性和方法

  tHead:表格头

  tBodies:表格正文

  tFoot:表格尾

  rows:行

  cells:列

六、表单操作

  1、可以根据name的值选中当前的表单元素:(每一个表单元素都有name这个属性)

  2、onchange事件  当值发生改变的时候触发

    (1) 格式:oForm.text1.onchange = function (){ };     // text1 是 name 的值

    (2) input表单:

      text(文本框):当光标离开的时候如果有内容就会触发;

      radio/checkbox:标准下点击的时候只要值变了,那么就会触发;

                非标准下焦点离开的时候如果值变了,就会触发;

      select:只要选中下拉选项就会触发

  3、表单事件

    (1) onsubmit:  事件 当提交表单的时候触发

    (2) onreset: 事件  当提交表单重置的时候触发