We Keep Coding

Select/Apply Styles to specific character with Javascript

When I write code instead of using camelCase or seperate_with_underscore I separate my class names with custom unicode chars. Such as this:
sideNavܢheaderܢtext
So if I have a class with a specific state modifier I will write it like so:
sideNavܢheaderܢtextᆞbold
These are not css selectors this is just my naming convention. Now for my question.
I am using the atom text editor and sometimes I want to be able to hide these special characters. I can use javascript to select things in Atom, but is it possible to use javascript to literally select a single character?
Then I can use that selection to apply a "display:none" style to it?
Like:
var a = document.getElementByChar("a");
a.style.display = "none";
Any help or ideas would be appreciated!
Update: I don't want to actually remove the characters. Just "hide" them from view. The naming convention I use is actually much more complex than this and I use these special characters to define all sorts of patterns in my document.
However sometimes I only care about certain selectors and I want the others to temporarily go away.

If I'm understanding your question correctly, in JavaScript you can:
Get the entire string from the className:
const string = document.querySelector(".sideNavܢheaderܢtext").textContent
Find the location of the character you want to modify. For example:
string.indexOf('a').
Wrap the character with a span (plenty of ways to do that - check out this one).
Add class to span and style with CSS.

I'm not familiar with Atom. Are each of these selectors within dom elements in Atom?
If all of your selectors existed within <span class="selector"> then you could do something like this...
$('span.selector').each(function(elm){
$(elm).text($(elm).text().split('ܢ').join('<b style="display:none;">ܢ</b>'));
});

Why does attribute casing change in the DOM vs source code?

I've found that when you try to get the original casing of an attribute name it always returns the name in all lowercase. Why does this happen and how can we get around this?
Please look at this easy example below. The source code shows that the second attribute of the input field is "SomeAttribute" when I grab the value of that attribute it is changed to "someattribute".
<input type="text" SomeAttribute="test" />
<script>
var attributeName = document.getElementsByTagName("input")[0].attributes[1].name;
alert(attributeName);
</script>

HTML attributes are case insensitive, so both will process the same by the browsers.
However, as written in W3C attribute page, "W3C recommends lowercase in HTML4, and demands lowercase for stricter document types like XHTML.".
To avoid further problems, use only lower case as the attributes name.

Is it bad form to use html class attribute as a variable

I am wondering if the html class attribute should only be used for styling. Is there any drawback to using the class attribute as a variable. The W3 spec http://www.w3.org/TR/html5/dom.html#classes does not specify one way or another but, all examples and training point in the direction of styling only for multiple objects.
In my case I want to use the class attribute as variable that matches the key value in a object array. For example in my Javascript code I have an object that has a number of key/value pairs. On my web app I have a number of save buttons. When a save button is clicked I grab the parents class attribute value and use it as the key for the object to know which value to change. The class attribute on the parent has not other value than to let me know which key value pair to change in my object

While I'm sure it's possible to use classes that way, it's certainly not their intended purpose. html has data attributes that provide the functionality you want, for example
<button data-key="some value" name="" id="">click me</button>
You can then get that value (onClick if you like) and use it as a key for your object/data structure. Theres a good overview here

While it is not bad, it neither is best practice.
You can, instead of using the class attribute, define explicit data attributes. Using the class attribute would mean that you could not use several classes (because that would be a weird key to search for in an object, right?).
For instance:
<div class="any classes you like" data-mykey="searchforthiskey">
<button></button>
</div>
In jQuery:
$('button').click(function() {
var key = $(this).closest('div').attr('data-mykey');
});

From a functional perspective, there's no reason to NOT use the class attribute to store information about that element. You can access a class attribute as easily as you can a data attribute.
From a standards perspective, it is probably better to use a data attribute. Why? Well, if you are the only person working on your front-end, no big deal. If you are one of many on a team of front-end developers, who works specifically on the javascript side of things, you may run into a conflict with another front-end developer who works on the HTML/CSS side of things. They may remove a class from the element, not realizing that its also being used as your javascript hook into that element. In that case, you're better off creating your own data attribute, which then makes it clear that this attribute is probably data related and won't be molested by someone just trying to fix the styling of that element.

JavaScript/CSS selector for attribute name pattern

Assuming I have the following markup
<div data-common-notcommon="anyValue">
<!-- Whatever.. -->
</div>
<div data-common-not-commonerthing="anyValue">
<!-- Whatever.. -->
</div>
I'm trying to write a JS selector (or a CSS selector, don't care for the difference..) to find attributes based on a common, partial attribute name.
I.E I want to find all the elements that start with data-common.
I can't find anything on Google for attribute name selectors but rather attribute value selectors which I don't really want to do.
<script>
document.querySelectorAll('[data-common]'); // []
document.querySelectorAll('[data-common*]'); // []
// etc..
</script>

Currently there are no selectors defined to partially match attribute names. What you're asking for doesn't exist.
For JavaScript you could filter a collection of elements using custom code (that is what jQuery does), but it will not work with document.querySelectorAll, nor can you define a custom selector for CSS, unless you're willing to suggest it on the w3c mailing list and deal with navigating the complex workflow that's involved in changing the CSS language.

How do you access a custom XHTML attribute with JavaScript?

I have the following XHTML:
<span id="myid" cus:att="myvalue" xmlns:cus="http://mycompany.com/customnamespace">
</span>
Is it possible to access custom attributes with javascript? I have the element that represents the span. Doing myElement.att doesn't work, and I can't figure out how to specify the namespace?

Normally speaking you can access it directly, i.e. element.attribute but the namespace slightly complicates this to:
element.getAttribute("namespace:attribute") //the nuclear x-browser option
so just to be really really clear, that'll be something like:
document.getElementById('myid').getAttribute('cus:att')

There is a special version of the getAttribute method specifically designed for accessing namespaced attributes: getAttributeNS. With your example XHTML, the following JavaScript code:
document.getElementById("myid").getAttributeNS("http://mycompany.com/customnamespace", "att");
...would return "myvalue".
You can read more about the getAttributeNS method here.
Steve