Unhide hidden objects from a website

Question

I would like to make a javascript code that can unhide (reveal) some unhidden objects of a website.

Let me explain you more deeply. There is one box with some items inside. Lets say all the items that are being load to this box are 2000 but the website hide the 800. Could i do something to reveal them?

The code that the website use (as i can see in the "inspect element" of chrome) is the following

 <div class="_3hqu" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532">
 <table class="_2x_v uiGrid _51mz" cols="3" cellspacing="0" cellpadding="0" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0">
 <tbody data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0">
 <tr class="_51mx" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2">
 <td class="_51m- vMid" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$image">
 <div class="_4b2j" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$image.0">
 <img class="_2x_w img" src=" IMAGE LINK" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$image.0.0">
 </div>
 </td>
<td class="_2x_x _51m- vMid" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$text">
<div class="_2x_y" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$text.0">NAME</div>
<div class="_2x_z" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$text.1"></div>
<div class="_2x_z" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$text.2"></div>
</td>
<td class="_51mw _51m- vMid" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$widget">
<a aria-checked="true" aria-labelledby="100000533954532-name" aria-describedby="100000533954532-subtitle" class="_3hqy _3hqz" href="#" role="checkbox" tabindex="0" data-reactid=".ih.0.0.1.1.0.1.0.0.0.0.0.1:$100000533954532.0.0.$2.$widget.0">
</a>
</td>
</tr>
</tbody>
</table>
</div>

So this is the code for only one element. the $100000533954532 is the value of this element (without the $ )

and after 1200 of this elements with same code but different values there is this code that "hides" the other 800 elements.

<input type="hidden" name="at_limit" value="false" data-reactid=".ih.1">
<input type="hidden" name="session_id" value="1326941442" data-reactid=".ih.2">
<input type="hidden" name="profileChooserItems" value="{ "000001":1, "000002":1, etc...
 data-reactid=".ih.3">

Is it possible with javascript code to reveal the hidden values (elements) of this table???

Do you want to convert the inputs, type equals hidden, to divs and tables? — bloodyKnuckles, Mar 29 '15 at 11:02
@bloodyKnuckles exactly! so they can appear at the table as elements! — , Mar 29 '15 at 12:20
So how do the inputs (type hidden) map to the example div/table you provided? In other words, in the div/table, what is fixed, and what is variable, and where in the inputs do the variables get their values? — bloodyKnuckles, Mar 29 '15 at 12:25
You see on the hidden code in the last line there are some values (000001,000002 etc.) i want these values to appear to the table as in the example... to replace the values of the example in some words — , Mar 29 '15 at 12:35

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

what you need is remove property from collection of DOM elements try this:

document.querySelector('input[type="hidden"]').removeAttribute("type");

Example on JsFiddle

Similar question on StackOverflow

edited May 23 '17 at 10:27

Community

1
1

answered Mar 29 '15 at 11:06

last-indigo

198
1
5

when i paste your code in the console of chrome it says "undefined" – Mar 29 '15 at 12:21

score 0 · Answer 2 · answered Mar 29 '15 at 13:21

Here's a simple example of grabbing an input element and using the attributes and values contained therein to dynamically create a more complex set of HTML nodes:

JSFiddle it here.

<input type="hidden" name="at_limit" value="false" data-reactid=".ih.1">

<script>

var at_limit = document.querySelector('input[name="at_limit"]');
var reactid = at_limit.getAttribute('data-reactid');
var toggle = (at_limit.value === "true");

var div  = document.createElement("DIV");
var tbl  = document.createElement("TABLE");
var tbdy = document.createElement("TBODY");
var tr   = document.createElement("TR");
var td   = document.createElement("TD");
var anc  = document.createElement("A");
anc.href = "page.html?reactid=" + reactid;
anc.className = ( toggle )? 'yes': 'no';
var txt  = document.createTextNode(reactid);
anc.appendChild(txt);
td.appendChild(anc);
tr.appendChild(td);
tbdy.appendChild(tr);
tbl.appendChild(tbdy);
div.appendChild(tbl);
document.body.appendChild(div);

</script>

<style>
.no   { color: red; }
.yes  { color: green; }
table { border: solid blue 1px; }
</style>

That's the concept, now it's a matter of mapping the input elements to the targeted div/table structure.

this example is creating a new div etc? cant it be on the existing div table etc? — , Mar 29 '15 at 13:48
forget about last comment i didnt read on the last line thanks a lot. i will try this week your code and i will be back to accept your answer — , Mar 29 '15 at 14:18

Unhide hidden objects from a website

2 Answers2