DOM (Document Object Model)

DOM, short for Document Object Model, is a programming interface for web documents. In other words, it's a structured representation of HTML and XML documents, providing a way for programming languages to interact with the structure or content of a web page. It treats an HTML, XHTML, or XML document as a tree structure where each node is an object, representing a part of the document.

React JS treats the real DOM as an expensive resource and has a unique approach to minimize its use - it creates a 'Virtual DOM', a lightweight copy of the actual DOM. It makes all the changes in the Virtual DOM first, compares it with the real DOM, and when it knows exactly which parts of the real DOM need to be changed (in a process called "diffing"), it updates only those parts in the real DOM (in a process called "reconciliation").

Here is a simple example of accessing the DOM through JS:

```javascript
document.getElementById("demo").innerHTML = "Hello, World!";
```

In this code snippet, `document` is an object representing the HTML document as a whole, `getElementById` is a method (or function) that fetches the first HTML element with the ID `"demo"`, and `innerHTML` is a property that either sets or returns the HTML content (inner HTML) of an element. We're setting the content of the `"demo"` element to be the string `"Hello, World!"`.

However, manipulating the DOM directly like this is rarely done in React. Instead, one would more typically change the state or props of a component, and let React handle the DOM updates:

```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {message: "Hello, World!"};
}

render() {
return <h1>{this.state.message}</h1>;
}
}
```

In this React example, changing `this.state.message` will automatically lead to a re-render, updating the displayed message on the webpage.