DOM property comparison for different browsers: What Works Where?
Posted by Manoj Garg on November 25, 2009
Today, I was working on a UI enhancement task where I had to do some DOM manipulation. Basically task was changing color of some SPAN elements in DOM depending on their value like if it’s value is XXX then show in RED color and so on. As always I was using IE to test my Java script code written to do the job. In JS code, I used “innerText” property of SPAN element to get the text of that element and then did the comparison to change the color and It worked fine. When I ran same JS code on Mozilla, it didn’t run (I mean it got executed but didn’t changed color of SPAN elements to RED L) . On debugging the script, I was surprised to see value of innerText property being returned null. When googled around it and found that only Mozilla doesn’t support this property L. Mozilla has another property “textContent” which has same value as innerText in other browsers.
Solution was simple, use an ORing of both the values instead of putting if-else block in code to use textContent if the user is running Mozilla or innerText for any other browser.
var txtName = clientNameElement.innerText || clientNameElement.textContent;
I picked up this solution from here. This link provides a good comparison of various DOM properties on different browsers that is what works and what not J.
Hope it helps some of you while writing code to cater to multiple browsers J