fix some typo error in day 21, 23

pull/113/head
Kamrul Islam Shahin 5 years ago
parent a9655f536e
commit 190ba29960

@ -74,7 +74,7 @@ We can access already created element or elements using JavaScript. To access or
#### Getting elements by tag name #### Getting elements by tag name
**_getElementsByTagName()_**:takes a take name as a string parameter and this method returns an HTMLCollection object. An HTMLCollection is an array like object of HTML elements. The length property provides the size of the collection. Whenever we use this method we access the individual elements using index or after loop through each individual items. An HTMLCollection does not support all array methods therefore we should use regular for loop instead of forEach. **_getElementsByTagName()_**:takes a tag name as a string parameter and this method returns an HTMLCollection object. An HTMLCollection is an array like object of HTML elements. The length property provides the size of the collection. Whenever we use this method we access the individual elements using index or after loop through each individual items. An HTMLCollection does not support all array methods therefore we should use regular for loop instead of forEach.
```js ```js
// syntax // syntax
@ -84,7 +84,7 @@ document.getElementsByTagName('tagname')
```js ```js
const allTitles = document.getElementsByTagName('h1') const allTitles = document.getElementsByTagName('h1')
console.log(allTitles) //HTMCollections console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4 console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) { for (let i = 0; i < allTitles.length; i++) {
@ -104,7 +104,7 @@ document.getElementsByClassName('classname')
```js ```js
const allTitles = document.getElementsByClassName('title') const allTitles = document.getElementsByClassName('title')
console.log(allTitles) //HTMCollections console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4 console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) { for (let i = 0; i < allTitles.length; i++) {
@ -133,9 +133,9 @@ The _document.querySelector_ method can select an HTML or HTML elements by tag n
**_querySelector_**: can be used to select HTML element by its tag name, id or class. If the tag name is used it selects only the first element. **_querySelector_**: can be used to select HTML element by its tag name, id or class. If the tag name is used it selects only the first element.
```js ```js
let firstTitle = document.querySelector('h1') // select the first available h2 element let firstTitle = document.querySelector('h1') // select the first available h1 element
let firstTitle = document.querySelector('#first-title') // select id with first-title let firstTitle = document.querySelector('#first-title') // select id with first-title
let firstTitle = document.querySelector('.title') // select the first available h2 element with class title let firstTitle = document.querySelector('.title') // select the first available h1 element with class title
``` ```
**_querySelectorAll_**: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements. **_querySelectorAll_**: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements.
@ -158,7 +158,7 @@ An attribute is added in the opening tag of HTML which gives additional informat
```js ```js
const titles = document.querySelectorAll('h1') const titles = document.querySelectorAll('h1')
titles[3].class = 'title' titles[3].className = 'title'
titles[3].id = 'fourth-title' titles[3].id = 'fourth-title'
``` ```
@ -214,7 +214,7 @@ const titles = document.querySelectorAll('h1')
titles[3].textContent = 'Fourth Title' titles[3].textContent = 'Fourth Title'
``` ```
#### Adding Text Content using innHTML #### Adding Text Content using innerHTML
Most people get confused between _textContent_ and _innerHTML_. _textContent_ is meant to add text to an HTML element, however innerHTML can add a text or HTML element or elements as a child. Most people get confused between _textContent_ and _innerHTML_. _textContent_ is meant to add text to an HTML element, however innerHTML can add a text or HTML element or elements as a child.

@ -174,7 +174,7 @@ By now you are familiar with addEventListen method and how to attach event liste
List of events: List of events:
- click - when the element clicked - click - when the element clicked
- dbclick - when the element double clicked - dblclick - when the element double clicked
- mouseenter - when the mouse point enter to the element - mouseenter - when the mouse point enter to the element
- mouseleave - when the mouse pointer leave the element - mouseleave - when the mouse pointer leave the element
- mousemove - when the mouse pointer move on the element - mousemove - when the mouse pointer move on the element

Loading…
Cancel
Save