Select elements which start with "data-" - javascript

How can I select with plan javascript or jQuery every element which has an attribute that starts with "data-"?
I've tried
$("[data-*"])
but it doesn't work.

Here is a non-JQuery function that will do what you need:
function getAllDataElements() {
//get all DOM elements
var elements = document.getElementsByTagName("*");
//array to store matches
var matches = [];
//loop each element
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
//get all attributes for the element and loop them
var attributes = element.attributes;
for (var j = 0; j < attributes.length; j++) {
//get the name of the attribute
var attr = attributes.item(j).nodeName;
//check if attibute name starts with "data-"
if (attr.indexOf("data-") == 0) {
matches.push(element); //add it to matches
}
}
}
return matches; //return results
}
Which can be used like so:
var results = getAllDataElements();
results.forEach(function (i) {
i.style.color = "#FF0000";
});
Here is a working example

Related

How to change the parameters of getElementById in a loop

I am working on a form, and I would like to reset the lines individually without using reset.
How to vary the values ​​of the attribute passed as parameter of the method getElementById in JavaScript using a loop?
Here is an example of my source code below:
<script>
var element = document.getElementById('#re');
element.addEventListener('click', function() {
document.getElementById("#id1").value = "";
document.getElementById("#id2").value = "";
document.getElementById("#id3").value = "";
});
</script>
Assuming your IDs have the format shown in your example:
for (var i = 1; i <= 3; i++) {
document.getElementById("id" + i).value = "";
}
If that's not the case but you know the ID of every element you can put all IDs in an array and use that:
var elementIds = ["id1", "id2", "id3"];
elementIds.forEach(function(id) {
document.getElementById(id).value = "";
});
Another solution is to give all the elements you want to reset a specific class and target that:
var elements = document.getElementsByClassName("resetable-element");
[].slice.call(elements).forEach(function(element) {
element.value = "";
});
Instead of using ids, you can loop through your inputs for example:
var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
For your simple example, you could loop through the values 1 - 3 (I assume the # in the ID is a typo?):
for(var i = 1; i <= 3; i++) {
document.getElementById('id' + i).value = '';
}
If you can identify the elements by something else, such as a class name, you might prefer to iterate over that:
var elements = document.querySelectorAll('.field');
Array.prototype.slice.call(elements).forEach(function(element) {
element.value = '';
});

Get own text content using pure javascript

I wan to collect all text from a list of elements obtains using
var elements =document.body.getElementsByTagName("*");
What I've done so far:
var text = '';
for (var i = 0; i < elements.length; i++) {
text = text + ' ' + elements[i].innerText
}
This will return duplicated text because it get the own text of each element plus its children's. I want to know if there is a way to get element's owntext using pure javasript?
I think the issue is that nested matching elements of a particular tag are being counted twice. The solution is to check if we've already visited a parent element and to skip the child if that's the case.
var text = '';
var visited = [];
for (var i = 0; i < elements.length; i++) {
var found = false;
for (var e = elements[i]; e != null; e = e.parentNode) {
if (visited.indexOf(e) > -1) {
found = true;
break;
}
}
if (!found) {
text = text + ' ' + elements[i].innerText;
visited.push(elements[i]);
}
}
http://jsfiddle.net/h8k0xx82/

Is it possible to delete/remove an entire "select" element, after you've emptied the options with .remove()?

Like, after you've emptied it with this:
var select = document.GetElementById("selector");
var length = select.options.length;
for (i = 0; i < length; i++) {
select.remove(select.options[i]);
}
Is it possible to remove the entire node by using:
select.parentNode.ChildNodes[1].remove();
afterwards, keeping in mind that I have the function remove() somewhere else, as followed:
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = 0, len = this.length; i < len; i++) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
This doesn't seem to work for me. I can empty the select, but not remove it.
Try this:
var select = document.getElementsByTagName('select')[0];
if (select.parentNode.removeNode)
select.parentNode.removeNode(select);
else
select.parentNode.removeChild(select);
Demo

How to transform form to array key value

How do I transform the form content into array key-value? This is one example that I tried:
function formToArray(){
var sAux=Array();
var frm = document.getElementById("formUsuario");
for (i = 0; i < frm.elements.length; i++) {
//next line dont work
sAux[frm.elements[i].name] = frm.elements[i].value;
}
alert(sAux);
}
You should use object instead of array.following should solve your problem.(assuming formUsuario is a form id). jsfiddle
function formToArray(){
var sAux={};
var frm = document.getElementById("formUsuario");
for (i = 0; i < frm.length; i++) {
//next line dont work
sAux[frm[i].name] = frm[i].value;
}
alert(sAux);
}

jQuery ":contains()" analog for pure JS

I'm writing a script for CasperJS. I need to click on the link that contains a span with "1". In jQuery can be used :contains('1'), but what the solution is for selectors in pure Javascript?
HTML: <a class="swchItem"><span>1</span></a><a class="swchItem"><span>2</span></a>
jQuery variant: $('a .swchItem span:contains("1")')
UPD CasperJS code:
casper.then(function () {
this.click('a .swchItem *select span with 1*')
})
Since 0.6.8, CasperJS offers XPath support, so you can write something like this:
var x = require('casper').selectXPath;
casper.then(function() {
this.click(x('//span[text()="1"]'))
})
Hope this helps.
Try the following. The difference between mine and gillesc's answer is I'm only getting a tags with the classname you specified, so if you have more a tags on the page without that class, you could have unexpected results with his answer. Here's mine:
var aTags = document.getElementsByTagName("a");
var matchingTag;
for (var i = 0; i < aTags.length; i++) {
if (aTags[i].className == "swchItem") {
for (var j = 0; j < aTags[i].childNodes.length; j++) {
if (aTags[i].childNodes[j].innerHTML == "1") {
matchingTag = aTags[i].childNodes[j];
}
}
}
}
var spans = document.getElementsByTagName('span'),
len = spans.length,
i = 0,
res = [];
for (; i < len; i++) {
if (spans.innerHTML == 1) res.push(spans[i]);
}
Is what you have to do unless the browser support native css queries.
jQuery is javascript. There are also a number of selector engines available as alternatives.
If you want to do it from scratch, you can use querySelectorAll and then look for appropriate content (assuming the content selector isn't implemented) and if that's not available, implement your own.
That would mean getting elements by tag name, filtering on the class, then looking for internal spans with matching content, so:
// Some helper functions
function hasClass(el, className) {
var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
return re.test(el.className);
}
function toArray(o) {
var a = [];
for (var i=0, iLen=o.length; i<iLen; i++) {
a[i] = o[i];
}
return a;
}
// Main function
function getEls() {
var result = [], node, nodes;
// Collect spans inside A elements with class swchItem
// Test for qsA support
if (document.querySelectorAll) {
nodes = document.querySelectorAll('a.swchItem span');
// Otherwise...
} else {
var as = document.getElementsByTagName('a');
nodes = [];
for (var i=0, iLen=as.length; i<iLen; i++) {
a = as[i];
if (hasClass(a, 'swchItem')) {
nodes = nodes.concat(toArray(a.getElementsByTagName('span')));
}
}
}
// Filter spans on content
for (var j=0, jLen=nodes.length; j<jLen; j++) {
node = nodes[j];
if ((node.textContent || node.innerHTML).match('1')) {
result.push(node);
}
}
return result;
}

Categories