Javascript DOM Element

Javascript examples for DOM:Element

  1. HOME
  2. Javascript
  3. DOM
  4. Element

Description

Click the following links for the tutorial for DOM and Element.

  1. Element clientHeight Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth, when we add a scrollbar to the element:
  2. Element clientHeight Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth:
  3. Element clientHeight Property
  4. Element classList Property - Toggle between classes to create a dropdown button:
  5. Element classList Property - Find out if an element has a "mystyle" class. If so, remove another class name:
  6. Element classList Property - Find out if an element has a "mystyle" class:
  7. Element classList Property - Get the first class name (index 0) of a <div> element:
  8. Element classList Property - Find out how many class names a <div> element has:


  9. Element classList Property - Get the class name(s) of a <div> element:
  10. Element classList Property - Toggle between two classes for a <div> element:
  11. Element classList Property - Remove multiple classes from a <div> element:
  12. Element classList Property - Remove a class from a <div> element:
  13. Element classList Property - Add multiple classes to a <div> element:
  14. Element classList Property
  15. Element children Property - Loop through all children of <body> and change their background color to red:
  16. Element children Property - Get the text of the third child element (index 2) of a <select> element:


  17. Element children Property - Change the background color of the second child element of a <div> element:
  18. Element children Property - Find out how many children a <div> element has:
  19. Element children Property
  20. Element childElementCount Property
  21. Element offsetWidth Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth, when we add a scrollbar to the element:
  22. Element offsetWidth Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth:
  23. Element offsetWidth Property
  24. Element offsetTop Property - Get the position of a a <div> element:
  25. Element offsetTop Property
  26. Element offsetParent Property
  27. Element offsetLeft Property - Get the position of a a <div> element:
  28. Element offsetLeft Property
  29. Element offsetHeight Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth, when we add a scrollbar to the element:
  30. Element offsetHeight Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth:
  31. Element offsetHeight Property
  32. Element nextElementSibling Property
  33. Element lastElementChild Property - Get the text of the last child element of a <select> element:
  34. Element lastElementChild Property - Get the tag name of the last child element of a <div> element:
  35. Element lastElementChild Property
  36. Element firstElementChild Property - Get the text of the first element node of a <select> element:
  37. Element firstElementChild Property - Get the tag name of the first child element of a <div> element:
  38. Element firstElementChild Property
  39. Element clientWidth Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth, when we add a scrollbar to the element:
  40. Element clientWidth Property - difference between clientHeight/clientWidth and offsetHeight/offsetWidth:
  41. Element clientWidth Property
  42. Element clientTop Property
  43. Element clientLeft Property - Get the border size for a <div> with scrollbar:
  44. Element clientLeft Property
  45. Element tagName Property - Using the tagName property together with the event.target property to find out which element triggered a specified event:
  46. Element tagName Property
  47. Element scrollWidth Property - Return the scrollHeight and scrollWidth of an element and then set its height and width to the values returned from scrollHeight and scrollWidth:
  48. Element scrollWidth Property - Using padding, border, scrollbar and margin to show how this affects the scrollWidth and scrollHeight property:
  49. Element scrollWidth Property
  50. Element scrollTop Property - Slide in an element when the user has scrolled down 350 pixels from the top of the page
  51. Element scrollTop Property - Toggle between class names on different scroll positions
  52. Element scrollTop Property - Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:
  53. Element scrollTop Property - Scroll the contents of a <div> element BY 50 pixels horizontally and 10 pixels vertically:
  54. Element scrollTop Property - Scroll the contents of a <div> element TO 50 pixels horizontally and 10 pixels vertically:
  55. Element scrollTop Property
  56. Element scrollLeft Property - Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:
  57. Element scrollLeft Property - Scroll the contents of a <div> element BY 50 pixels horizontally and 10 pixels vertically:
  58. Element scrollLeft Property - Scroll the contents of a <div> element TO 50 pixels horizontally and 10 pixels vertically:
  59. Element scrollLeft Property
  60. Element scrollHeight Property - Return the scrollHeight and scrollWidth of an element and then set its height and width to the values returned from scrollHeight and scrollWidth:
  61. Element scrollHeight Property - Using padding, border, scrollbar and margin to show how this affects the scrollWidth and scrollHeight property:
  62. Element scrollHeight Property
  63. Element previousElementSibling Property
  64. Element title Property - Change the title of a <p> element:
  65. Element title Property
  66. Element tabIndex Property - Get the tab order of the first <a> element (index 0) in the document:
  67. Element tabIndex Property
  68. Element style Property - Add a red color to an <h1> element:
  69. Element style Property - Get the value of a <p> element's top-border:
  70. Element style Property
  71. Element lang Property
  72. Element isContentEditable Property
  73. Element innerHTML Property - Change the HTML content, URL, and target of a link:
  74. Element innerHTML Property - Delete the HTML content of a <p> element with id="demo":
  75. Element innerHTML Property - Alert the HTML content of a <p> element with id="demo":
  76. Element innerHTML Property - Get the HTML content of a <ul> element with id="myList":
  77. Element innerHTML Property - Get the HTML content of a <p> element with id="myP":
  78. Element innerHTML Property
  79. Element id Property - If the first <div> element in the document has an id of "myDIV", change its font-size:
  80. Element id Property - Change the id of an element:
  81. Element id Property
  82. Element dir Property - Get the text direction of a <p> element:
  83. Element dir Property
  84. Element contentEditable Property - Toggle between the ability to edit the content of a <p> element:
  85. Element contentEditable Property - Find out if a <p> element is editable or not:
  86. Element contentEditable Property
  87. Element className Property - Toggle between class names on different scroll positions
  88. Element className Property - Toggle between two class names.
  89. Element className Property - check class name
  90. Element className Property - To add a class to an element, without overwriting existing values
  91. Element className Property - Overwriting an existing class name with a new one:
  92. Element className Property - Get the class names of an element with multiple classes:
  93. Element className Property - get the class name of an element:
  94. Element className Property - Get the class name of the first <div> element in the document
  95. Element className Property
  96. Element accessKey Property - Get the accesskey of a link:
  97. Element accessKey Property
  98. Element childNodes Property - Get the text of the third child node (index 2) of a <select> element:
  99. Element childNodes Property - Change the background color of the second child node (index 1) of a <div> element:
  100. Element childNodes Property - Find out how many child nodes a <div> element has:
  101. Element childNodes Property
  102. Element attributes Property - Loop through all attributes of an <img> element and output each attribute's name and value:
  103. Element attributes Property - Find out how many attributes an <img> element have:
  104. Element attributes Property - Get the name of a <button> element's second (index 1) attribute:
  105. Element attributes Property
  106. Element NodeList Property - Loop through the child nodes of <body> and output the node name of each child node:
  107. Element NodeList Property - Return the number of child nodes of the <body> element:
  108. Element NodeList Property - Loop through all <p> elements inside a <div> element, and change the background color of each <p>:
  109. Element NodeList Property - Find out how many <p> elements there are inside a <div> element:
  110. Element NodeList length Property
  111. Element textContent Property - differences between the textContent and innerHTML property:
  112. Element textContent Property - Get all the textual content of an <ul> element with id="myList":
  113. Element textContent Property - Change the textual content of a <p> element with id="myP":
  114. Element textContent Property
  115. Element previousSibling Property
  116. Element parentNode Property - Click on an element (<span>) to hide its parent node (<div>):
  117. Element parentNode Property
  118. Element parentElement Property - Click on an element (<span>) to hide its parent element (<div>):
  119. Element parentElement Property
  120. Element ownerDocument Property
  121. Element nodeValue Property - Get the node name, node value and the node type of the <div> element's first child node:
  122. Element nodeValue Property
  123. Element nodeName Property - Get the node name, node value and the node type of the <div> element's first child node:
  124. Element nodeName Property - Get the node types of the <body> element's child nodes:
  125. Element nodeName Property - Get the node type of the <body> element:
  126. Element nodeType Property
  127. Element nodeName Property - Get the node names of the <body> element's child nodes:
  128. Element nodeName Property - Get the node name of the <body> element:
  129. Element nodeName Property
  130. Element nextSibling Property
  131. Element namespaceURI Property
  132. Element setAttributeNode() Method - Set the href attribute node of a <a> element:
  133. Element setAttributeNode() Method
  134. Element setAttribute() Method - Find out if an <a> element has a target attribute. If so, change the value of the target attribute to "_self":
  135. Element setAttribute() Method - Add a href attribute with a value of "book2s.com" to an <a> element:
  136. Element setAttribute() Method - Change class attribute for h1
  137. Element setAttribute() Method
  138. Element scrollIntoView() Method
  139. Element removeEventListener() Method - If browsers do not support removeEventListener() method, use the detachEvent() method.
  140. Element removeEventListener() Method
  141. Element removeAttributeNode() Method
  142. Element removeAttribute() Method - Remove the href attribute from an <a> element:
  143. Element removeAttribute() Method
  144. Element querySelectorAll() Method - Set the background color of all <h2>, <div> and <span> elements
  145. Element querySelectorAll() Method - Set the border style of all <a> elements in a <div> element that have a "target" attribute:
  146. Element querySelectorAll() Method - Set the background color of all <p> elements in a <div> element:
  147. Element querySelectorAll() Method - Set the background color of all elements with class="example" in a <div> element:
  148. Element querySelectorAll() Method - Find out how many elements with class="example" there are in a <div> element
  149. Element querySelectorAll() Method - Get all <p> elements in a <div> with class="example", and set the background of the first <p> element:
  150. Element querySelectorAll() Method - Get all <p> elements inside a <div> element, and set the background color of the first <p> element (index 0):
  151. Element querySelectorAll() Method
  152. Element querySelector() Method - Use multiple selectors in querySelector()
  153. Element querySelector() Method - Add a red border to the first <a> element that has a target attribute inside a <div> element:
  154. Element querySelector() Method - Change the color of paragraph element in a <div> element:
  155. Element querySelector() Method - Change the text of the first <p> element with class="example" in a <div> element:
  156. Element querySelector() Method - Change the text of the first <p> element in a <div> element:
  157. Element querySelector() Method
  158. Element hasAttribute() Method
  159. Element getElementsByTagName() Method - Using the "*" parameter, Change the background color of all elements inside a <div> element:
  160. Element getElementsByTagName() Method - Change the background color of the fourth element (index 3) inside a <div> element:
  161. Element getElementsByTagName() Method - Change the background color of all <p> elements inside a <div> element:
  162. Element getElementsByTagName() Method - Change the background color of the second <p> element (index 1) inside a <div> element:
  163. Element getElementsByTagName() Method - Find out how many <p> elements there are inside a <div> element
  164. Element getElementsByTagName() Method
  165. Element getElementsByClassName() Method - Change the background color of all elements with class="child" inside of a <div> element:
  166. Element getElementsByClassName() Method - Change background color of the first element with both the "child" and "color" class
  167. Element getElementsByClassName() Method - Find out how many elements with class="child" there are inside of a <div> element
  168. Element getElementsByClassName() Method - Change the background color of the second element with class="child" inside of a <div> element:
  169. Element getElementsByClassName() Method
  170. Element getAttributeNode() Method - Get the value of the onclick attribute node of a <button> element:
  171. Element getAttributeNode() Method - Get the value of the target attribute node of an <a> element:
  172. Element getAttributeNode() Method
  173. Element getAttribute() Method - Get the value of the onclick event attribute of a <button> element:
  174. Element getAttribute() Method - Get the value of the target attribute of an <a> element:
  175. Element getAttribute() Method
  176. Element addEventListener() Method - If browsers that don't support addEventListener() method, use the attachEvent() method.
  177. Element addEventListener() Method - Use removeEventListener() method to remove an event handler attached with the addEventListener() method:
  178. Element addEventListener() Method - Using useCapture parameter to demonstrate the difference between bubbling and capturing:
  179. Element addEventListener() Method - Change the background color of a <button> element:
  180. Element addEventListener() Method - Pass parameter values when using the addEventListener() method
  181. Element addEventListener() Method - Add events of different types to the same element.
  182. Element addEventListener() Method - Add two click events on the same <button> element:
  183. Element addEventListener() Method - Execute a function when a user clicks on a <button> element:
  184. Element addEventListener() Method
  185. Element focus() Method - Give focus to a text field, immediately after the document window has been loaded:
  186. Element focus() Method - Give focus to a text field:
  187. Element focus() Method
  188. Element click() Method
  189. Element blur() Method - Remove focus from a text field:
  190. Element blur() Method
  191. Element item() Method - Loop through all elements with class="child" in a <div> element, and change their background color:
  192. Element item() Method - Get the HTML content of the first <p> element (index 0) inside a <div> element:
  193. Element item() Method - Use childNodes.item(index) to access child node
  194. Element item() Method - Use childNodes[index] to access child node
  195. Element item() Method
  196. Element replaceChild Method
  197. Element removeChild Method - Remove a <span> element from its parent and insert it to an <h1> element in another document:
  198. Element removeChild Method - Remove a <li> element from its parent, and insert it again:
  199. Element removeChild Method - Remove a <li> element with id="myLI" from its parent element
  200. Element removeChild Method - Remove all child nodes of a list:
  201. Element removeChild Method - Find out if a list has any child nodes. If so, remove its first child node (index 0):
  202. Element removeChild Method
  203. Element normalize Method
  204. Element isSameNode Method - Using the === operator to check if two nodes are the same node:
  205. Element isSameNode Method
  206. Element isEqualNode Method
  207. Element isDefaultNamespace Method
  208. Element insertBefore Method - Move a <li> element from one list to another:
  209. Element insertBefore Method
  210. Element hasChildNodes Method - Remove the first child node (index 0) inside an <ul> element, if the element has any child nodes:
  211. Element hasChildNodes Method
  212. Element hasAttributes Method
  213. Element contains() Method
  214. Element compareDocumentPosition Method
  215. Element cloneNode Method - Copy a <div> element, including all its attributes and child elements, and append it to the document:
  216. Element cloneNode Method
  217. Element appendChild() Method - Create a <p> element with some text and append it to the end of the document body:
  218. Element appendChild() Method - Create a <p> element and append it to a <div> element:
  219. Element appendChild() Method - Move a list item from one list to another:
  220. Element appendChild() Method