DOM Basics Tutorial: Using DOM_Basic Knowledge

After understanding the framework and nodes of DOM (Text Object Model), the most important thing is to use these nodes to process html web pages

For a DOM node node, there are a series of properties and methods that can be used. Commonly used ones include the following table.

Perfect: http://www.w3school.com.cn/xmldom/dom_element.asp

1. Access node

BOM provides some boundary methods to access nodes, the commonly used ones are getElementsByTagName(), and getElementById()

Copy code The code is as follows:

Client Language

• HTML


• JavaScript


• CSS

Server side language

• ASP.NET


• JSP


• PHP

document.getElementById()

Copy code The code is as follows:

PHP

Copy code The code is as follows:

//id gets className

2. Detect node type

The type of node can be detected through the nodeType. This parameter returns 12 integer values.

Expression format such as document.nodeType

What is really useful are the three types of model nodes mentioned in the DOM (1) model

Element nodes, text nodes and attribute nodes

1. The return value of element node is 1

2. The attribute node return value is 2

3. The text node text node returns a value of 3

Copy code The code is as follows:

CSS

Return: nodeType: 1

This means that certain nodes can be processed individually, which is very practical when searching for nodes. Will talk about it later.

3. Use the relationship between father, son and brother to find nodes

When accessing the node in the first section, use the childNodes attribute of the node to access the text node contained in the element node.

This section uses the parent-child-brother relationship of nodes to find nodes

*Use the hasChildNodes and childNodes attributes to get all the nodes contained in this node

Copy code The code is as follows:

• Sweet and Sour Pork Ribs


• Round Steamed Pork with Vermicelli


• Kimchi Fish


• Chestnut roasted chicken


• Ma Po Tofu

4.DOM gets the parent node of the node

Copy code The code is as follows:

• Sweet and Sour Pork Ribs


• Round Steamed Pork with Vermicelli


• Kimchi Fish


• chestnut roasted chicken


• Ma Po Tofu

//return ul

Using the parent node, the parent node of the specified node was successfully obtained

5. Use parentNode attribute

Copy code The code is as follows:

• Sweet and Sour Pork Ribs


• Round Steamed Pork with Vermicelli


• Kimchi Fish


• chestnut roasted chicken


• Ma Po Tofu

//Output
//tageName:DIV
claaName:colorful
typeOf:object

Starting from a child node, search the parent node upwards until the node’s class name is "colorful"

6.dom’s brotherly relationship

Copy code The code is as follows:

• Sweet and Sour Pork Ribs


• Round Steamed Pork with Vermicelli


• Kimchi Fish


• chestnut roasted chicken


• Ma Po Tofu

                                                                                                                                                                                                                                                                       

Using nextsibling and previousSibling attributes to access sibling nodes looks good.

But only applicable to IE browser

In order to have good compatibility when using the code, nodeType must be used for judgment

Compatibility processing is as follows:

Copy code The code is as follows:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

7. Set node attributes

Copy code

The code is as follows:

        window.onload = function(){

// Get the picture           var imgDataBe = document.getElementsByTagName("img")[0];
//Get the title attribute of the image
              imgDataBe.setAttribute("src","02.gif");
             imgDataBe.setAttribute("title","人情波");
             document.write(imgDataBe.getAttribute("title"));
              document.write(imgDataBe.getAttribute("alt"));
              document.write(imgDataBe.getAttribute("node-data"));
             document.write(imgDataBe.getAttribute("node_data"));
}

Set node attributes using the setAttribute() method

Copy code The code is as follows:

                                                                                                              
         

Copy code

The code is as follows:                                                                                                                         

               window.onload = function() {

         var oP = document.createElement("p");
​​​​ var oText = document.createTextNode("Use dom to create a node");
        var oText1 = document.createTextNode("Use dom to create node 123");
oP.appendChild(oText);
oP.appendChild(oText1);
           document.body.appendChild(oP);
            }
                                                                                         

There is a P here, test createElement()

9.removeChild removes the node

Copy code

The code is as follows: