HTML Dom node additions and deletions

In the previous blog, we have preliminary contact with the DOM Foundation, but we are learning to be better to use, today we will look at the DOM node additions and deletions to check.

No matter where we want to operate a thing, we should always get it first. So how do we get it?

Every component of HTML can be viewed as a node (document node, element node, text node, attribute node, gaze node). , the attribute node belongs to the element node).

the provides a convenient and simple method and properties for locating nodes so that we can operate the nodes at high speed.

the following were:getElementById (),getElementsByTagName (),Getelementsbyname (),getattribute (),SetAttribute ()and theremoveattribute ().

1.getElementById () Method

getElementById () method, accept a parameter: Gets the element's ID . Assuming that the corresponding element is found, return the

Elements of htmldivelement object, assuming it does not exist, returns NULL .

document.getElementById (' box ');              Gets the element node with the ID of box

Ps:IDrepresents the uniqueness of an element node, and it is not possible to create the same named one for two or more element nodes at the same timeID. When we passgetElementById ()gets the node to a specific element. This node object is acquired by us, and through this node object. We are able to access a series of properties of it.

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvz2fpymlhbja4mjm=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center ">

2.getElementsByTagName () Method

getElementsByTagName () method will return an array of objects htmlcollection (NodeList) , this array holds the list of nodes with all the same element names.

document.getElementsByTagName (' * ');              Get all elements

whether it isgetElementByIdor isgetElementsByTagName, not all browsers must differentiate between uppercase and lowercase, in order to prevent unnecessary errors and hassles, when passing parameters. We must insist on the habit of distinguishing between uppercase and lowercase.

3.getElementsByName () Method

Getelementsbyname () method to get the same name (name) the element. Returns an array of objects htmlcollection (NodeList).

   Document.getelementsbyname (' Add ')   //Gets the INPUT element document.getelementsbyname (' add ') [0].value     //Gets the INPUT element's Value Document.getelementsbyname (' Add ') [0].checked//gets the checked value of the INPUT element

4.getAttribute () Method

getattribute () method Gets the value of an attribute in the element. It and direct use . property gets the value of the property by means of the

A certain difference.

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >document.getelementbyid (' box '). getattribute (' id ');//Gets the ID value of the element document.getElementById (' box '). id;//gets the ID of the element Value document.getElementById (' box '). getattribute (' mydiv ');//Gets the element's own defined attribute value </span>

5.setAttribute ()Method

SetAttribute () method sets an attribute and value in the element. It needs to accept two parameters: attribute name and value.

If the property itself already exists, it will be overwritten.

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >document.getelementbyid (' box '). SetAttribute (' Align ', ' center ');//Set properties and Values document.getElementById (' box '). SetAttribute (' BBB ', ' CCC ');//Set your own defined properties and values </span>

6.removeAttribute ()Method

removeattribute () ability to remove HTML property.

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >document.getelementbyid (' box '). RemoveAttribute (' style ');//Remove Attributes </span>

three. DOM node

1.node Node Properties

nodes can be divided into element nodes, attribute nodes, and text nodes. These nodes have three useful properties:nodeName,nodeType , and nodevalue, respectively.

2. Hierarchy Node Properties

The hierarchy of nodes can be divided into two kinds: parent node and child node, sibling node. When we get one of the element nodes, we are able to use the Hierarchy node property to get the nodes of its related hierarchy.

Four. Node Operations

DOM Not only can you find nodes, but you can also create nodes, copy nodes, insert nodes, delete nodes, and replace nodes.

All of these methods can be linked together. In this way we can weave a large knowledge network, of course, only know is not enough, we should use more, find more contact. More to summarize.

HTML Dom node additions and deletions