DOM \ Element

The DOM::Element (documentation) class corresponds to the Element native object, which has some simplifications as well as new APIs that differ from the native version:

• Has helper methods for position and size: top, left, width, etc..

• style works the same

• querySelector became find and querySelectorAll became find_all

  # Get the first span element
  div.find('span') # #<DOM::Element:0001>
  
  # Get all span elements
  div.find_all('span') # #<DOM::NodeList:0001>

• classList methods are separated into add_class, remove_class, has_class

• Attribute access is handled by [ ], removal is with remove_attribute and checking with attribute?

  # Set attribute data-test
  div['data-test'] = 'Test'
  
  # Get attribute data-test
  div['data-test'] # Test
  
  # hasAttribute
  div.attribute?('data-test') # true
  
  # removeAttribute
  div.remove_attribute('data-test')

• tag returns the lowercased tagName

• value, checked, disabled, focus, blur are the same

• innerHTML became html