JS manipulating DOM element properties and methods

1. DOM element properties for working with XML documents

Property name Description

ChildNodes returns an array of all child elements of the current element

FirstChild returns the first subordinate child element of the current element

LastChild returns the last child element of the current element

Nextsbling returns the element immediately following the current element

NODEVALUE Specifies read-write properties that represent the value of an element

ParentNode returns the parent node of the element

PreviousSibling returns the element immediately preceding the current element

2. Dom element methods for traversing XML documents

Method Name Description

getElementById gets the element in the document that specifies the unique ID property value.

Getelementbytagname (name) returns an array of child elements of the specified tag name in the current element

HasChildNodes () returns a Boolean value only if the element has child elements

GetAttribute (name) returns the attribute value of the element, which is specified by name

3. Dynamic creation of content is the use of the information of the DOM properties and methods

Property \ Method Description

The CreateElement method on the document.createelement (tagName) Document object can create an element that is specified by the tagName. If a string div is used as a method parameter, a DIV element is generated

The createTextNode method of the document.createTextNode (text) Document object creates a node that contains static text
The <element>.appendchild (Childnode) AppendChild method adds the specified node to the list of child nodes of the current element (as a new child node). For example, you can add an option element as a child node of a SELECT element

<element>.getattrobute (name)

<element>.setattribute (Name,value) These methods get and set the value of the name attribute in the element, respectively

<element>.insertbefore (Newnode,targetnode) inserts the node NewNode as a child of the current element before the TargetNode element

<element>.removeattribute (Name) This method removes the attribute from the element

<element>.removechild (Childnode) This method removes the child element from the element Childnode

<element>.replacechild (NewNode, OldNode) This method replaces the node OldNode with the node NewNode

<element>.haschildnodes () This method returns a Boolean value indicating whether the element has child elements

document--the topmost node, all other nodes are attached to it.

DOCUMENTTYPE--DTD references (using <! doctype> syntax) object representation, which cannot contain child nodes.

documentfragment--can save other nodes like document.

element--represents the content between the start and end tags, such as <tag></tab> or <tag/>. This is the only node type that can contain both attributes and child nodes.

attr--represents a pair of attribute names and attribute values. This node type cannot contain child nodes.

text--represents the normal text contained within an XML document between the start and end tags, or cdatasection. This node type cannot contain child nodes.

cdatasection--<! The object representation of the [cdata[]]>. This node type can contain only text nodes, text, as child nodes.

entity--represents an entity definition in the DTD, such as <! ENTITY foo "foo" >. This node type cannot contain child nodes.

entityreference--represents an entity reference, such as &quot;. This node type cannot contain child nodes.

processinginstruction--represents a pi. This node type cannot contain child nodes.

comment--represents an XML comment. This node cannot contain child nodes.

The notation--represents the tokens defined in the DTD. This is seldom used.

The node interface defines the attributes and methods that are contained by all node types.
Attribute/method Type/return type description

NodeName the name of a String node, as defined by the type of the node
NodeValue the value of a String node, as defined by the type of the node
NodeType one of the type constant values of the number node
Ownerdocument document points to the documentation that this node belongs to
FirstChild node points to the first nodes in the ChildNodes list
LastChild node points to the last point in the ChildNodes list
ChildNodes NodeList List of all child nodes
PreviousSibling node points to the previous sibling; If the node is the first sibling node, the value is null
NextSibling node points to the latter sibling; if the node is the last sibling node, the value is null
HasChildNodes () Boolean returns True when ChildNodes contains one or more nodes
Attributes NamedNodeMap contains attr objects that represent the attributes of an element; only for ELEMENT nodes
AppendChild (node) node adds node to the end of ChildNodes
RemoveChild (node) node removes node from childnodes
ReplaceChild (Newnode,oldnode) Node replaces OldNode in childnodes with NewNode
InsertBefore (Newnode,refnode) Node inserts newnodd before refnode in ChildNodes

In addition to nodes, the DOM defines helper objects that can be used with nodes, but not necessarily part of a DOM document.
An array of nodelist--nodes, indexed by value, used to represent and sub-nodes of an element.
namednodemap--a node table that is indexed with both numeric and name, and is used to represent element attributes.

2. Accessing the relevant nodes
The following HTML pages are considered in the following sections

