View on GitHub

reading-notes

Reading Notes about Markdown-Html-Css-JavaScript

1

Object Literal in JavaScript?

An Object Literal is an object value that you literally write in your program/app.

An Object Literal usually consists of a list of comma-separated name-value pairs (property:value), wrapped inside curly braces {}.

* Object Literal Syntax

Object literals are defined using the following syntax rules:

. A colon separates property name[1] from value. . A comma separates each name-value pair from the next.

. A comma after the last name-value pair is optional. ___________

* Why and How We Use Object Literals

Several JavaScripts from dyn-web use object literals for setup purposes. Object literals enable us to write code that supports lots of features yet still provide a relatively straightforward process for implementers of our code. No need to invoke constructors directly or maintain the correct order of arguments passed to functions. Object literals are also useful for unobtrusive event handling; they can hold the data that would otherwise be passed in function calls from HTML event handler attributes.

There is one drawback: if you are unfamiliar with the syntax, it can be very easy to introduce errors which cause the code to stop working. ______

Document Object Model

3

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is the root element that represents the html document. It has properties and methods. By the help of document object, we can add dynamic content to our web page.

1-write(“string”): writes the given string on the document.

2- getElementById(): returns the element having the given id value.

3- getElementsByName(): returns all the elements having the given name value.

4- getElementsByTagName(): returns all the elements having the given tag name.

5- getElementsByClassName(): returns all the elements having the given class name. ____

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.

If the selector matches an ID in document that is used several times (Note that an “id” should be unique within a page and should not be used more than once), it returns the first matching element. __

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as an HTMLCollection object.

The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0. ____

The traditional way of looping through NodeLists is the same as looping through arrays: with a for loop.

var elems = document.querySelectorAll(‘.some-selector’);

for (var i = 0; i < elems.length; i++) {
    console.log(i); // index
    console.log(elems[i]); // value
}

The ES6 Way #

Fortunately, just like with arrays, there’s a forEach() method for NodeLists.

var elems = document.querySelectorAll('.some-selector');

elems.forEach(function (elem, index) {
    console.log(index); // index
    console.log(elem); // value
});

*Accessing Attributes

You can access attributes by creating an object of the class, and by using the dot syntax (.):

## * removeAttribute() Method

Example Remove the class attribute from an < h1> element:

document.getElementsByTagName("H1")[0].removeAttribute("class");

## Summary : The browser represents the page using a DOM tree.