DOM&BOM

Posted yyqxlcx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM&BOM相关的知识,希望对你有一定的参考价值。

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

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

W3C DOM 标准被分为 3 个不同的部分:

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

 

1、DOM起源(recourse):1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也难觅踪影了。

2、DOM方法:

可通过 javascript (以及其他编程语言)对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

方法是您能够执行的动作(比如添加或修改元素)。

属性是您能够获取或设置的值(比如节点的名称或内容)。

3、DOM内容:来自于w3school

1、通过 HTML DOM,JavaScript 能够访问 HTML 文档中的每个元素。

2、通过 HTML DOM,您能够访问 HTML 对象的样式对象

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

HTML 元素”有事情发生“时,浏览器就会生成事件:

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

 

4、DOM应用:

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

作者:zhaoke_930325

来源:CSDN

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

版权声明:本文为博主原创文章,转载请附上博文链接!

查找元素、改变HTML

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

 

1、子节点的删除可以用’javascript:;’来作为删除选项:

 

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

            aA[i].onclick = function(){

                oUl.removeChild(this.parentNode);

            };

        }

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

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

4、parentNode:当前的父节点,是获取用来定位的父级。

5、setAttribute(名称,值)方法添加指定的属性,并为其赋指定的值。

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

 

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

6、获取元素属性的方法:

 

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;

        };

7、父级调用的方法有:

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

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

9、.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() - 表示当前窗口

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

2、screen.width属性返回访问者屏幕的宽度(以像素为单位)。

3、screen.height属性返回访问者屏幕的高度(以像素为单位)

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

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

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

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

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

以上是关于DOM&BOM的主要内容,如果未能解决你的问题,请参考以下文章

DOM&BOM

DOM & BOM :起源方法内容应用

关于dom&bom

[JS DOM&BOM]DOM核心重点

[JS DOM&BOM]DOM获取元素

[JS DOM&BOM]Web API