Tutorial: Javascript Dom Methods
Tags: javascript, programming, codenewbie, webdev
Published: 2022-01-19 08:08:16

---
title: Tutorial: Javascript Dom Methods
published: True
date: 2021-01-10 01:16:04 UTC
tags: ["JavaScript", "Programming",'codenewbie','webdev']
canonical_url: https://www.devwares.com/blog//javascript-html-dom-methods
---

## JavaScript - HTML DOM Methods

The DOM methods in HTML are actions that you can take (on HTML Elements). The values (of HTML Elements) that you can set or update are known as HTML DOM properties.


**The DOM Programming Interface**

JavaScript may access the HTML Document Object Model (DOM) (and with other programming languages). All HTML elements are defined as objects in the DOM. Each object's properties and methods make up the programming interface. A property is a value that may be obtained or changed (like changing the content of an HTML element). A method is an action that you can carry out (like add or deleting an HTML element). The following code changes the content (the innerHTML) of the `<p>` element with id="demo":

**JavaScript Code:**

```javascript
<html>
  <body>
    <p id="demo"></p>
    <script>document.getElementById("demo").innerHTML = "Hello World!";</script>
  </body>
</html>

```

In the code above, getElementById is a method, while innerHTML is a property.

**The getElementById Method**

The most frequent method of accessing an HTML element is to use the element's id. The getElementById method in the code above used id="demo" to locate the element.

**The innerHTML Property**

The innerHTML property is the simplest way to access the content of an element. The innerHTML property can be used to access or replace HTML element content. Any HTML element, including `<html>`and `<body>`, can be retrieved or changed using the innerHTML property.

**JavaScript HTML DOM Document**

All other objects on your web page are owned by the HTML DOM document object. Your web page is represented by the document object. When you wish to get to any element on an HTML page, you must first get to the document object. Here are some examples of how you can read and alter HTML using the document object.

**Finding HTML Elements**

| Method | Description |
| --- | --- |
| document.getElementById(id) | Find an element by element id |
| ------------------------------- | ---------------- |
| document.getElementsByTagName(name) | Find elements by tag name |
| ------------------------------- | ---------------- |
| document.getElementsByClassName(name) | Find elements by class name |

**Changing HTML Elements**

| Property | Description |
| --- | --- |
| element.innerHTML = new html content | Change the inner HTML of an element |
| ------------------------------- | ---------------- |
| element.attribute = new value Change | the attribute value of an HTML element |
| ------------------------------- | ---------------- |
| element.style.property = new style | Change the style of an HTML element |

| Method | Description |
| --- | --- |
| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |

**Adding and Deleting Elements**

| Method Description |
| --- |
| document.createElement(element) |
| ------------------------------- |
| document.removeChild(element) |
| ------------------------------- |
| document.appendChild(element) |
| ------------------------------- |
| document.replaceChild(new, old) |
| ------------------------------- |
| document.write(text) |

**JavaScript HTML DOM Elements:** This page explains how to locate and use HTML components in an HTML document.

JavaScript is frequently used to manipulate HTML elements.

To accomplish so, you must first locate the elements. There are numerous options for doing so:

- Identifying HTML elements based on their id
- Identifying HTML elements by their tag names
- Locating HTML elements based on their class names
- CSS selectors for locating HTML elements
- Using HTML object collections to find HTML elements
- Locating an HTML Element based on its Id

The element id is the simplest way to locate an HTML element in the DOM. This code locates the element with the id="intro" attribute:

**JavaScript Code:**

```javascript
var myElement = document.getElementById('intro');

```

The method will return the element as an object if the element is discovered (in myElement).MyElement will contain null if the element is not found.

**Finding HTML Elements by Tag Name:** All `<p>` elements are found using this code

**JavaScript Code:**

```javascript
var x = document.getElementsByTagName('p');

```

This code locates the element with the id="main" and then all `<p>` elements within it:

**JavaScript Code:**

```javascript
var x = document.getElementById('main');
var y = x.getElementsByTagName('p');

```

**Finding HTML Elements by Class Name:** Use getElementsByClassName to locate all HTML elements with the same class name (). This code generates a list of all elements that have the class="intro" attribute.

**JavaScript Code:**

```javascript
var x = document.getElementsByClassName('intro');

```

In Internet Explorer 8 and previous versions, searching for elements by class name does not work.

**Finding HTML Elements by CSS Selectors:** Use the querySelectorAll() method to locate all HTML elements that match a specific CSS selector (id, class names, types, attributes, attribute values, and so on). This code generates a list of all `<p>` elements that have the class="intro" attribute..

**JavaScript Code:**

```javascript
var x = document.querySelectorAll('p.intro');

```

In Internet Explorer 8 and previous versions, the querySelectorAll() method does not operate. HTML Elements Can Be Found Using HTML Object Collections This example searches the forms collection for the form element with the id="frm1" and displays all of its values:

**JavaScript Code:**

```javascript
var x = document.forms['frm1'];
var text = '';
var i;
for (i = 0; i < x.length; i++) {
  text += x.elements[i].value + '<br>';
}
document.getElementById('demo').innerHTML = text;

```

[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

## Resources

You may find the following resources useful:

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [Tutorial: Javascript Variables](https://www.devwares.com/ blog/javascript-variables)
- [Tutorial: Javascript This Keyword](https://www.devwares.com/ blog/javascript-this-keyword)
- [Tutorial: Javascript Operator](https://www.devwares.com/ blog/javascript-operator)
- [Tutorial: Javascript Scope](https://www.devwares.com/ blog/javascript-scope)
- [Installation](https://www.devwares.com/docs/contrast/angular/Installation/)
- [Accordion](https://www.devwares.com/docs/contrast/angular/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/angular/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/angular/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/angular/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/angular/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/angular/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/angular/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/angular/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/angular/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/angular/components/buttons/)
- [Checkbox](https://www.devwares.com/docs/contrast/angular/components/checkbox/)
- [Card](https://www.devwares.com/docs/contrast/angular/components/card/)
- [Collapse](https://www.devwares.com/docs/contrast/angular/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/angular/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/angular/components/footer/)
- [InputGroup](https://www.devwares.com/docs/contrast/angular/components/inputgroup/)
- [Iframe](https://www.devwares.com/docs/contrast/angular/components/iframe/)
- [Modal](https://www.devwares.com/docs/contrast/angular/components/modal/)
- [Mask](https://www.devwares.com/docs/contrast/angular/components/mask/)
- [Multiselect](https://www.devwares.com/docs/contrast/angular/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/angular/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/angular/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/angular/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/angular/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/angular/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/angular/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/angular/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/angular/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/angular/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/angular/components/spinner/)
- [Switch](https://www.devwares.com/docs/contrast/angular/components/switch/)
- [Stepper](https://www.devwares.com/docs/contrast/angular/components/stepper/)
- [Icon](https://www.devwares.com/docs/contrast/angular/components/icon/)
- [Input](https://www.devwares.com/docs/contrast/angular/components/input/)
- [ListGroup](https://www.devwares.com/docs/contrast/angular/components/listgroup/)
- [Forms](https://www.devwares.com/docs/contrast/angular/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/angular/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/angular/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/angular/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/angular/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/angular/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/angular/table/datatables/)
- [Editable Table](https://www.devwares.com/docs/contrast/angular/table/editabletable/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/angular/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/angular/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/angular/widgets/)