DOM&BOM

Posted 2021-01-15 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方法：可以使用两个属性来确定浏览器窗口的大小。两个属性都以像素为单位返回大小：