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