\
**Category:** Uncategorized\
**Created:** [August 1, 2017, 4:01am UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370 "2017-08-01T04:01:27Z")\
**Posts on this page:** 10\
**Page:** 1
**Author:**  [@midget2000x](https://discuss.emberjs.com/u/midget2000x)\
**Post date:** [August 1, 2017, 4:01am UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/1 "2017-08-01T04:01:27Z")
Not that it really matters that much, but I was curious if there was a way to access an HTML element in a component without using this.$()
Example:
```
export default Component.extend({
tagName: 'img',
attributeBindings: ['src'],
didInsertElement() {
let _this = this;
this.$().on('error', function() {
_this.set('src', missingImage);
});
},
willDestroyElement() {
this.$().off();
}
});
```
Like, how could I access the element with plain javascript?
---
**Author:**  [@martletandco](https://discuss.emberjs.com/u/martletandco)\
**Post date:** [August 1, 2017, 4:31am UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/2 "2017-08-01T04:31:12Z")
If you’re in a component you have access to it’s element via [`this.element`](https://www.emberjs.com/api/ember/2.14/classes/Ember.Component/properties/element?anchor=element). Be aware that this returns a plain DOM element, so you’ll need to use [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)/[removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) rather than `on`/`off` (which are jQuery methods)
You can also get the `elementId`
---
**Author:**  [@rzky](https://discuss.emberjs.com/u/rzky)\
**Post date:** [August 1, 2017, 10:50am UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/3 "2017-08-01T10:50:30Z")
i’ve been doing `document.querySelector()` and `document.querySelectorAll()` and it works just fine.
---
**Author:**  [@midget2000x](https://discuss.emberjs.com/u/midget2000x)\
**Post date:** [August 1, 2017, 4:05pm UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/4 "2017-08-01T16:05:07Z")
Interesting. So a no-jquery version of that code looks something like:
```
export default Component.extend({
tagName: 'img',
attributeBindings: ['src'],
didInsertElement() {
let _this = this;
_this.get('element').addEventListener("error", function(e) {
console.log("IMAGE ERROR,", e);
_this.set('src', missingImage);
});
},
willDestroyElement() {
console.log("destroying?");
this.get('element').removeEventListener("error", function() {
console.log("destroyed");
});
}
});
```
The `_this.get('element').addEventListener("error", function(e) {})` part works as expected. But I can’t quite figure out why the `this.get('element').removeEventListener("error", function() {})` part isn’t getting triggered.
I see “destroying?” in my console, but not “destroyed” when I transition out.
Mildly related, in situations where you’re dealing with the DOM in a component, is it recommended to wrap the dom-related code in a run loop? I’ve seen examples both with and without. It would see that if you’re doing it in `didInsertElement` you wouldn’t need it, but perhaps there is another reason it’s used.
---
**Author:**  [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\
**Post date:** [August 1, 2017, 7:02pm UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/5 "2017-08-01T19:02:15Z")
You are trying to remove an event listener that doesn’t exist. If you want to pass a function to removeEventListener, it has to be the exact function that you added. Not even one that has the same code, the exact same instance. That means you have to save it somewhere.
One note, you’re using `_this = this` a lot. You shouldn’t do that in ember, use arrow functions instead.
> [@midget2000x](#):
>
> Mildly related, in situations where you’re dealing with the DOM in a component, is it recommended to wrap the dom-related code in a run loop? I’ve seen examples both with and without. It would see that if you’re doing it in didInsertElement you wouldn’t need it, but perhaps there is another reason it’s used.
Generally, no you don’t.
---
**Author:**  [@midget2000x](https://discuss.emberjs.com/u/midget2000x)\
**Post date:** [August 2, 2017, 5:09am UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/6 "2017-08-02T05:09:26Z")
Cool, thanks for your help. Didn’t know that about arrow functions - that’s awesome!
---
**Author:**  [@keanedawg](https://discuss.emberjs.com/u/keanedawg)\
**Post date:** [August 2, 2017, 9:50pm UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/7 "2017-08-02T21:50:03Z")
Follow up question, what if you want to select an html element without being inside a component?
---
**Author:**  [@midget2000x](https://discuss.emberjs.com/u/midget2000x)\
**Post date:** [August 2, 2017, 10:44pm UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/8 "2017-08-02T22:44:06Z")
Do you mean like from a template, like application.hbs? If so…my guess is no because templates are backed by controllers which don’t have a lifecycle like a component does. But there may be a way I don’t know!
---
**Author:**  [@keanedawg](https://discuss.emberjs.com/u/keanedawg)\
**Post date:** [August 2, 2017, 10:55pm UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/9 "2017-08-02T22:55:02Z")
Yeah that’s what I meant. That’s too bad. I think I figured out a way to work around my problem though so it’s all good.
I’m just a bit surprised because I figured being able to select and change elements is crucial to having a dynamic website.
---
**Author:**  [@martletandco](https://discuss.emberjs.com/u/martletandco)\
**Post date:** [August 3, 2017, 11:56pm UTC](https://discuss.emberjs.com/t/getting-an-html-element-without-jquery-this/13370/10 "2017-08-03T23:56:56Z")
> [@keanedawg](#):
>
> I’m just a bit surprised because I figured being able to select and change elements is crucial to having a dynamic website.
A major benefit of using a framework such as Ember is to handle a large amount of the DOM interfacing detail so you can focus on the parts which make your application different. I’ve built a number of large Ember applications and the few times I need to access the DOM directly are with integrating 3rd party libs (that don’t already have [wrappers](https://www.emberaddons.com/)), changing classes outside the application container, and awkward animation scenarios (sticky menus which stack on other dynamic menus)
Try to model everything as a component and use the framework facilities. There is a learning curve but it’ll be worth it and there’s a helpful community to ease the journey. Ember already listens for a bunch of [events by default](https://guides.emberjs.com/v2.14.0/components/handling-events/#toc_event-names) in components for you
Any element access outside of a component I isolate to a service, that way if you want to utilise [FastBoot](http://ember-fastboot.com/) you have one place to prevent errant access to the DOM and provide defaults