TypeError: undefined is not a function on "indexOf"?

Question

Crawling my way through my DOM, I found this headscratcher:

I am evaluating an element with the following assignment:

if (e.container.context.classList.indexOf('editable-notes') == - 1) return;

My developer toolkit tells me this should work... I think. But it blows up with:

Uncaught TypeError: undefined is not a function.

...which seems odd to me. So I put a break point in, and I examine the values. e.container.context comes back as valid:

<td title class=​"truncate editable-notes k-edit-cell" role=​"gridcell" id=​"partner-list_active_cell" data-role=​"editable">​
<input class=​"k-textbox" data-val=​"true" data-val-length=​"The field Notes must be a string with a maximum length of 500." data-val-length-max=​"500" id=​"Notes" name=​"Notes" type=​"text" value data-bind=​"value:​Notes">​
<span class=​"field-validation-valid" data-valmsg-for=​"Notes" data-valmsg-replace=​"true" style=​"display:​ none;​">​</span>​
</td>

...so far, so good. e.container.context.classList also comes back with a valid value:

["truncate", "editable-notes", "k-edit-cell"]

...evaluation of e.container.context.classList.indexOf('editable-notes'), however, fails:

TypeError: undefined is not a function
message: "undefined is not a function"
stack: (...)
get stack: function () { [native code] }
set stack: function () { [native code] }
__proto__: Error

... so now I'm stumped. I thought indexOf was pretty much universally supported. Am I doing something dumb?

Answer 1

classList properties contain DOMTokenLists, which are not arrays and don’t have indexOf. What they do have is a method to do exactly what you need, but more straightforwardly:

if (!e.container.context.classList.contains('editable-notes'))
    return;