12 3 <title>dom example</title>
4 5 <body>
6 <p>hello world!</p>
7 <p>isn ' t this exciting?</p>
8 <p>you ' re learning to use the dom!</p>
9 </body>
10
To access the var ohtml = document.documentelement;
The variable ohtml now contains a HtmlElement object that represents var ohead = Ohtml.firstchild;
var obody = Ohtml.lastchild;
You can also use the ChildNodes feature to do the same work. Just use it as a normal JavaScript array, using square brackets to mark it:
var ohead = ohtml.childnodes[0];
var obody = ohtml.childnodes[1];
Note the square bracket notation is actually a simple implementation of nodelist in JavaScript. The actual way to get a child node from the ChildNodes list is actually to use the item () Method:
var ohead = oHtml.childNodes.item (0);
var obody = OHtml.childNodes.item (1);

The HTML Dom page defines document.body as a pointer to the <body/> element.
var obody = ducument.body;
With the three variables ohtml,ohead and obody, you can try to determine the relationship between them:
alert (ohead.parentnode==ohtml);
alert (obody.parentnode==ohtml);
alert (Obody.previoussibling==ohead);
alert (bhead.nextsibling==obody);
alert (ohead.ownerdocument==document);
All of the above are outputs "true".

3. Handling Features
As mentioned earlier, even if the node interface already has the attributes method and has been inherited by all types of nodes, however, only
ELEMENT nodes can have attributes. The Attributes property of the element node is actually Namenodemap, which provides some way to access and manipulate its contents:
getNamedItem (name)--Returns the node with the NodeName attribute value equal to name;
RemoveNamedItem (name)--Delete the node with the NodeName attribute value equal to name;
SetNamedItem (node)--adds node to the list, indexed by its NodeName property;
Item (POS)--like nodelist, returns the node at position POS;
Note: Keep in mind that these methods return a attr node, not an attribute value.

The NamedNodeMap object also has a length property to indicate the number of nodes it contains.
When NamedNodeMap is used to represent attributes, where each node is a attr node, the NodeName property is set to the attribute name, and the NodeValue property is set to the value of the attribute. For example, suppose you have such an element:
<p style= "color:red" id= "P1" >hello world!</p>
Also, suppose the variable op contains a reference to this element. You can then access the value of the id attribute:
var sId = OP.attributes.getNamedItem ("id"). nodevalue;
Of course, the id attribute can also be accessed numerically, but this is slightly less intuitive:
var sId = OP.attributes.item (1). NodeValue;
You can also change the id attribute by assigning a new value to the NodeValue property:
OP.attributes.getNamedItem ("id"). nodevalue= "NewId";
The attr node also has a Value property that is exactly equivalent to (and is also fully synchronized with) the NodeValue property, and has the Name property and the NodeName property kept synchronized. We are free to use these properties to modify or change the attributes.
Because this method is a bit cumbersome, the DOM also defines three element methods to help access the features:
GetAttribute (name)--equals Attributes.getnameditem (name). value;
SetAttribute (Name,newvalue)--equals Attribute.getnameditem (name). Value=newvalue;
RemoveAttribute (name)--equals Attribute.removenameditem (name).

4. Accessing the specified node
(1) getElementsByTagName ()
The core (XML) DOM defines the getElementsByTagName () method, which returns a NodeList that contains all the elements of the TagName (signature) attribute equal to a specified value. In the Element object, the TagName attribute is always equal to the name that is immediately followed by the less than sign-for example, the tagname of is "img". The next line of code returns a list of all elements in the document:
var Oimgs = document.getelementsbytagname ("img");
After you save all the graphics in Oimgs, simply use the square brackets or the item () method (getElementsByTagName () to return a childnodes-like nodelist), you can access the nodes as you would the child nodes:
alert (oimgs[0].tagname); Outputs "IMG"
If you just want to get all the images in the first paragraph of a page, you can do so by calling getElementsByTagName () on the first paragraph element, like this:
var oPs = document.getelementbytagname ("P");
var oimgsinp = ops[0].getelementbytagname ("img");
You can use an asterisk method to get all the elements in the document:
var oallelements = document.getElementsByTagName ("*");
When the argument is an asterisk, IE6.0 does not return all the elements. You must use document.all to replace it.
(2) Getelementsbyname ()
The HTML DOM defines the Getelementsbyname (), which is used to get all elements that have the name attribute equal to the specified value.
(3) getElementById ()
This is the second method defined by the HTML DOM, which returns an element with an id attribute equal to the specified value. In HTML, the id attribute is unique-meaning that no two elements can share the same ID. This is undoubtedly the quickest way to get a single specified element from the document tree.
Note: If the given ID matches the name attribute of an element, IE6.0 also returns this element. This is a bug and a problem that must be taken very carefully.

JS manipulating DOM element properties and methods