DOM与BOM的概念

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。而OM定义了JavaScript能够进行操做的浏览器的各个功能部件的接口。

起源

在浏览器厂商进行浏览器大站的同时，W3C结合你们的优势推出了一个标准化的DOM，并于1998年10月完成了第一级 DOM，即：DOM1。W3C将DOM定义为一个与平台和编程语言无关的接口，

经过这个接口程序和脚本能够动态的访问和修改文档的内容、结构和样式。

应用

1、查找元素

1.直接查找：

　　　　document.getElementById             //根据ID获取一个标签

　　　　document.getElementsByName          //根据name属性获取标签集合

　　　　document.getElementsByClassName     //根据class属性获取标签集合

　　　　document.getElementsByTagName       //根据标签名获取标签集合

2.间接查找：

　　　　parentNode          // 父节点

　　　　 childNodes             // 全部子节点

　　　　 firstChild             // 第一个子节点

　　　　 lastChild              // 最后一个子节点

　　　　 nextSibling            // 下一个兄弟节点

　　　　 previousSibling        // 上一个兄弟节点

　　　　  parentElement           // 父节点标签元素

　　　　 children                // 全部子标签

　　　　 firstElementChild       // 第一个子标签元素

　　　　 lastElementChild        // 最后一个子标签元素

　　　　 nextElementtSibling     // 下一个兄弟标签元素

　　　　 previousElementSibling  // 上一个兄弟标签元素

 2、操做

 1.内容：

　　　　innerText              //文本

　　　　outerText

　　　　innerHTML              //HTML内容

　　　　innerHTML 

　　　　value                  // 值

2.属性：

　　　　 attributes                // 获取全部标签属性

　　　　setAttribute(key,value)   // 设置标签属性

　　　　getAttribute(key)         // 获取指定标签属性

3.class操做：

　　　　className                // 获取全部类名

　　　　classList.remove(cls)    // 删除指定类

　　　　classList.add(cls)       // 添加类

4.标签操做：

建立标签： var tag = "<a class='c1' href=''></a>"

操做标签： var obj = "<input type='text' />" ;

　　　　　xxx.insertAdjacentHTML( "beforeEnd" ,obj);

　　　　　xxx.insertAdjacentElement( 'afterBegin' ,document.createElement( 'p' ))

样式操做： var obj = document.getElementById( 'i1' )

　　　　　obj.style.fontSize = "32px" ;

　　　　　obj.style.backgroundColor = "red" ;

3、事件：

来源：https://www.cnblogs.com/allan-king/p/5799144.html

 

DOM的（method）方法：

1.经过getElementById()方法访问节点

　　document对象的getElementById()方法能够访问页面中的节点，该方法在使用时，必须指定一个目标一个元素的id做为参数。

　　基本语法：

　　例：var s=document.getElementById(id);  //调用时参数须要加双引号

2.经过getElementsByName()方法访问节点

 　　经过元素名字来进行访问。

　　 基本语法：

　　 例：var s=document.getElementsByName(name);  //调用时参数须要加双引号

 

3.经过getElementsByTagName()方法访问节点

 

 　　经过标记名称来获取页面上全部同类的元素。

 

　　 基本语法：

 

　　 例：var s=document.getElementsByName(tagname);  

4.经过form元素方法访问节点

 　　若是要得到页面上中的form对象，除了getElementById()方法访问、getElementsByName()方法访问，还能够经过document对象的forms属性来得到这个form对象。

　　 基本语法：

　　 例：

　　 var myfrm=document.forms;    //6经过document的forms属性对象得到数组对象

　　 var mloginform=myfrm[0];             //得到数组中的第一个form对象

其余方法：getElementsByClassName()   返回包含带有指定类名的全部元素的节点列表。  appendChild()   把新的子节点添加到指定节点。 removeChild()   删除子节点。  replaceChild()  替换子节点。  insertBefore()  在指定的子节点前面插入新的子节点。

　　　　　　createAttribute()  建立属性节点。  createTextNode()  建立文本节点。getAttribute()  返回指定的属性值。  setAttribute()  把指定属性设置或修改成指定的值。

【在DOM中还有两个很重要的属性，分别是innerText和innerHTML】

　　innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

　　innerText 打印标签之间的纯文本信息，会将标签过滤掉。

DOM（文档对象模型）：网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model）。

 

 

BOM（浏览器对象模型）：使avaScript 有能力与浏览器"对话"

BOM连接：https://blog.csdn.net/qq_39579242/article/details/82850173

Windows方法：ndow.open() - 打开新窗口；window.close() - 关闭当前窗口；window.moveTo() - 移动当前窗口；window.resizeTo() - 调整当前窗口的尺寸