makyo
/
zk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update from sparkleup

This commit is contained in:
Madison Scott-Clary 2022-06-23 08:30:07 -07:00
parent a135858c2a
commit 798d45da40
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
work/ctm-406.md
View File

@ -74,7 +74,7 @@ We'll be using the different methods that we outlined in the [Overview](https://
## Accessing Elements by ID
The easiest way to access a single element in the DOM is by its unique [ID](https://developer.mozilla.org/en-US/docs/Web/API/Element/id). We can grab an element by ID with the [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method of the `document` object.
The easiest way to access a single element in the DOM is by its unique [ID](https://developer.mozilla.org/en-US/docs/Web/API/Element/id). You can get an element by ID with the [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method of the `document` object.
```js
document.getElementById();
@ -103,13 +103,13 @@ console.log(demoId);
<div id="demo">Access me by ID</div>
```
We can be sure we're accessing the correct element by changing the `border` property to `purple`.
You can be sure you're accessing the correct element by changing the `border` property to `purple`.
```custom_prefix(>)
demoId.style.border = '1px solid purple';
```
Once we do so, our live page will look like this:
Once you do so, your live page will look like this:
![Browser rendering of ID element styling](https://assets.digitalocean.com/articles/eng_javascript/dom/id-element.png)
@ -117,7 +117,7 @@ Accessing an element by ID is an effective way to get an element quickly in the
## Accessing Elements by Class
The [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute is used to access one or more specific elements in the DOM. We can get all the elements with a given class name with the [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) method.
The [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute is used to access one or more specific elements in the DOM. You can get all the elements with a given class name with the [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) method.
```js
document.getElementsByClassName();
@ -130,13 +130,13 @@ Now we want to access more than one element, and in our example we have two elem
<div class="demo">Access me by class (2)</div>
```
Let's access our elements in the _Console_ and put them in a variable called `demoClass`.
Access these elements in the _Console_ and put them in a variable called `demoClass`.
```custom_prefix(>)
const demoClass = document.getElementsByClassName('demo');
```
At this point, you might think you can modify the elements the same way you did with the ID example. However, if we try to run the following code and change the `border` property of the class demo elements to orange, we will get an error.
At this point, it might be tempting to modify the elements the same way you did with the ID example. However, if you try to run the following code and change the `border` property of the class demo elements to orange, you will get an error.
```custom_prefix(>)
demoClass.style.border = '1px solid orange';
@ -147,7 +147,7 @@ demoClass.style.border = '1px solid orange';
Uncaught TypeError: Cannot set property 'border' of undefined
```
The reason this doesn't work is because instead of just getting one element, we have an array-like object of elements.
The reason this doesn't work is because instead of just getting one element, you have an array-like object of elements.
```custom_prefix(>)
console.log(demoClass);
@ -158,13 +158,13 @@ console.log(demoClass);
(2) [div.demo, div.demo]
```
[JavaScript arrays](https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript) must be accessed with an index number. We can therefore change the first element of this array by using an index of `0`.
[JavaScript arrays](https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript) must be accessed with an index number. You can change the first element of this array by using an index of `0`.
```custom_prefix(>)
demoClass[0].style.border = '1px solid orange';
```
Generally when accessing elements by class, we want to apply a change to all the elements in the document with that particular class, not just one. We can do this by creating a `for` loop, and looping through every item in the array.
Generally when accessing elements by class, we want to apply a change to all the elements in the document with that particular class, not just one. You can do this by creating a `for` loop, and looping through every item in the array.
```custom_prefix(>)
for (i = 0; i < demoClass.length; i++) {
@ -172,15 +172,15 @@ for (i = 0; i < demoClass.length; i++) {
}
```
When we run this code, our live page will be rendered like this:
When you run this code, your live page will be rendered like this:
![Browser rendering of class element styling](https://assets.digitalocean.com/articles/eng_javascript/dom/class-element.png)
We have now selected every element on the page that has a `demo` class, and changed the `border` property to `orange`.
You have now selected every element on the page that has a `demo` class, and changed the `border` property to `orange`.
## Accessing Elements by Tag
A less specific way to access multiple elements on the page would be by its HTML tag name. We access an element by tag with the [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) method.
A less specific way to access multiple elements on the page would be by its HTML tag name. You access an element by tag with the [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) method.
```js
document.getElementsByTagName();
@ -193,7 +193,7 @@ For our tag example, we're using `article` elements.
<article>Access me by tag (2)</article>
```
Just like accessing an element by its class, `getElementsByTagName()` will return an array-like object of elements, and we can modify every tag in the document with a `for` loop.
Just like accessing an element by its class, `getElementsByTagName()` will return an array-like object of elements, and you can modify every tag in the document with a `for` loop.
```custom_prefix(>)
const demoTag = document.getElementsByTagName('article');
@ -217,41 +217,41 @@ If you have any experience with the [jQuery](https://jquery.com/) API, you may b
$('#demo'); // returns the demo ID element in jQuery
```
We can do the same in plain JavaScript with the `querySelector()` and `querySelectorAll()` methods.
You can do the same in plain JavaScript with the `querySelector()` and `querySelectorAll()` methods.
```js
document.querySelector();
document.querySelectorAll();
```
To access a single element, we will use the [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method. In our HTML file, we have a `demo-query` element
To access a single element, you can use the [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method. In our HTML file, we have a `demo-query` element
```html
<div id="demo-query">Access me by query</div>
```
The selector for an `id` attribute is the hash symbol (`#`). We can assign the element with the `demo-query` id to the `demoQuery` variable.
The selector for an `id` attribute is the hash symbol (`#`). You can assign the element with the `demo-query` id to the `demoQuery` variable.
```custom_prefix(>)
const demoQuery = document.querySelector('#demo-query');
```
In the case of a selector with multiple elements, such as a class or a tag, `querySelector()` will return the first element that matches the query. We can use the [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method to collect all the elements that match a specific query.
In the case of a selector with multiple elements, such as a class or a tag, `querySelector()` will return the first element that matches the query. You can use the [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method to collect all the elements that match a specific query.
In our example file, we have two elements with the `demo-query-all` class applied to them.
In the example file, you have two elements with the `demo-query-all` class applied to them.
```html
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
```
The selector for a `class` attribute is a period or full stop (`.`), so we can access the class with `.demo-query-all`.
The selector for a `class` attribute is a period or full stop (`.`), so you can access the class with `.demo-query-all`.
```custom_prefix(>)
const demoQueryAll = document.querySelectorAll('.demo-query-all');
```
Using the `forEach()` method, we can apply the color `green` to the `border` property of all matching elements.
Using the `forEach()` method, you can apply the color `green` to the `border` property of all matching elements.
```custom_prefix(>)
demoQueryAll.forEach(query => {
@ -267,7 +267,7 @@ Using the query selector methods is extremely powerful, as you can access any el
## Complete JavaScript Code
Below is the complete script of the work we did above. You can use it to access all the elements on our example page. Save the file as `access.js` and load it in to the HTML file right before the closing `body` tag.
Below is the complete script of the work you did above. You can use it to access all the elements on our example page. Save the file as `access.js` and load it in to the HTML file right before the closing `body` tag.
```js
[label access.js]