In The Dom Are Node Ids Case Sensititve

In the DOM are node ids case sensititve?

Yes. It is case-sensitive. Attribute values are always case-sensitive. Different browsers seem to be doing different things though.

Handling document.getElementById is different across browsers:

Mozilla performs case-sensitive search.
Internet Explorer: IE 8 and later performs case-sensitive search, while IE 7 and earlier performs case-insensitive search.

Is case sensitive ID for IE avoidable if using YUI 2.8?

I made a quick test for this.

http://tivac.com/yui2/giulio_id.htm

document.getElementById is NOT case-sensitive in IE < 8. It should be, it is in every other browser.

YAHOO.util.Dom.get IS case-sensitive in all browsers.

Are class names in CSS selectors case sensitive?

CSS selectors are generally case-insensitive; this includes class and ID selectors.

But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5.¹

This is because the case-sensitivity of selectors is dependent on what the document language says:

All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language.

So, given an HTML element with a Selfcatering class but without a SelfCatering class, the selectors .Selfcatering and [class~="Selfcatering"] will match it, while the selectors .SelfCatering and [class~="SelfCatering"] would not.²

If the document type defined class names as case-insensitive, then you would have a match regardless.

¹ _{In quirks mode for all browsers, classes and IDs are case-insensitive. This means case-mismatching selectors will always match. This behavior is consistent across all browsers for legacy reasons, and is mentioned in this article.}

² _{For what it's worth, Selectors level 4 contains a proposed syntax for forcing a case-insensitive search on attribute values using [class~="Selfcatering" i] or [class~="SelfCatering" i]. Both selectors will match an HTML or XHTML element with either a Selfcatering class or a SelfCatering class (or, of course, both). However there is no such syntax for class or ID selectors (yet?), presumably because they carry different semantics from regular attribute selectors (which have no semantics associated with them), or because it's difficult to come up with a usable syntax.}

how to use ignorecase while matching two ids in js

Javascript string case-insensitive comparisons can be performed with
string.toUpperCase.

var x = document.getElementById('MY_DIV').name;
x = x.toUpperCase(); //use this line
    if (x == "STRING TO MATCH"){
    }

Referenced to tutorialsPoint Example for using ignoreCase property

<html>
<head>
<title>JavaScript RegExp ignoreCase Property</title>
</head>
<body>
<script type="text/javascript">
   var re = new RegExp( "string" );

   if ( re.ignoreCase ){
      document.write("Test1-ignoreCase property is set"); 
   }else{
     document.write("Test1-ignoreCase property is not set"); 
   }
   re = new RegExp( "string", "i" );

   if ( re.ignoreCase ){
      document.write("<br/>Test2-ignoreCase property is set"); 
   }else{
     document.write("<br/>Test2-ignoreCase property is not set"); 
   }
</script>
</body>
</html>

Output

Test1 - ignoreCase property is not set
Test2 - ignoreCase property is set

Code updated for D.K function

function myfunc()
{

    var x = document.getElementById('MY_DIV').name;
    //x = x.toUpperCase();   // check the result with / without un-commenting this line
    
    var re = new RegExp( x );

    if ( re.ignoreCase ){
      document.write("X - Test1-ignoreCase property is set"); 
    }else{
     document.write("X - Test1-ignoreCase property is not set"); 
    }
    re = new RegExp( x, "i" );

    if ( re.ignoreCase ){
      document.write("<br/> X - Test2-ignoreCase property is set"); 
    }else{
     document.write("<br/>X - Test2-ignoreCase property is not set"); 
    }
    x = x.toUpperCase();  // ignoring case
    document.getElementById(x).value=2;
   
}

how to allow to use case sensitive row ids in jqGrid

It seems for me as a bug in Internet Explorer. In the official Document Object Model HTML standard I could found the following description about the namedItem method intensively used by jqGrid:

This method retrieves a Node using a name. With [HTML 4.01] documents,
it first searches for a Node with a matching id attribute. If it
doesn't find one, it then searches for a Node with a matching name
attribute, but only on those elements that are allowed a name
attribute. With [XHTML 1.0] documents, this method only searches for
Nodes with a matching id attribute. This method is case insensitive in
HTML documents and case sensitive in XHTML documents.

