diff --git a/README.md b/README.md
index 954928e..acbca4f 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,7 @@ const steps = [
     intro: 'test 2',
   },
   {
-    element: '.selector3',
+    element: document.querySelectorAll('.selector3')[0],
     intro: 'test 3',
   },
 ];
@@ -105,7 +105,7 @@ const steps = [
 
 | Name | Description | Type | Required |
 | --- | --- | :---: | :---: |
-| `element` | CSS selector to use for the step. | String | |
+| `element` | CSS selector to use for the step or DOM element | String or DOM element | |
 | `intro` | The tooltip text. | String | ✅ |
 | `position` | Position of the tooltip. | String | |
 | `tooltipClass` | CSS class of the tooltip. | String | |
diff --git a/src/components/Steps/index.js b/src/components/Steps/index.js
index 8e4ac5c..c029dd1 100644
--- a/src/components/Steps/index.js
+++ b/src/components/Steps/index.js
@@ -18,7 +18,7 @@ export default class Steps extends Component {
     initialStep: PropTypes.number.isRequired,
     steps: PropTypes.arrayOf(
       PropTypes.shape({
-        element: PropTypes.string,
+        element: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),
         intro: PropTypes.string.isRequired,
         position: introJsPropTypes.tooltipPosition,
         tooltipClass: PropTypes.string,
@@ -204,7 +204,13 @@ export default class Steps extends Component {
    * @param  {number} stepIndex - The index of the step to update.
    */
   updateStepElement = stepIndex => {
-    const element = document.querySelector(this.introJs._options.steps[stepIndex].element);
+    let element;
+
+    if (typeof this.introJs._options.steps[stepIndex].element === 'string') {
+      element = document.querySelector(this.introJs._options.steps[stepIndex].element);
+    } else {
+      element = this.introJs._options.steps[stepIndex].element;
+    }
 
     if (element) {
       this.introJs._introItems[stepIndex].element = element;
diff --git a/src/components/Steps/index.test.js b/src/components/Steps/index.test.js
index 38e487f..f9241c7 100644
--- a/src/components/Steps/index.test.js
+++ b/src/components/Steps/index.test.js
@@ -15,6 +15,10 @@ const steps = [
     element: '.test',
     intro: 'test',
   },
+  {
+    element: document.createElement('div'),
+    intro: 'test',
+  },
 ];
 
 describe('Steps', () => {
@@ -313,7 +317,7 @@ describe('Steps', () => {
     expect(wrapper.instance().introJs._introItems[0].element).not.toEqual(expect.any(HTMLDivElement));
   });
 
-  test('should update the element if it does exist when calling updateStepElement()', () => {
+  test('should update the element if it does exist when calling updateStepElement() for selector', () => {
     const wrapper = shallow(<Steps initialStep={0} steps={steps} onExit={() => {}} />, {
       lifecycleExperimental: true,
     });
@@ -327,4 +331,18 @@ describe('Steps', () => {
 
     expect(wrapper.instance().introJs._introItems[0].element).toEqual(expect.any(HTMLDivElement));
   });
+
+  test('should update the element if it does exist when calling updateStepElement() for DOM element', () => {
+    const wrapper = shallow(<Steps initialStep={0} steps={steps} onExit={() => {}} />, {
+      lifecycleExperimental: true,
+    });
+    wrapper.setProps({ enabled: true });
+
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    wrapper.instance().updateStepElement(0);
+
+    expect(wrapper.instance().introJs._introItems[0].element).toEqual(expect.any(HTMLDivElement));
+  });
 });