JavaScript Document Selector

Within a HTML document you can have many different elements with id’s and class names. JavaScript can be used to add functionality to each element that is within a html document. However, within JavaScript you first have to access the elements in the document. There are many ways to access elements within a document.

The below code shows the body of a html document with three element. First there is a paragraph element, then a div element with the id of ‘myDiv’ and finally a span with the class name ‘mySpan’. Remember, within a html document an id must be unique and classnames don’t have to be unique. This means that many elements can share the same classname but only one element can have a unique id. This means that every element can have their own id, but they all must be unique.

  <div id="myDiv"></div>
  <span class="mySpan"></span>

The document object can be used in JavaScript to get the elements within a html document. There are three methods that are used to select elements in JavaScript. The first method is to get elements by the tag name, this refers to name of the tag in the html document. This method will return a list, as there can be multiple elements in html that share the same tag name. We could have multiple paragraphs in html. The second line of code then gets the first element in that array or paragraph elements returned, which will be the only paragraph element in our document. It then changes the ‘innerText’ of the element, the ‘innerText’ field does not parse html. This means, even though the value we are setting contains a ‘i’ tag it will not be rendered in the html document it will just be the written as text in the document. This text will then be put inside the paragraph element.

var p = document.getElementsByTagName("p");
p[0].innerText = "<i>Hello World</i>";

The next way we can access elements is by getting it by the id. Id’s must be unique, so this will only return one element. The ‘innerHTML’ field is used to set html inside the element. The html in the value will be rendered, so the ‘strong’ tag will be rendered as the ‘innerHTML’ is used rather than the ‘innerText’. This means the ‘Hello World’ will be displayed in the div as it will be bold, as the ‘strong’ tag makes text bold.

var div = document.getElementById("myDiv");
div.innerHTML = "<strong>Hello World</strong>";

The final way to grab elements from a html document is to get it by the classname. This will also return a array, as multiple elements can share classnames. The innerText is also used, which means any html will not be rendered and will be displayed as normal text.

var span = document.getElementsByClassName("span");
span[0].innerText = "This is my span";

The three functions used to grab elements in html document can be used to get elements by the tagname, the id, or the classname. Dependent on which function used either a single element will be returned or a list of elements will be returned. The ‘innerHTML’ method can be used to render html within elements, such as make text bold. The ‘innerText’ method can also be used to set text of an element but will not render html tags, so it will be show the text value of tags instead of the rendered html.

Leave a Reply