Document Object Model (DOM)

-
Document Object Model (DOM) The Document Object Model is a storing of the HTML elements and their styles in a tree with the root of the tree being the document object which represents the <html> element.

"document.body" represents the <body> element. The window object is an implicit object which represents the tab opened in the browser.

For example, "window.document.body" is the same as "document.body";

To access an element by the "id" attribute, use the
document.getElementById("<id of the element>")

To access elements by the "class" attribute, use the
document.getElementsByClassName("<class name of the element(s)>");

To redirect a browser to another web page, use the
document.location.href= "http://wwww.example.com"
To refresh a web page, use
document.location.reload();

To access all the forms in the document,use
document.forms object
For instance,
document.forms[0] will be the first form in the document tree. The document tree is parsed in Depth-First Search manner

To set an Attribute in an HTML element,
document.getElementById("id").setAttribute("class","red");

To get an attribute in an HTML element,
document.getElementById("id").getAttribute("class");

To access a textfield whose name attribute is "textfield1" in the first form of the document as parsed in the document by The DOM in Depth First Search, use

document.forms[0].textfield1

To access the value of the "textfield1" use
document.forms[0].textfield1.value

To set the value of the "textfield1" use
document.forms[0].textfield1.value="Hello"
To change the HTML of an element, use
document.getElementById("id").innerHTML="<h />"

To store session information across nultiple requests, use
document.cookie ="Name1: value1; Name2: value2";

To check if an element is existing, use
if(type of document.getElemenentById("hello") != "undefined")

To create an HTML element, use
document.createElement("h1");

To Append a child element to a poarent HTML eleement, use
document.body.appendChild("<html_text>");

Additional topics

  • To get the first HTML element has satifies the query selector use
    document.querySelector("#demo");
  • To get all the HTML elements that satisify the query selector use
    document.querySelectorAll(".demo");
  • To change the class or to add a class use
    document.body.className = " hide";
    document.body.className += " hide";

Comments

Post a Comment

Popular posts from this blog

Parallel Database design, query processing

-
Image
Parallel Database design, query processing, and case study In this post, we are going to analyze the concepts of Parallel Database design, query processing, and case study. Parallel database design Hardware Architecture Data partitioning Query processing Hardware Architecture Shared Memory Shared Disk> Shared Nothing Data Partitioning Partitioning a relation involves distributing its tuples over several disks Three Kinds – Range Partitioning Round-robin Partitioning Hashing Partitioning Range Partitioning is good for Ideal for point and range queries on the partitioning attribute Hash partitioning Ideal for point queries based on the partitioning attribute Ideal for sequential sca...
Read more

Laravel | PHP | Basics | Part 2

-
Image
Learning Laravel through Screenshots Caching Laravel by default supports multiple cache stores like memcached , redis ,etc. To install redis as a cache store, you should use composer install predis/predis predis stands for PHP redis The default port number is 6379 Every Cache store requires a prefix which is stored in the ENV file or in the config/cache.php Following are the cache stores supported by laravel Blade Templates Blade is a templating engine for views in laravel. All the files which are of type blade.php are having the extension .blade.php They are stored in the resources/views directory YOu can create suub-folders in the reosurces/views directory like layouts for all the common UI components lke header , footer, sidebar , navbar, menubar, serach bar, etc. To include the parenet ...
Read more

Apache Hadoop | Running MapReduce Jobs

-
Image
Apache Hadoop | Running MapReduce Jobs After setting up your environment and running the HDFS and YARN daemons, we can start working on running MapReduce jobs on our local machine. We need to compile our code, produce a JAR file, move our inputs, and run a MapReduce job on Hadoop. Step 1 - Configure extra environment variables As a preface, it is best to setup some extra environment variables to make running jobs from the CLI quicker and easier. You can name these environment variables anything you want, but we will name them HADOOP_CP and HDFS_LOC to not potentially conlict with other environment variables. Open the Start Menu and type in 'environment' and press enter. A new window with System Properties should open up. Click the Environment Variables button near the bottom right. HADOOP_CP environment variable This is used to compile your Java files. The backticks (eg. `some command here`) do not work on Win...
Read more