DOM 相关

DOM概念

  Document Object Model      文档对象模型

  DOM是载入浏览器的稳定模型,以节点树的形式来表现文档,每个节点代表文档的构成部分

 DOM节点

  1.节点内容:

    DOM当中,最小的组成单位是节点(node)。

    文档的树形结构也就是我们常说的DOM树,就是由不同类型的节点组成。 

    根节点   元素节点   注释节点  文本节点  属性节点 

              

  节点类型

  我们可以通过nodeType属性查看节点的类型,节点的类型一共包括下面的几种类型:

  不同节点的nodeType属性值和对应的常量如下。

  • 文档节点(document):9,对应常量Node.DOCUMENT_NODE
  • 元素节点(element):1,对应常量Node.ELEMENT_NODE
  • 属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE
  • 文本节点(text):3,对应常量Node.TEXT_NODE
  • 文档片断节点(DocumentFragment):11,对应常量Node.DOCUMENT_FRAGMENT_NODE
  • 文档类型节点(DocumentType):10,对应常量Node.DOCUMENT_TYPE_NODE
  • 注释节点(Comment):8,对应常量Node.COMMENT_NODE

  2.节点关系

    父:parent

    子:child

    同胞:sibling

DOM方法

  获取DOM对象的方法

    元素节点选择器

    getElementById()                         id选择器

    getElementsByTagName()      标签名选择器

    getElementsByClassName()   class选择器

    ES5新增 高级选择器 (支持几乎所有的css选择器)

    document.queryselector();

    document.queryselectorAll();

    关系选择器

    父选子:标签名.children

    子选父:标签名.parentNode

    第一个子:标签名.firstElementChild

    最后一个子:标签名.lastElementChild

    上一个兄弟:标签名.previousElementSibling

    下一个兄弟:标签名.nexElementSibling

  DOM元素节点的操作方法

    appendChild()  添加节点

    removeChild()  删除节点

    replaceChild()  替换节点

  DOM属性节点的操作方法

    1.可见属性

    内置:使用对象的方法(点方法或者方括号方法)

obox.style.background = "red";

    非内置属性:

setAttribute()     //设置非内置属性
getAttribute()     //得到非内置属性
removeAttribute()  //移除非内置属性

    2.不可见属性

    内置不可见属性:由系统提供,可以使用对象的操作方法操作

      obox.innerHTML    返回包括标签在内的所有内容

      obox.innerTEXT    返回标签内的内容

    非内置不课件属性:可以使用对象的操作方式 

      随意自定义   

obox.abc = "hahahah"
console.log(obox.abc)  //hahahah

 

DOM元素的增删查改

增:    Node.appendChild()方法   将一个节点添加到指定父节点的子节点列表末尾

var div = document.creatElement("div");
document.body.appendChild(div);

删    Node.remove()方法

var obox = document.querySelector(".box");
obox.remove();

改  

//  <div class="box">hello,world</div>

var obox = document.queryselector(".box");
obox.outerHTML= "<span class=''" + obox.className + "'>" + obox.innerHTMl+"</span>"

 

DOM获取元素的属性

  1.行内样式:能获取和设置 

obox.style.background = "red";

  2.非行内样式:只能获取,不能设置

getComputedStyle(ele,flase); //正常浏览器 flase表示是否获取伪类  

currentStyle;
//ie浏览器
获取非行内样式(兼容问题)

    function getStyle(obj,attr){             //获取非行间样式,obj是对象,attr是值
        if(obj.currentStyle){                //针对ie获取非行间样式
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];   //针对非ie
        };
    };

 

DOM获取元素的尺寸类样式

  • 可视内容的宽高(不含边框)
    • ele.clientWidth
    • ele.clientHeight
  • 滚动区域的宽高  
    • ele.scrollWidth
    • ele.scrollHeigth
  • 可视边框的宽高(包括边框)
    • ele.offsetWidth
    • ele.offsetHeight
  • 元素的相对于带有定位属性的父级元素的位置
    • ele.offsetLeft
    • ele.offsetTop
  • 页面滚动的距离
    • ele.scrollLeft
    • ele.scrollTop

 

posted @ 2019-09-07 20:53  竹薙  阅读(151)  评论(0编辑  收藏  举报