Skip to main content

DOM querySekector in Javascript

 <!DOCTYPE html>

<html>
    <head>
        <title>Dom Set and Get Methods</title>
    </head>
    <body>
        <h1 id="heading" class="title">Dom Query Selector Methods</h1>
        <h3  class="title">Dom Query Selector All Methods</h3>
        <p>There are the different Objects use to targer DOM ekement</p>
        <ol>
           <li>Id : document.getElementById(id)</li>
           <li>Class Name : document.getElementsByClassName(class)</li>
           <li>Tag Name : document.getElementsByTagName(tag)</li>
        </ol>


        <script>

            /*
            QuerySelector target only first available object/attribnute of the element (ignore rest elements).
            And getElementsByClassName will return all element with same class.
            */

            document.querySelector('#heading').innerHTML = "<h2>You are learning querySelector method in js</h2>"

            var element;
            element = document.querySelector('#heading').getAttribute('class');
            console.log(element);
            element = document.querySelector('#heading').attributes[1].value;
            console.log(element);

            element = document.querySelector('#heading');
            console.log(element);



            /*
            QuerySelectorAll target All available object/attribnute of the elements.
            It work same like getElementsByClassName which return all element with
            same class names.
            */

            element = document.querySelectorAll('.title');
            console.log(element);

            element = document.querySelectorAll('ol');
            console.log(element);
            // now target single
            element = document.querySelectorAll('ol')[0].innerHTML;
            console.log(element);
            // target attribute with common class name but unique id
            element = document.querySelectorAll('#heading');
            console.log(element);
           
        </script>
    </body>
    </html>
Labels:

Comments

Post a Comment

Popular posts from this blog

Install MariaDB Latest Version 11.4 in Red Hat Version 9

 This this post i will show you step by step the installation process of mariaDB in red hat version 9. Step1 Run the command to pull the latest updated packages on applications installed in your system. -dnf update If you get Kernal update than reboot the system -reboot Step2 Go to official mariaDB site Make mariadb repository in /etc/yum.repos.d Place the configuration in this file # MariaDB 11.4 RedHatEnterpriseLinux repository list - created 2024-09-24 11:12 UTC # https://mariadb.org/download/ [mariadb] name = MariaDB # rpm.mariadb.org is a dynamic mirror if your preferred mirror goes offline. See https://mariadb.org/mirrorbits/ for details. # baseurl = https://rpm.mariadb.org/11.4/rhel/$releasever/$basearch baseurl = https://mirrors.aliyun.com/mariadb/yum/11.4/rhel/$releasever/$basearch # gpgkey = https://rpm.mariadb.org/RPM-GPG-KEY-MariaDB gpgkey = https://mirrors.aliyun.com/mariadb/yum/RPM-GPG-KEY-MariaDB gpgcheck = 1 Now install the mariaDB with its dependencies package...
Post a Comment
Read more

Redis installation in Red Hat Linux

 In this post we will see step by step installation of Redis service in Redhat/CentOS operation system. To install Redis, run this command in terminal -dnf install redis This command will install the redis service in your machine. Verify installation -systemctl status redis -systemctl start redis -systemctl enable redis Note: Before start redis service set Linux Kernal overcommit memory to 1 by adding vm.overcommit_memory = 1 to /etc/sysctl.conf file. Why we should do that: As we know redis is in memory data store. It primarily uses RAM to store data. Redis and other processes use RAM memory. We set vm.overcommit_memory = 1 to make sure Kernal not overcommit the memory by allocating memory to new program which required more memory than available memory. In this scenario OOM (Out Of Memory) killer terminate the rest of processes. We also restricting Kernal not to terminate the important services running and also stop swapping redis and other importance service to device i/o device,...
Post a Comment
Read more

MySQL course to learn queries to manage DBMS.

1. Create Table CREATE TABLE statement allows you to create new table in database. The example code is given below.  create table profile( id int, name varchar(50), birth_date date, phone varchar(12), gender varchar(1) ); Code language: SQL (Structured Query Language) ( sql ) 2. Insert data in table INSERT INTO statement is use to insert new record/data into table. INSERT INTO profile (id, name, birth_date, phone, gender) VALUES (2, "Zaib", "1996-03-15", "9238975404", "M"); Code language: SQL (Structured Query Language) ( sql ) 3. Insert multiple records at-once INSERT INTO state is use to insert multiple new record/data into table. INSERT INTO profile (id, name, birth_date, phone, gender) VALUES (1, "Usamn ali", "1990-08-26", "9238785094", "M", 18, "Karachi"), (2, "Aisha", "1997-06-12", "9238974468", "F", 19, "Lahore"), ...
Post a Comment
Read more