Cross browser navigation of DOM elements in Javascript

Question

A teammate of mine wrote some code about a short time ago which navigated about the DOM elements in out HTML page to pre-fill some fields in a modal based on the already existing data in an object (the modal allowed a user to edit that data). The items are generated generically from a database table.

function showModal(editImage) {
    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0];
    var nameAndTitle = editImage.srcElement.parentElement.innerHTML;
    var parent = editImage.srcElement.parentElement.parentElement;
    etc....

The problem is, they only tested that it worked in Chrome. The code never worked in firefox, it seems. When I try to open one of the modals in firefox, I get the console output "TypeError: editImage.srcElement is undefined"

My question is, is there a more "correct" way to access this data that will work for any browser, or do I need to check what browser I am in and access that information in a different way depending on the browser being used?

Answer 1

Your immediate answer is: change srcElement to target. The Mozilla Developer Network is a very good (one of many) resource to check for standards compliance. A visit to their site for srcElement indicates that it is non-standard and makes the suggestion on the correct way (target).

Unfortunately, even APIs that are standard don't always work in all browsers. Usually, parts of a standard are implemented piecemail. Checking with authoritative sources is vital to know what is supported where.

Other resources:

• The World Wide Web Consortium (W3C) for HTML, CSS, XML and many others
• The European Computer Manufacturer's Association (ECMA) for JavaScript
• CanIUse.com Good for quick compatibility compliance checking

As for your explicit question:

"My question is, is there a more "correct" way to access this data that will work for any browser, or do I need to check what browser I am in and access that information in a different way depending on the browser being used?"

Use standards and check for support (via the resources I've provided above) to have the best chance at cross-browser code.

DO NOT write code that checks the browser type and version to see if your code will run (browser detection) because:

1. There are too many browsers and too many versions - this sucks!
2. Browsers can and will lie to you about what they are!

Use "feature detection" when in doubt. Feature detection is code that evaluates whether a feature exists and uses it if it does. If it doesn't a fallback is provided. Here's a very common one for IE8 (and lower) browsers that did not yet support the W3C standard for event handling:

// Here we are attempting to obtain the value of the 
// addEventListener property of the window object.
// IE 8 doesn't implement this property so "undefined"
// will be returned. But, because we are attempting to
// use the  value as the condition of an if/then construct
// "undefined" will be converted to a boolean. "undefined"
// is a "falsey" value, so it will convert to false. 
// This means that if the else portion of our construct
// is reached, we have a browser that doesn't support
// addEventListener
if(window.addEventListener){
   // W3C standards are supported - do things the standard way
   obj.addEventListener("click", someFunction, capture);
} else {
   // Must be IE 8 or less - do things the IE way
   obj.attachEvent("onclick", someFunction);
}

This is but one way to use feature detection, but it typically hinges on converting a value to a boolean. See more on it here.

Answer 2

That function showModal is probably an event listener, so the argument editImage is actually an Event object.

As such, the actual property that reports the source of the event - and the only one supported by Firefox - is target, while srcElement is a legacy property that was created by Microsoft and Webkit/Blink based browsers kept supporting it for compatibility. But not Firefox.

In short: use target or, if you need to support older version of Internet Explorer, try with (editImage.target || editImage.srcElement).

Answer 3

srcElement is from IE. The standard property is target.

You should do this:

var target = editImage.srcElement || editImage.target;