DOM Nodes

最新推荐文章于 2023-05-13 18:14:09 发布

weixin_30237281

最新推荐文章于 2023-05-13 18:14:09 发布

阅读量199

点赞数

文章标签：开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/hephec/p/4575794.html

版权

本文深入探讨了文档对象模型（DOM）的基本概念，包括DOM如何将文档表示为树状结构，以及如何通过JavaScript操作DOM节点。文章还详细介绍了DOM中的不同类型节点，如元素节点、文本节点、注释节点等，并展示了如何使用开发者工具遍历DOM。同时，文章讨论了空白节点的存在及其在DOM树中的作用，以及不同浏览器对空白节点的不同处理方式。此外，还涉及了文档类型声明（DOCTYPE）、HTML注释等内容，并总结了DOM结构及包含的节点类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The DOM represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many children nodes.

An idea of DOM

Let’s consider the following HTML as the starting point:

 
       1<html>
 
       2  <head>
 
       3    <title>The title</title>
 
       4  </head>
 
       5  <body>
 
       6     The body
 
       7   </body>
 
       8</html>

The DOM will look like that:

At the top level, there is an html node, with two children: head and body, among which only head has a child tag title.

HTML tags are element nodes in DOM tree, pieces of text become text nodes. Both of them are nodes, just the type is different.

•The idea of DOM is that every node is an object. We can get a node and change its properties, like this:

`1`	`// change background of the <BODY> element, make all red`

`2`	`document.body.style.backgroundColor =` `'red';`

If you have run the example above, here is the code to reset the style to default:

`1`	`// revert background of <BODY> to default, put it back`

`2`	`document.body.style.backgroundColor =` `'';`

•It is also possible to change the contents of nodes, search the DOM for certain nodes, create new elements and insert them into the document on-the-fly.

But first of all we need to know what DOM looks like and what it contains.

Another document

Let’s see the DOM of a more complicated document.

 
       01<!DOCTYPE HTML>
 
       02<html>
 
       03    <head>
 
       04        <title>The document</title>
 
       05    </head>
 
       06    <body>
 
       07        <div>Data</div>
 
       08        <ul>
 
       09            <li>Warning</li>
 
       10            <li></li>
 
       11        </ul>
 
       12        <div>Top Secret!</div>
 
       13    </body>
 
       14</html>

And here is the DOM if we represent it as a tree.

Walking DOM using Developer Tools

It is quite easy to walk DOM using a browser developer tool.
For example:

Open simpledom2.html
Open Firebug, the Chrome & IE built in developer tools or any other developer tool
Go HTML tab in Firebug & IE devtools or Elements tab in Safari/Chrome or.. whatever.
Here you are.

Below is a screenshot from Firebug for the document above. Basically it’s layout is same as HTML, plus the minus icon [-] for nodes.

The DOM displayed in developer tools is not complete. There are elements, which exist in DOM, that are not shown in developer tools.

Whitespace nodes

Now let’s make the picture closer to reality and introduce whitespace text elements. Whitespace symbols in the HTML are recognized as the text and become text nodes. These whitespace nodes are not shown in developer tools, but they do exist.

The following picture shows text nodes containing whitespaces.

By the way, note that last li does not have a whitespace text tag inside. That’s exactly because there is no text at all inside it.

Whitespace nodes are created from spaces between nodes. So they disappear if we elimitate the space between tags.

The example below has no whitespace nodes at all.

<!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html>

IE<9

Versions of IE lower than 9 differ from other browsers because they do not generate tags from whitespaces. This was corrected in IE 9 as it complies with standards.

But in older IEs, the DOM tree is different from other browsers because of this.

Other node types

DOCTYPE

Did you notice a DOCTYPE from the example above? That is not shown on the picture, but DOCTYPE is a DOM node too, located at the topmost level to the left from HTML.

DocType is part of the HTML specification and it is an instruction to the web browser about what version of the markup language the page is written in.

Comments

Also, a HTML comment is a DOM node too:

 
       1<html>
 
       2...
 
       3<!-- comment -->
 
       4...
 
       5</html>

The comment above is also stored in DOM tree, with comment node type and textual content. It is important when traversing nodes as we’ll see.

Summary

Now you should have understanding of DOM structure, how it looks like, which nodes it includes.

The next chapter describes how to traverse it using JavaScript.

转载于:https://www.cnblogs.com/hephec/p/4575794.html