Questions and Answers
What does DOM stand for?
Document Object Model
How does the DOM relate to a web page?
It allows JavaScript to communicate with and change a web page.
What does BOM stand for?
Browser Object Model
How can you dynamically change the text content of an element using JavaScript?
Signup and view all the answers
Which browser object allows you to check the browser's name, version, and platform?
Signup and view all the answers
The Document Object Model (DOM) can only be used to read the structure of a web page.
Signup and view all the answers
What is the purpose of the appendChild() method in JavaScript?
Signup and view all the answers
What is the difference between creating a text node and setting innerText?
Signup and view all the answers
How do you dynamically remove an element from the DOM?
Signup and view all the answers
What is the purpose of the createElement() method in JavaScript?
Signup and view all the answers
What is the relationship between a node and its parent element in the DOM?
Signup and view all the answers
What is the difference between a node and an element in the DOM?
Signup and view all the answers
What is the purpose of the createTextNode() method in JavaScript?
Signup and view all the answers
What happens when you call the appendChild() method on a parent element?
Signup and view all the answers
How do you access the parent element of a node in JavaScript?
Signup and view all the answers
What is the result of calling the appendChild() method on a node that already has a parent element?
Signup and view all the answers
Study Notes
Document Object Model (DOM)
- The DOM is a structure that represents the HTML tags, attributes, and order of a web page
- It allows JavaScript to communicate with and change a web page
- The DOM is made up of nodes, which are the individual HTML tags and text elements
- Nodes can be traversed and manipulated using JavaScript methods
DOM Tree
- The DOM tree is a hierarchical representation of the DOM
- It consists of parent and child nodes, sibling nodes, and text nodes
- The DOM tree can be traversed and manipulated using JavaScript methods
Selecting Elements/Nodes
-
document.getElementById("id")
selects an element with a specific ID -
document.querySelector("selector")
selects an element with a specific CSS selector -
document.getElementsByTagName("tag")
selects a group of elements with a specific tag name -
document.getElementsByClassName("class")
selects a group of elements with a specific class name
Dynamically Changing Text Content
-
element.innerText = "new text"
changes the text content of an element -
element.innerHTML = "new html"
changes the HTML content of an element
Dynamically Changing Attributes
-
element.setAttribute("attribute", "value")
sets an attribute of an element -
element.getAttribute("attribute")
gets the value of an attribute of an element
Dynamically Changing Style
-
element.style.property = "value"
changes the style of an element - Properties that consist of more than one word are joined with a capital letter (e.g.
fontSize
)
Dynamically Adding New Elements
-
document.createElement("tag")
creates a new element -
element.appendChild(node)
adds a new element to the DOM -
element.innerHTML += "new html"
adds new HTML content to an element
Events
- Events are actions that users perform, such as clicking a button or moving the mouse
- Events can be handled using inline handlers or event listeners
- Event listeners can be added to elements using
addEventListener
method
Handling Events
- Inline handlers are added as an attribute to an HTML element
- Event listeners are added using the
addEventListener
method - Multiple event listeners can be added to an element
JavaScript Timing Events
-
setTimeout(function, delay)
runs a function after a specified delay -
setInterval(function, delay)
runs a function at a specified interval -
clearTimeout
andclearInterval
can be used to stop the execution of a function
Browser Object Model (BOM)
- The BOM provides objects that allow JavaScript to interact with the browser
- Objects include
window
,document
,navigator
,screen
,history
, andlocation
- The BOM is not standardized across all browsers
BOM Objects
-
window
object represents the browser window -
document
object represents the HTML document -
navigator
object provides information about the browser and its capabilities -
screen
object provides information about the screen and its dimensions -
history
object provides information about the browser's history -
location
object provides information about the current URL and allows navigation
Browser Compatibility Issues
- Different browsers and versions may have different support for certain features and standards
- Using common standard tags and features can help with compatibility issues
Document Object Model (DOM)
- The DOM is a structure that represents the organization of a web page, including its HTML tags, attributes, and order.
- It allows JavaScript to communicate with and modify a web page.
- Each element and text in a web page is a node in the DOM.
DOM Tree
- A DOM tree is a visual representation of the DOM, showing the relationships between nodes.
- Nodes can have parent, child, and sibling relationships.
- Examples of DOM trees include:
- A basic HTML page structure
- A unordered list with list items
- A table with headings and rows
Selecting Elements/Nodes
- You can select a single element/node using:
-
document.getElementById("id")
ordocument.querySelector("#id")
-
- You can select a group of elements/nodes using:
-
document.getElementsByTagName("tag")
ordocument.querySelectorAll(".class")
-
- Note that
querySelector
only returns the first matched element, whilequerySelectorAll
returns all matched elements.
Creating and Modifying Elements/Nodes
- You can create a new element/node using
document.createElement("tag")
. - You can add content to an element/node using
node.innerText = "content"
ornode.appendChild(textnode)
. - You can append a new element/node to an existing element/node using
parent.appendChild(node)
. - You can remove a node by finding its parent and using
parent.removeChild(node)
.
Create TextNode vs Setting InnerText
- Creating a text node using
document.createTextNode("content")
and then appending it to an element/node is more precise. - Setting innerText directly using
node.innerText = "content"
is more convenient if the node only has text content.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
This quiz covers the Document Object Model (DOM) and Browser Object Model, including their usage, structure, and role in web page development and web applications.