zoukankan      html  css  js  c++  java
  • DOM Nodes

     


    1. An idea of DOM
      1. Another document
    2. Walking DOM using Developer Tools
    3. Whitespace nodes
    4. Other node types
      1. DOCTYPE
      2. Comments
    5. Summary

    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:

    1. Open simpledom2.html
    2. Open Firebug, the Chrome & IE built in developer tools or any other developer tool
    3. Go HTML tab in Firebug & IE devtools or Elements tab in Safari/Chrome or.. whatever.
    4. 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.

  • 相关阅读:
    mysql update与select结合修改表数据
    编译与安装 OpenSSL
    MQTT的学习之Mosquitto安装&使用(1)
    Spring Cloud构建微服务架构(三)消息总线
    Spring Cloud构建微服务架构(一)服务注册与发现
    Spring Cloud构建微服务架构(二)分布式配置中心
    【行为型模式】《大话设计模式》——读后感 (16)加薪非要老板批?——职责链模式
    【行为型模式】《大话设计模式》——读后感 (15)烤羊肉串引来的思考?——命令模式
    【结构型模式】《大话设计模式》——读后感 (14)分公司=一部门?——组合模式
    【结构型模式】《大话设计模式》——读后感 (13)手机软件何时能统一?——桥接模式
  • 原文地址:https://www.cnblogs.com/hephec/p/4575794.html
Copyright © 2011-2022 走看看