Html 人们所说的“DOM 操作”是什么意思，我该怎么做？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3934826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What do people mean by "DOM Manipulation" and how would I do that?
提问by meder omuraliev
I always hear people talk about DOM this, manipulate the DOM, change the DOM, traverse the DOM; but what exactly does this mean?
我总是听到人们谈论 DOM 这个，操纵 DOM，改变 DOM，遍历 DOM；但这究竟是什么意思？
What is the DOM and why would I want to do something with it?
什么是 DOM，我为什么要用它做点什么？
回答by meder omuraliev
The DOMis basically an API you use to interface the document with, and is available in many languages as a library ( JS is one of those languages ). The browser converts all the HTML in your web page to a tree based on the nesting. Pop open Firebug and look at the HTML structure. That is the tree I'm talking about.
该DOM基本上是你使用的接口与文档的API，并在许多语言作为一个库（JS是那些语言之一）可用。浏览器根据嵌套将网页中的所有 HTML 转换为树。打开 Firebug 并查看 HTML 结构。这就是我说的那棵树。
If you want to change any HTML you can interact with the DOM API in order to do so.
如果您想更改任何 HTML，您可以与 DOM API 进行交互。
<html>
<head><script src="file.js"></script></head>
<body>blah</body>
</html>
In file.jsI can reference the body using:
在file.js我可以使用以下方法引用身体：
onload = function() {
document.getElementsByTagName('body')[0].style.display='none';
}
The getElementsByTagNameis a method of the documentobject. I am manipulating the bodyelement, which is a DOM element. If I wanted to traverse and find say, a span I can do this:
的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] )
}
}
}
I am traversing the nodeList given back by getElementsByTagName in the snippet above, and looking for a span based on the nodeNameproperty.
我正在遍历上面代码段中 getElementsByTagName 返回的 nodeList ，并根据nodeName属性查找跨度。
回答by Oded
It means working with the Document Object Model, which is an API to work with XML like documents.
这意味着使用Document Object Model，这是一个 API，用于处理类似 XML 的文档。
From w3 on the DOM:
从DOM上的 w3 ：
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.
文档对象模型是一个与平台和语言无关的界面，它将允许程序和脚本动态访问和更新文档的内容、结构和样式。可以进一步处理该文档，并且可以将该处理的结果合并回所呈现的页面。这是 W3C 和网络上与 DOM 相关的材料的概述。
One of the functions mostly used in DOM work is:
DOM 工作中最常用的功能之一是：
getElementById
Manipulating/Changing the DOM means using this API to change the document (add elements, remove elements, move elements around etc...).
操作/更改 DOM 意味着使用此 API 来更改文档（添加元素、删除元素、移动元素等......）。
Traversing the DOM means navigating it - selecting specific elements, iterating over groups of elements etc...
遍历 DOM 意味着导航它 - 选择特定元素，迭代元素组等......
回答by J?rgen Vosk
In short:
简而言之：
When a web page is loaded, the browser creates a Document Object Modelof the page, which is an object oriented representationof an HTML document, that acts as an interfacebetween JavaScript and the document itself and allowsthe creation of dynamicweb pages.
加载网页时，浏览器会创建页面的文档对象模型，该模型是HTML 文档的面向对象表示，充当JavaScript 和文档本身之间的接口，并允许创建动态网页。
Source: w3schools - HTML DOM
回答by Gabriel McAdams
Document
document
Object
Øbject
Model
中号奥德尔
This is the DOM. Either an XML, or HTML, or similar document. All of those terms mean to parse the document and/or make changes to it (usually by using some available tools like JavaScript or C#).
这是DOM。XML、HTML 或类似的文档。所有这些术语都意味着解析文档和/或对其进行更改（通常通过使用一些可用的工具，如 JavaScript 或 C#）。
The best example of a DOM when people use those terms is the HTML document in a browser. You might want to manipulate the DOM in this case to add something to the web page.
当人们使用这些术语时，DOM 的最佳示例是浏览器中的 HTML 文档。在这种情况下，您可能想要操作 DOM 以向网页添加一些内容。
