diff --git a/JavaScript/Advance/DOM/3. DOM Elements/images/js-logo.png b/JavaScript/Advance/DOM/3. DOM Elements/images/js-logo.png new file mode 100644 index 0000000..4637ac9 Binary files /dev/null and b/JavaScript/Advance/DOM/3. DOM Elements/images/js-logo.png differ diff --git a/JavaScript/Advance/DOM/3. DOM Elements/index.html b/JavaScript/Advance/DOM/3. DOM Elements/index.html new file mode 100644 index 0000000..a672268 --- /dev/null +++ b/JavaScript/Advance/DOM/3. DOM Elements/index.html @@ -0,0 +1,43 @@ + + + + + + + + DOM Elements + + + + +

DOM Elements

+ +
+ +

Example One by id

+ +
+ +

Example One by className

+ +

+ +

Example One by tagName

+ +

+ +

Example One by CSS Selector

+ +

+ +

Example One by HTML Obeject Selector

+
+ First Name: Last Name:
+ +

+ +

+ + + + \ No newline at end of file diff --git a/JavaScript/Advance/DOM/3. DOM Elements/script.js b/JavaScript/Advance/DOM/3. DOM Elements/script.js new file mode 100644 index 0000000..5ec3cbc --- /dev/null +++ b/JavaScript/Advance/DOM/3. DOM Elements/script.js @@ -0,0 +1,58 @@ +// Elements in DOM +let textOne = document.getElementById('textOne'); + +function DisplayOne() { + textOne.innerHTML = ` +

Finding HTML ELements

+
  • Finding HTML Elements by id
  • +
  • Finding HTML Elements by className
  • +
  • Finding HTML Elements by tagName
  • +
  • Finding HTML Elements by CSS Selector
  • +
  • Finding HTML Elements by HTML Object Collection
  • +

    Below Example Getting Elements by id and CSS Selectors can be changed and displayed but getting element from className and tagName does not work properly

    + ` +} + +// Getting Element By Id + +let textTwo = document.getElementById('textTwo'); // --> Mostly Used + +function DisplayTwo() { + textTwo.innerHTML = "WE HAVE GOT THIS VALUE FROM id" +} + +// Getting Elements by className + +let textThree = document.getElementsByClassName("textThree"); // --> Not Used Mostly + +function DisplayThree() { + textThree.innerHTML = "WE HAVE GOT THIS VALUE FROM className"; +} + +// Getting Elements by tagName + +let textFour = document.getElementsByTagName('h3'); // Use Fewly + +function DisplayFour() { + textFour.innerHTML = "WE HAVE GOT THIS VALUE FROM tagName"; +} + +// Getting Elements by CSS Selector + +let textFive = document.querySelector('p.one'); + +function DisplayFive() { + textFive.innerHTML = "WE HAVE GOT THIS VALUE FROM CSS Selector"; +} + +// Getting Elements by Object Collections + +let form = document.forms["frm1"]; + +function DisplaySix() { + let text = ""; + for (let i = 0; i < form.length; i++) { + text += elements[i].value + "
    "; + } + form.innerHTML = text; +} \ No newline at end of file