Lecture 157:- Accessing DOM

To access and manipulate the DOM (Document Object Model), you can use JavaScript. In the browser environment, the global document object represents the web page in the browser's window. You can use the document object to select and manipulate elements on the page.

Here are some examples of how to access the DOM using JavaScript:

1. Select an element by its ID:

javascriptCopy code

const element = document.getElementById('myId');

1. Select an element by its tag name:

javascriptCopy code

const elements = document.getElementsByTagName('p');

1. Select an element by its class name:

javascriptCopy code

const elements = document.getElementsByClassName('myClass');

1. Select an element using a CSS selector:

javascriptCopy code

const element = document.querySelector('#myId'); const elements = document.querySelectorAll('.myClass');

Once you have selected an element, you can manipulate its properties, such as its text content, HTML content, attributes, and CSS styles. Here are some examples:

1. Set the text content of an element:

javascriptCopy code

element.textContent = 'Hello, world!';

1. Set the HTML content of an element:

javascriptCopy code

element.innerHTML = '<strong>Hello, world!</strong>';

1. Get or set the value of an input element:

javascriptCopy code

const input = document.getElementById('myInput'); const value = input.value; input.value = 'new value';

1. Get or set the attribute of an element:

javascriptCopy code

const link = document.getElementById('myLink'); const href = link.getAttribute('href'); link.setAttribute('href', 'http://example.com');

1. Get or set the CSS style of an element:

javascriptCopy code

element.style.color = 'red'; element.style.fontSize = '20px';