您的位置：首页 > Web前端 > JavaScript

JS中的DOM与BOM学习日志

2017-08-29 15:43 323 查看

文档对象模型DOM

文档对象模型的定义：针对XML但经过扩展用于HTML的应用程序编程接口。我们常说的DOM树就是其实是一种映射页面的节点结构，合理地安排DOM树节点对开发者团队之间的合作非常重要，DOM树的重要结构如下：

W3C明确地将DOM数分为3个不同的部分：

1.核心 DOM - 针对任何结构化文档的标准模型

2.XML DOM - 针对 XML 文档的标准模型

3.HTML DOM - 针对 HTML 文档的标准模型

DOM核心：主要用于映射基于XML的文档结构，以便简化针对文档中任意部分的访问和操作。

DOM HTML：主要在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

DOM级别

DOM1级由两个模块组成：DOM核心与DOM HTML。

DOM2级在原来DOM的基础上又扩充了鼠标和用户事件等，细分如下：

1.DOM视图：定义了跟踪不同文档视图的接口；

2.DOM事件：处理事件的接口；

3.DOM样式：基于CSS为元素应用样式的接口；

4.DOM遍历和范围：定义了遍历和操作文档树的接口。

DOM3级进一步扩展了DOM，主要在DOM2级的基础上增加了加载和保存模块和DOM验证模块。

浏览器对DOM的支持情况

主要如下图所示（图片来自互联网）

DOM方法和DOM属性

DOM方法提供了一系列的可编程接口，允许开发者可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）

常见的DOM方法

常用的DOM属性

innerHtml属性：获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。如

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(tx
4000
t);
</script>

</body>
</html>

nodeName 属性：nodeName 属性规定节点的名称。主要有一下特点

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue 属性:nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或 null;文本节点的 nodeValue 是文本本身;属性节点的 nodeValue 是属性值.

nodeType 属性：共有一下12种NodeType属性

浏览器对象模型BOM

浏览器对象模型BOM可以控制浏览器显示的页面以外的部分，它一般只用于处理浏览器窗口和框架，但是也有一些额外的扩展，如弹出新浏览器窗口的功能；移动、关闭浏览器；提供浏览器加载页面详细信息的navigator对象；对cookie的支持等。

每个浏览器都有不同的实现，但是它们都有两个共同的对象：window对象和navigator对象。

window对象：BOM的核心，它表示浏览器的一个实例，在浏览器中，window对象既是通过javascript访问浏览器窗口的一个接口（API），又是ECMAScript规定的Global对象。

window对象的方法在全局作用于内，所有在全局作用域定义的属性和方法都是window对象的属性和方法.

这里提供BOM的概览图，以便在以后的工作生活中参考

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航