Importance of validating HTML
If the elements are nested improperly, problems can be generated, see the following line: <p> These elements have been incorrectly </p> nested The resulting tree is incorrectly nested at all, therefore it will generate unexpected errors in the browsers. By keeping your HTML valid you can avoid such problems. According to abbreviationfinder, HTML stands for HyperText Markup Language.
Accessing the elements
Fortunately, Javascript allows you to access each of the elements of a page using only a few methods and properties. If you want to find an element quickly and easily, the getElementById method is at hand. It allows immediate access to any element just knowing the value of its id attribute. See the following example:
<p>
<a id=”contact” href=”contacts.html”> Contact us </a> </p>
The id attribute of element a can be used to access it: var contactElement = document.getElementById (“contact”); Now the value of the variable elementContact is referred to the element [a] and any operation on it will affect the hyperlink. The getElementById method is suitable for operating on a specific element, however, sometimes you need to work on a group of elements, so in this case the getElementsByTagName method can be used. This returns all the elements of the same type. Assuming the following unordered list:
- <a href=”editorial.html”> Editorial </a>
- <a href=”semblanza.html”> Authors </a>
- <a href=”news.html”> News </a>
- <a href=”contacts.html”> Contact us </a>
All hyperlinks can be obtained as follows: var hyperlinks = document.getElementsByTagName (“a”); The value of the hyperlinks variable is a collection of elements [a]. The collections are arrangements and each element can be accessed through the well-known notation with square brackets.
The elements returned by getElementsByTagName will be ordered according to the order that they appear in the source code. Therefore, for the previous case it would look like this: · hyperlinks [0] the element [a] for “Editorial” · hyperlinks the element [a] for “Authors” · hyperlinks [2] the element [a] for “News ”· Hyperlinks [3] the element [a] for“ Contact us ”
Another way to access an element using its id is document.all [“id”] which was introduced in Internet Explorer 4 and document.layers [“id”] introduced by Netscape 5 because the W3C had not yet standardized the way. to access the elements through their id. However, its use is not recommended because, as it is outside the current standards, there are browsers that do not support these methods.
On the other hand, there are several elements in an HTML document that can be accessed in other ways. The body element of a document can be accessed through the document.body form, while the set of all forms in a document can be found in document.forms, likewise the set of all images would be through document.images. Currently most browsers support these methods, yet it is recommended to use the getElementsByTagName method, see the following example to access the body element:
var body = document.getElementsByTagName (“body”) [0];
Creating elements and texts
The creation of nodes is possible by using two methods available in the document object. These methods are:
- CreateElement (String type): Creates a new element of the specified type and returns a reference to that element. · CreateTextNode (Text string): Creates a new text node with the content specified in the text string.
The following example shows how to create a new empty paragraph element: var newLink = document.createElement (“a”); The newLink variable now references a new link ready to be inserted into the document. The text that goes inside the [a] element is a child text node, so it must be created separately. var textnode = document.createTextNode (“Profile”); Then if you want to modify the existing text node, you can use the nodeValue property, this allows you to take and put the text node: var textOld = nodeText.nodeValue; NodeTexto.nodeValue = “What’s New”;
The value of the variable OldText is now “Profile” and the new text “News”. An element or text (node) can be inserted as the last child of an existing node using the appendChild method. This method places the new node after all children of the node. NewLink.appendChild (textnode);
Now all that is needed is to insert the link into the body of the document. To do this, a reference to the body element of the document is needed, taking the following standards as a guide:
var bodyRef = document.getElementsByTagName (“body”) [0];
bodyRef.appendChild (newLink);
Another way would be using the getElementById method. To do this, it is assumed that the <body> tag has a value assigned for the id attribute.
<body id = ”body”> var bodyRef = document.getElementById (“body”);
bodyRef.appendChild (newLink);
There are basically three ways in which a new text element or node can be inserted into a web page. All this depends on the point at which you want to insert the new node: as the last child of an element, before another node or replacement for a node.
The case of opening a new child was already seen in the previous example, then to insert the node before another node is done using the insertBefore method of its parent element, while the node replacement is used the replaceChild method of its element dad.
When using insertBefore, you need to have references to the node to be inserted and where it is to be inserted, consider the following HTML code:
<p id = “mwEnlaces”>
<a id=”editor” href=”editorial.html”> Editorial </a> </p>
Then the new link will be inserted before the existing link by calling the insertBefore method from the parent node (paragraph):
var anchorText = document.createTextNode (“Current”);
var newAnchor = document.createElement (“a”); newAnchor.appendChild (anchorText); var existingAnchor = document.getElementById (“editor”); var parent = anchorExisting.parentNode; var newChild = parent.insertBefore (newAnchor, existingAnchor); If a translation from the DOM to HTML were made after this operation, the result would be the following: <p id = “mwEnlaces”> <a> Actualidad </a> <a id=”editor” href=”editorial.html”> Publisher </a> </p> In the case of replacing the link using replaceChild: var newChild = parent.replaceChild (newAnchor, existingAnchor); The DOM will look like this: <p id = “mwEnlaces”> <a> News </a> </p>
