DOM&BOM

DOM:DOM 全称是 Document Object Model，也就是文档对象模型。DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它容许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不一样的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

 

一、DOM起源（recourse）:在1998年，W3C发布了第一级的DOM规范。这个规范容许访问和操做HTML页面中的每个单独的元素。全部的浏览器都执行了这个标准，所以，DOM的兼容性问题也难觅踪迹了。

二、DOM方法：

可经过 JavaScript （以及其余编程语言）对 HTML DOM 进行访问。

全部 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您可以执行的动做（好比添加或修改元素）。

属性是您可以获取或设置的值（好比节点的名称或内容）。

三、DOM内容：来自于w3school

一、经过 HTML DOM，JavaScript 可以访问 HTML 文档中的每一个元素。

二、经过 HTML DOM，您可以访问 HTML 对象的样式对象。

三、HTML DOM 容许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

• 在元素上点击
• 加载页面
• 改变输入字段

 

四、DOM应用：

---------------------

做者：zhaoke_930325

来源：CSDN

原文：https://blog.csdn.net/zhaoke_930325/article/details/75635179

版权声明：本文为博主原创文章，转载请附上博文连接！

查找元素、改变HTML

样式、使用事件（在元素上点击、加载页面、改变输入字段）

 

一、子节点的删除能够用’javascript:;’来做为删除选项：

 

for (var i = 0; i < aA.length; i++) {

            aA[i].onclick = function(){

                oUl.removeChild(this.parentNode);

            };

        }

二、childNodes只支持IE6-8，且包括文本节点和元素节点，而children只包括元素，不包括文本节点。

三、子节点指的是只算第一层的节点，而内层节点不算。

四、parentNode：当前的父节点，是获取用来定位的父级。

五、setAttribute（名称，值）方法添加指定的属性，并为其赋指定的值。

若是这个指定的属性已存在，则仅设置/更改值。getAttribute用来获取属性。

 

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

六、获取元素属性的方法：

 

function getStyle(oParents,sClass)

        {

            var aEle = oParents.getElementsByTagName('*');

            var aResult[];

            for (var i = 0; i < aEle.length; i++) {

                if(aEle[i].className=sClass)

                {

                    aResult.push(aEle[i]);

                }

            }

            return aResult;

        };

七、父级调用的方法有：

.appendChild(子节点)增长子节点，过程是先把元素从原有的父级删掉，再添加到新的父级；.insertBefore（子节点，在谁以前）；.removeChild（子节点）移除子节点。

八、在DOM文档中能够经过 document.createDocumentFragment();来建立表格，经过调用 .tBodies[i]取body，.rows[i]取行，.cells[i]取单元格，.toLowerCase()转为小写，用于搜索时不区分大小写，.search(‘str’)值为位置，当值等于 -1 时，为没有找到（模糊搜索），.split（‘str’）切分字符串。

九、.sort（）是Arr数组特有的方法，输入时失去焦点时的验证，onkeyup onblur，

提交检查onsubmit。

 

BOM:

BOM 是 Browser Object Model，浏览器对象模型。简单地说，BOM和DOM同样，只不过DOM操做的是HTML中的元素，BOM是浏览器的API、操做的是浏览器（即控制浏览器的行为）

全部浏览器都支持 window 对象。它表示浏览器窗口。全部 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至文档对象（HTML DOM）也是window对象的属性： 一些经常使用的Window方法：可使用两个属性来肯定浏览器窗口的大小。两个属性都以像素为单位返回大小：

• window.innerHeight - 浏览器窗口的内部高度（以像素为单位）
• window.innerWidth - 浏览器窗口的内部宽度（以像素为单位）
• 其余一些方法：
• window.open（） - 打开一个新窗口
• window.close（） - 关闭当前窗口
• window.moveTo（） - 移动当前窗口
• window.resizeTo（） - 表示当前窗口

一、window.screen对象包含有关用户屏幕的信息

二、screen.width属性返回访问者屏幕的宽度（以像素为单位）。

三、screen.height属性返回访问者屏幕的高度（以像素为单位）

四、screen.availWidth属性返回访问者屏幕的宽度（以像素为单位），减去Windows任务栏等界面功能

五、screen.availHeight属性返回访问者屏幕的高度（以像素为单位），减去Windows任务栏等界面功能。

六、screen.colorDepth属性返回用于显示一种颜色的位数。全部现代计算机都使用24位或32位硬件进行颜色分辨。24位= 16,777,216种不一样的“真彩色”。32位= 4,294,967,296种不一样的“深色”

七、screen.pixelDepth属性返回屏幕的像素深度。 

八、window.location对象可用于获取当前页面地址（URL）并将浏览器重定向到新页面。