JavaScript - 文文件對象
Hello, aspiring programmers! Today, we're going to dive into the fascinating world of the JavaScript Document Object. Don't worry if you're new to programming – I'll guide you through this journey step by step, just like I've done for countless students over my years of teaching. Let's embark on this adventure together!
Window 文文件對象
When you're working with JavaScript in a web browser, one of the most important things you'll interact with is the Document Object. But before we get to that, let's understand its parent: the Window object.
Imagine your web browser as a house. The Window object represents the entire house, while the Document object is like the main living room where most of the action happens. Everything you see in your browser window is part of the Window object, and the webpage content is specifically part of the Document object.
Here's a simple example to illustrate this:
console.log(window.document === document); // Output: true
This shows that document
is actually a property of the window
object, but we can access it directly as document
for convenience.
JavaScript Document Object Properties
Now that we understand where the Document object fits in, let's explore some of its properties. These properties allow us to access and manipulate different parts of our webpage.
1. document.title
This property lets you get or set the title of your webpage – you know, the text that appears in the browser tab.
console.log(document.title); // Outputs the current page title
document.title = "My Awesome Page"; // Changes the page title
2. document.body
This gives you access to the <body>
element of your HTML document.
document.body.style.backgroundColor = "lightblue";
This line would change the background color of your entire page to light blue. Pretty cool, right?
3. document.URL
This read-only property gives you the complete URL of the current page.
console.log(document.URL); // Outputs something like "https://www.example.com/page.html"
JavaScript Document Object Methods
Methods are like the superpowers of our Document object. They allow us to do all sorts of interesting things with our webpage.
1. document.getElementById()
This is probably the method you'll use most often. It lets you grab an element from your HTML using its ID.
let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "Hello, I've been changed by JavaScript!";
In this example, we're finding an element with the ID "mySpecialDiv" and changing its content.
2. document.createElement()
This method allows you to create new HTML elements from scratch!
let newParagraph = document.createElement("p");
newParagraph.textContent = "I'm a new paragraph, nice to meet you!";
document.body.appendChild(newParagraph);
Here, we create a new paragraph element, set its text, and add it to the end of our document's body.
3. document.querySelector()
This powerful method lets you select elements using CSS selectors.
let firstButton = document.querySelector("button");
firstButton.style.color = "red";
This would find the first button on your page and make its text red.
Document Object Properties List
Let's summarize some key properties of the Document object in a handy table:
Property | Description |
---|---|
document.title | The title of the current document |
document.body | The <body> element |
document.head | The <head> element |
document.URL | The complete URL of the document |
document.domain | The domain name of the document server |
document.lastModified | The date on which the document was last modified |
Document Object Methods List
And here's a table of some important Document object methods:
Method | Description |
---|---|
document.getElementById() | Returns the element with the specified ID |
document.getElementsByClassName() | Returns a collection of elements with the specified class name |
document.getElementsByTagName() | Returns a collection of elements with the specified tag name |
document.querySelector() | Returns the first element that matches a CSS selector |
document.querySelectorAll() | Returns all elements that match a CSS selector |
document.createElement() | Creates a new HTML element |
document.write() | Writes HTML expressions or JavaScript code to a document |
Remember, learning to manipulate the Document object is like learning to be a wizard in the world of web development. With these tools, you can make your webpages come alive and respond to user actions in amazing ways.
As we wrap up this lesson, I'm reminded of a student I once had who was initially intimidated by all these properties and methods. But with practice, she became so proficient that she could manipulate web pages in her sleep! (Well, almost.) The key is to experiment and have fun with it.
So, my dear students, don't be afraid to play around with these concepts. Try changing the title of this page, or creating a new element and adding it to the body. The more you practice, the more natural it will become. Before you know it, you'll be crafting interactive web experiences like a pro!
Happy coding, and remember – in the world of programming, curiosity is your greatest asset. Keep exploring, keep questioning, and most importantly, keep coding!
Credits: Image by storyset