https://github.com/codeadamca/javascript-dom
A basic example of using JavaScript to make changes to a webpage using the DOM.
https://github.com/codeadamca/javascript-dom
dom javascript learning-code
Last synced: 11 months ago
JSON representation
A basic example of using JavaScript to make changes to a webpage using the DOM.
- Host: GitHub
- URL: https://github.com/codeadamca/javascript-dom
- Owner: codeadamca
- Created: 2021-01-23T18:28:25.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-26T22:03:13.000Z (about 1 year ago)
- Last Synced: 2025-01-26T23:17:52.693Z (about 1 year ago)
- Topics: dom, javascript, learning-code
- Language: HTML
- Homepage:
- Size: 142 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A Basic Introduction to JavaScript and the DOM
When a browser renders a webpage from an HTML document, the browser creats a DOM (Document Object Model). This DOM can be use by JavaScript to add and/or manipulate elements in the document.
## Example DOM
For example, the following HTML:
```html
The JavaScript DOM
The JavaScript DOM
Mauris convallis dictum odio. Quisque euismod finibus.
```
Would have the following DOM:
## Referencing Elements
The easiest method of referencing an element in the DOM is by giving the elements IDs:
```html
The JavaScript DOM
The JavaScript DOM
Mauris convallis dictum odio. Quisque euismod finibus.
```
To reference the heading we would use the `document.getElementById('heading')`. We can then use a DOM element to change the properties of the element. For example, to change the heading to red we would use the following JavaScript:
```javascript
document.getElementById('heading').style.color = "red";
```
To change the `href` value of the link we would use the following JavaScript:
```javascript
document.getElementById('link').href = "https://codeadam.ca/learning/javascript-dom.html";
```
## Trying It Out
Create a new HTML document, add a heading, some images, and some paragraphs. Use [Lipsum](https://lipsum.com/) for some quick paragraph content. Add some JavaScript to the HTML document that will complete the following objectives:
1. Change the text colour of the `h1` element.
2. Change the text of the first `p` element.
3. Change the border colour of one of the `img` elements.
4. Change the background colour of the `body` element.
> Full tutorial URL:
> https://codeadam.ca/learning/javascript-dom.html
***
## Repo Resources
* [Visual Studio Code](https://code.visualstudio.com/)
