web前端：DOM解读

作者:爱瞌睡的猫更新于： 2020-03-24 21:39:24

　　DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战"，双方为了在Javascript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的Dhtml格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

　　DOM概念-documentobjectmodel：文档对象模型

　　操作文档的一套方法，document是一个对象，是dom的顶级对象，属于window的一个对象，并且可以说是最出色的一个儿子。

　　DOM元素的获取：

　　document.getElementById("id名字")//根据ID名字来获取标签；

　　document.getElementByTagName("标签名")//根据标签名来获取；

　　document.getElementByClassName("类名")//根据类名来获取；

　　document.getElementByName("name的属性值")//根据name属性来获取；

　　document.querySelector(css选择器)//根据CSS选择器来获取；

　　document.querySelectorAll(css选择器)//根据CSS选择器来获取所有满足条件的元素；

　　//3、5、6在IE中不兼容

　　DOM元素的操作：

　　内容操作：

　　元素.innerText//文本内容操作；

　　元素.innerHTML//带标签的内容操作；

　　元素.value//表单元素的内容操作（input类型）

　　元素.outText//包含自身的标签；

　　元素.outHTML//包含自身的标签；

　　属性操作：

　　元素.getAttribute("属性名")//获取属性的值，只能获取不能修改

　　元素.setAttribute("属性名","属性值")//修改属性的值，相当于重新设置

　　元素.removeAttribute("属性名")//删除属性

　　//也可以直接通过"."来操作元素.属性="";//（通常不在标签上显示）

　　类名、样式操作：

　　元素.style.css(属性名)="值"；//设置样式；

　　元素.className="值";//设置class类名；

　　元素.className="";//清空class类名；

　　DOM节点：

　　概念：组成HTML页面的所有内容，都叫做节点；

　　组成：//（元素、文本、注释、属性等节点）

　　元素节点：（主要介绍）

　　元素节点的获取：

　　元素.children//获取所有的子元素；

　　元素.firstElementChild//获取第一个子元素；

　　元素.lastElementChild//获取最后一个子元素；

　　元素.previousElementSibling//获取上一个兄弟元素；

　　元素.nextElementSibling//获取下一个兄弟元素；

　　元素.parentElement//获取父元素；

　　元素节点的操作：

　　vartd=document.createElement('td');//创建标签节点

　　插入节点：

　　父元素.appendChild(子元素)//在父元素最后追加；

　　父元素.insertBefore(新元素，旧元素)//将新的元素插入到指定的子元素前面；

　　删除节点：父元素.remove(子元素)；

　　复制节点：父元素.cloneNode(true)；

　　//有true就会连标签里面的内容也复制出来，没有true只会复制空标签；

　　替换节点：父元素.replaceChild(新元素，旧元素)//使用新的子元素替换掉旧的元素；

　　获取元素节点的样式:

　　window.getComputedStyle(元素)

　　元素.currentStyle(IE兼容)

　　封装之后：

　　functiongetStyle(ele,attr){

　　if(window.getComputedStyle){

　　returnwindow.getComputedStyle(ele)[attr]

　　}else{

　　returnele.currentStyle[attr]

　　}

　　}

　　vardiv=document.getElementsByTagName("div")[0];

　　varw=getStyle(div,"width");

　　console.log(w);

　　获取元素位置：

　　元素.offsetLeft元素.offsetTop//这个就是于offsetParent的距离

　　元素.offsetParent//获取到定位是参考的那个设置过定位的父元素；

　　获取节点：

　　元素.childNodes//获取所有子节点；

　　元素.parentNode//获取父节点；

　　元素.firstChild//获取第一个子节点；

　　元素.lastChild//获取最后一个子节点；

　　元素.previousSibling//获取上一个兄弟节点；

　　元素.nextSibling//获取下一个兄弟节点；

　　节点属性：

　　节点属性nodeType节点类型元素节点1文本节点3注释节点8

　　nodeName节点名称​元素节点大写的标签名​文本节点#text​注释节点#comment

　　nodeValue节点的值​元素节点null​文本节点文本内容​注释节点注释的内容

　　获取/设置滚动过的距离

　　有文档声明的时候​document.documentElement.scrollTop​document.documentElement.scrollLeft​没有文档声明的时候​document.body.scrollTop​document.body.scrollLeft

　　//做一个回到顶部的效果

　　获取浏览器大小

　　document.documentElement.clientWidth​document.documentElement.clientHeight​//不包含滚动条的尺寸

　　获取html基本结构

　　document.documentElement是html标签​document.bodybody标签​document.headhead标签​document.titletitle标签

　　文档对象模型(DocumentObjectModel，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。