So the namedItem method should works case sensitive in XHTML documents. On the other side like you can test in the demo, which use only pure DOM without jQuery or jqGrid, the method work case insensitive in Internet Explorer.

The HTML code of the demo is following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/questions/7230179/how-to-allow-to-use-case-sensitive-row-ids-in-jqgrid/7236985#7236985</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <table id="t">
        <tbody>
            <tr id="x"><td>1</td></tr>
            <tr id="X"><td>2</td></tr>
        </tbody>
    </table>
    <script type="text/javascript">
        'use strict';
        var mytable = document.getElementById("t"),
            tr1 = mytable.rows.namedItem("x"),
            tr2 = mytable.rows.namedItem("X"),
            tr3 = document.getElementById("x"),
            tr4 = document.getElementById("X");
        alert("getElementById works " + (tr3.id === tr4.id ? "case insensitive (BUG!!!)": "case sensitive") +
              "\nnamedItem works " + (tr1.id === tr2.id ? "case insensitive (BUG!!!)": "case sensitive"));
    </script>
</body>
</html>

The Internet Explorer shows that namedItem("X") returns the row with the id="x" instead of the row having id="X". The same bug not exist in all other (non-Microsoft) web browsers where I tested it.

I can't suggest you currently no workaround. You should just organize you program so that you will not use case sensitive ids inside of tables (and with jqGrid).

UPDATED: Just a little more additional information.

I made an official support request to Microsoft about the described subject. Microsoft confirmed that it was a bug in Internet Explorer, but the bug will be not fixed in the current Internet Explorer versions, but it will be probably fixed in IE10. As a workaround :-) it was suggested not to use ids which distinguish only in case. So just not use the ids which can reproduce the bug. So we have at the end results as I supposed before in my previously comments.

Nevertheless, because the response confirmed that it was a bug, the request to Microsoft was for free for me (:-)).

How can I set an Attribute with case-sensitive name in a javascript generated element

You need to create an actual svg element. When you do:

var svg = document.createElement('svg');

what you are actually getting is an HTML element named svg, not an SVG element. The key here is that SVG is not actually an HTML element at all, it is a foreign document root. To create an SVG element properly, you need to do

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

Specifically, this creates an XML element, rather than an HTML element. In the basic browser case,

document.createElement('div')

is the same as

document.createElementNS('http://www.w3.org/1999/xhtml', 'div');

This makes a big difference, because in HTML, attribute names are not case-sensitive, whereas in XML, they are. Also, if you were to append that SVG to the DOM, it would behave like a div since it is an unknown HTML element, rather than a real SVG element. An HTML parser is smart enough to create a foreign root node instead of an unknown HTML element, but your code is programmatic, so it can't do it automatically.

Make input fields case insensitive in JavaScript

Convert those values to be compared to lowercase so that case sensitivity is no longer an issue.

var search_code = document.getElementById('search_code');var insert_code = document.getElementById('insert_code');var result = document.getElementById('result');var button = document.getElementById('button');var audio = new Audio('sound.wav');

// respond to button clickbutton.onclick = function validate(e) {  e.preventDefault();
  // show verification result:  if (search_code.value.toLowerCase() == insert_code.value.toLowerCase()) {    result.textContent = 'code ok';    result.className = "ok";    audio.play();  } else {    result.textContent = 'code is not ok';    result.className = "not-ok";  }  // clear input when wrong:  if (search_code.value.toLowerCase() !== insert_code.value.toLowerCase()) {    insert_code.value = '';  }  return false;};
function clearField(input) {  input.value = "";};
$(document).ready(function() {  $('#search_code').bind("cut copy paste", function(e) {    e.preventDefault();  });});

<form>  <input type="text" name="search_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='introdu codul'" id="search_code" placeholder="introdu codul" autocomplete="off" value="" /><br/>  <input type="" name="insert_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='scaneaza codul'" id="insert_code" placeholder="scaneaza codul" autocomplete="off" value="" /><br/><br/>  <input type="submit" id="button" name="button" value="verifica COD" /></form>
<div id="result"></div>

In The Dom Are Node Ids Case Sensititve