DOM与BOM的概念

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

起源

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

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

应用

一、查找元素

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  // 上一个兄弟标签元素

 二、操作

 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";

三、事件：

来源：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() - 调整当前窗口的尺寸