Manipulating HTML using JavaScript

-

Selecting HTML document with JavaScript

Given the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    <h1 id="title">Hello</h1>
    <input type="checkbox">
    <button class="btn">Click Me</button>

    <ul id="list">
        <li class="item"><a href="https://www.google.com">Google</a></li>
        <li class="item">Second</li>
        <li class="item">Third</li>
    </ul>

    
</body>
    <footer> 
        <script src="index.js" charset="utf=8"></script>
    </footer>
</html>
  • getElementsByTagName searches for elements with particular tag name. For example, document.getElementsByTagName("li) gives array of list items. document.getElementsByTagName("li")[2].style.color = "purple" to change the color.
  • document.getElementsByClassName("btn")[0] gives the first item.
  • document.getElementById just returns single item because ids are unique in a document.
  • document.querySelector just returns a single item, but takes a CSS selector as input (element/class/id).
    • Example: document.querySelector("#title"). Use . for class.
  • Hierarchical selectors: document.querySelector("li a"). Remember the space and read from right to left.
  • Combining selectors (things that occur in the same element): document.querySelector("li.item")
If selector matches more than one object, then the first match is returned. If one wants all matches, use querySelectorAll. querySelector and its plural variety allows for complex selections. getElement methods are more broad. Generally, querySelector occurs more often.

Manipulating styles using JavaScript

JavaScript naming conventions are camel-cased. When trying to change the css styles, the property names are different from css. E.g. for changing font size:
document.querySelector("h1").style.fontSize = "3rem".

Separation of concerns

It is not good practice to change style using JavaScript, whereas styles should be inside CSS. But to dynamically change the style, one needs JavaScript. Class list is a property of every DOM object.
  • document.querySelector("button").classList.
  • Add classes: document.querySelector("button").classList.add("invisible"); This way one can create a separate style for the invisible class. This way all styles are inside stylesheet. One can also remove classes. There is also a toggle method.

Manipulating text using selected items from DOM

Instead of innerHTML, use the textContent. innerHTML gives the HTML in between the element tags. If there is a child tag, one gets back the HTML including child tag.

Manipulating attributes of an element

  • list of attributes: document.querySelector("a").attributes gives a list of all attributes. document.querySelector("a").getAttribute("href"). To change it, use setAttribute which takes two parameters, setAttribute("href","https://www.bing.com");

References

Complete Web Development Bootcamp in Udemy.

Comments

Post a Comment

Popular posts from this blog

QTreeView and QTableView dynamic changes

-
Image
Dynamically adding items to  QTreeView  and  QTableView Create the UI as follows, with the treeview on the left hand side and the table view on the right hand side. Notes The header file contains the models and the selection models for the tree view and the table view: QStandardItemModel * treeViewModel ; QItemSelectionModel * treeViewSelectionModel ; QItemSelectionModel * tableSelectionModel ; QStandardItemModel * tableModel ; In the .cpp file, the tree view models and table view models are set as the models for the selection models. treeViewSelectionModel -> setModel ( treeViewModel ) ; tableSelectionModel -> setModel ( tableModel ) ; The following code illustrates how to dynamically add a new row to the treeview. void MainWindow :: updateTreeView ( ) { QStandardItem * newRow = new QStandardItem ( QString ( "inserted row" ) ) ; QList < QStandardItem * > newRows ; newRows . append ( newRow ) ; aut...
Read more

C++ Tour Part III

-
Shared Pointer A  shared  pointer is a smart pointer that allows for distributed ownership of data. Each time it is assigned, a  reference count  is incremented, indicating one more owner of the data. When the pointer goes out of scope or an owner calls  reset , the reference count is decremented. When the reference count goes to 0, the data pointed to is deallocated. Use  make_shared : auto person = std :: make_shared < Person > ( ) ; if ( person ) { cout << "Person's address is " << person -> address ; } C++17 allows use of shared pointers to point to dynamically allocated arrays. However,  make_shared  cannot be used. Below is an example: shared_ptr < Person [ ] > persons ( new Person [ 10 ] ) ; persons [ 0 ] . _name = "Jack Sparrow" ; persons [ 0 ] . _address = "Caribbean" ; cout << "Address of first person " << persons [ 0 ] . address << endl ; A better solutio...
Read more

C++ strings and string_view

-
C-style strings C style strings should be avoided except when interfacing with C libraries. C string library functions provide no bounds checking and memory allocation support. They are represented as an array of characters. Last character of the string is the null character  \0 , so that code that uses the string knows where it ends. The space needed for a string is always one more than the number of readable characters. String Literals Strings written with quotes around them are string literals. They are stored in a read-only part of memory. Because they are stored in readonly sections, attempting to modify string literals is  undefined behavior . Example: char * str = "world" ; str [ 0 ] = 'y' ; //undefined behavior If the code respected the standard and assigned the string literal to  const char* , the compiler will catch attempts to modify string literals: const char * str = "world" ; str [ 0 ] = 'k' ; //compiler will f...
Read more