Question

我总是听到人们谈论DOM，操纵DOM，改变DOM，遍历DOM;但究竟是什么意思？

什么是DOM，为什么我要用它做点什么？

Answer 1

DOM基本上是用于连接文档的API，并且可以作为库在许多语言中使用（JS是其中一种语言）。浏览器会根据嵌套将网页中的所有HTML转换为树。弹出Firebug并查看HTML结构。那是我正在谈论的树。

如果您想更改任何可以与DOM API交互的HTML，请执行此操作。

<html>
 <head><script src="file.js"></script></head>
 <body>blah</body>
</html>

在file.js我可以使用以下方式引用身体：

onload = function() {
    document.getElementsByTagName('body')[0].style.display='none';
}

getElementsByTagName是document对象的一种方法。我在操作body元素，这是一个DOM元素。如果我想遍历并找到说法，我可以做到这一点：

onload = function() {
 var els = document.getElementsByTagName('*');
 for ( var i = els.length; i--; ) {
    if ( els[i].nodeType == 1 && els[i].nodeName.toLowerCase() == 'span' ) {
       alert( els[i] )
    }
 }
}

我正在遍历上面代码段中的getElementsByTagName返回的nodeList，并根据nodeName属性查找范围。

Answer 2

这意味着使用Document Object Model，这是一个用于处理XML文档的API。

从DOM上的w3开始：

文档对象模型是一个平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容，结构和样式。可以进一步处理该文档，并且可以将该处理的结果合并回所呈现的页面中。这是在W3C和网络上对DOM相关材料的概述。

DOM工作中最常用的功能之一是：

getElementById

操作/更改DOM意味着使用此API更改文档（添加元素，删除元素，移动元素等等）。

遍历DOM意味着导航它 - 选择特定元素，迭代元素组等...

Answer 3

只需要阅读一些有关它的信息，因为我在这里列出的答案是不够的，有关于它的书籍。
但是你可以通过检查这些问题来回答你的问题：
http://en.wikipedia.org/wiki/Document_Object_Model
http://www.w3.org/DOM/
http://www.w3schools.com/htmldom/default.asp

Answer 4

D ocument

O 对象

M odel

这是DOM。 XML，HTML或类似文档。所有这些术语都意味着解析文档和/或对其进行更改（通常使用一些可用的工具，如JavaScript或C＃）。

当人们使用这些术语时，DOM的最佳示例是浏览器中的HTML文档。在这种情况下，您可能希望操纵DOM以向网页添加内容。

Answer 5

简而言之：

当加载网页时，浏览器会创建页面的文档对象模型，这是HTML文档的面向对象的表示，充当JavaScript与文档本身之间的界面，允许创建动态网页。

来源：w3schools - HTML DOM

人们对“DOM操纵”的意思是什么？我该怎么做？

5 个答案: