mirror of
https://github.com/friuns2/BlackFriday-GPTs-Prompts.git
synced 2026-04-30 14:03:55 +07:00
Your a
147 lines
3.5 KiB
Markdown
147 lines
3.5 KiB
Markdown
|
|
|
|
# Abhisekh Shakya | [Start Chat](https://gptcall.net/chat.html?data=%7B%22contact%22%3A%7B%22id%22%3A%22pyJJAKCJEtRi8wBYrjtDx%22%2C%22flow%22%3Atrue%7D%7D)
|
|
Scripting Language (javascript)
|
|
|
|
# Prompt
|
|
|
|
```
|
|
Act as {{ subject }} and answer this question In context of scripting language, describe different DOM methods and properties with example.
|
|
```
|
|
|
|
## Welcome Message
|
|
Sure, here's a brief explanation of different DOM methods and properties with example:
|
|
|
|
|
|
|
|
1. getElementById(): This method returns the element that has the ID attribute with the specified value. For example, if we have an HTML document with a div element having "myDiv" as its ID, we can access it using the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
var myElement = document.getElementById("myDiv");
|
|
|
|
```
|
|
|
|
|
|
|
|
2. getElementsByTagName(): This method returns a collection of all elements in the document with the specified tag name. For example, to get all paragraph elements in a document, we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
var allParagraphs = document.getElementsByTagName("p");
|
|
|
|
```
|
|
|
|
|
|
|
|
3. innerHTML: This property sets or returns the HTML content (inner HTML) of an element. For example, to change the text of a paragraph element with ID "myPara", we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
document.getElementById("myPara").innerHTML = "New text";
|
|
|
|
```
|
|
|
|
|
|
|
|
4. style: This property is used to set or return the inline style of an element. For example, to change the background color of a div element with ID "myDiv", we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
document.getElementById("myDiv").style.backgroundColor = "red";
|
|
|
|
```
|
|
|
|
|
|
|
|
5. addEventListener(): This method attaches an event handler to an element without overwriting existing event handlers. For example, to attach a click event handler to a button element with ID "myButton", we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
document.getElementById("myButton").addEventListener("click", function() {
|
|
|
|
alert("Button clicked");
|
|
|
|
});
|
|
|
|
```
|
|
|
|
## Conversation
|
|
|
|
**ASSISTANT**: Sure, here's a brief explanation of different DOM methods and properties with example:
|
|
|
|
|
|
|
|
1. getElementById(): This method returns the element that has the ID attribute with the specified value. For example, if we have an HTML document with a div element having "myDiv" as its ID, we can access it using the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
var myElement = document.getElementById("myDiv");
|
|
|
|
```
|
|
|
|
|
|
|
|
2. getElementsByTagName(): This method returns a collection of all elements in the document with the specified tag name. For example, to get all paragraph elements in a document, we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
var allParagraphs = document.getElementsByTagName("p");
|
|
|
|
```
|
|
|
|
|
|
|
|
3. innerHTML: This property sets or returns the HTML content (inner HTML) of an element. For example, to change the text of a paragraph element with ID "myPara", we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
document.getElementById("myPara").innerHTML = "New text";
|
|
|
|
```
|
|
|
|
|
|
|
|
4. style: This property is used to set or return the inline style of an element. For example, to change the background color of a div element with ID "myDiv", we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
document.getElementById("myDiv").style.backgroundColor = "red";
|
|
|
|
```
|
|
|
|
|
|
|
|
5. addEventListener(): This method attaches an event handler to an element without overwriting existing event handlers. For example, to attach a click event handler to a button element with ID "myButton", we can use the following code:
|
|
|
|
|
|
|
|
```
|
|
|
|
document.getElementById("myButton").addEventListener("click", function() {
|
|
|
|
alert("Button clicked");
|
|
|
|
});
|
|
|
|
```
|
|
|