85

It's no problem to find an element by position and the position of an element in Javascript. But is there are general way to compare them?

The only way I could think of is comparing ids or classnames, but not all elements have ids or classnames.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
Bob
  • 999
  • 1
  • 9
  • 12
  • 1
    What does "equal" mean in your context, then, if not same id? Is it same element type? Or same content? Please expand your question a bit... – peirix Sep 06 '10 at 05:57
  • 1
    Compare what about them? Height, background-color, z-index? What are you looking to compare. – Robert Sep 06 '10 at 05:57
  • What do you mean "equal"? Do you mean when two variables point to the same element? Or do you mean that the two elements "looks the same". If so, you then need to define what it means to "look the same": does same xy position count, does the same transparency/opacity count, same text content? – slebetman Sep 06 '10 at 05:58
  • In fact, I want to compare if it is the same element two users click on. User A clicks on an element, I save position, id, class, whatever I could user to compare them. Then user B clicks on this element and I want to check if he clicked on the same element as user A. – Bob Sep 06 '10 at 06:00
  • The ID attribute should be unique for every element, so why not compare the ID? – Robert Sep 06 '10 at 06:15
  • Because not every element has an ID. Comparing the ID would be the easiest way, but what to do if the selected element doesn't have an ID? I'm searching for alternatives to checking the ID. – Bob Sep 06 '10 at 06:18

3 Answers3

69

In modern browsers there are two methods for comparing nodes.

var a = document.createElement('div');
var b = document.createElement('div');
b.isEqualNode(a); // true

but

b.isSameNode(a); //false

And as for IE, it's DOM elements have non-stanard attribute, uniqueID. But I can't imagine it can be useful in this case, since yes, you actually can compare two pointers.

shabunc
  • 23,119
  • 19
  • 77
  • 102
55

If you want to compare two element pointers for being the same element, just use the comparison operator. This can be easily proven because

document.body === document.body

For example, if I somehow had references to two elements I didn't know:

if (element1 === element2) ...
Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • @www139 - why is it recommend? please provide evidence – vsync May 17 '16 at 14:53
  • @vsync take a look at this question http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons and http://stackoverflow.com/questions/10679762/how-to-compare-two-html-elements – www139 May 18 '16 at 14:59
  • @www139 - the first link has no information regarding DOM element comparison and the second link has no information regarding `==` vs `===` when comparing DOM nodes. couldn't you just give an example instead of point to irrelevant links? – vsync May 18 '16 at 15:31
  • @vsync I remember someone telling me somewhere that it is recommended to use === vs == . I can't find any documentation as to why it would be better for node comparison, but numerous posts on this site alone suggest that it would be a good idea. === is a strict equality test while == is a looser equality test. I don't know any more specific information. This answer (http://stackoverflow.com/questions/11172506/comparing-a-dom-node-wih-a-dom-element) uses === but doesn't explain why this method is preferred, leaving me and the rest of the world wondering :) – www139 May 22 '16 at 15:39
  • @vsync According to this (http://appendto.com/2016/02/%3D%3D-vs.%3D%3D%3D-equality-in-javascript) == is loose comparison which ignores data type differences, i.e. '3' (string) is equal to 3 (integer) while === is a strict data type equality test. – www139 May 22 '16 at 15:43
  • 2
    @www139 - I am aware of the difference (after doing JS for 12 years), but I think that your first comment was out of place, since you "remember someone telling you somewhere.." without thorough understand of **why** it matters and how it related to this answer seems unprofessional. You still didn't explain why you think `===` is better than `==` in this specific case. – vsync May 22 '16 at 15:52
  • 1
    @vsync I think you are correct, sorry to bother people reading this discussion :) – www139 May 23 '16 at 03:15
  • @www139 Using === instead of == has absolutely no sense in this context. I'd suggest that you reflect this in your original comment. – jayarjo Oct 07 '16 at 06:02
2

=== Operator still relevant https://developer.mozilla.org/en-US/docs/Web/API/Node/isSameNode

Even if you make changes to the DOM, === operator works fine.

const body = document.body; body.setAttribute("test","done"); const _body = document.body; body === _body // true.

:).

JTJag
  • 3
  • 2
FATCHOLA
  • 393
  • 2
  • 4