How to use getElementsByTagName Effeciently

Question

I'm currently using this bookmarklet to hide several random rows of a webpage:

(function () {
    document.getElementsByTagName("tr")[1].style.display = "none";
    document.getElementsByTagName("tr")[3].style.display = "none";
    document.getElementsByTagName("tr")[6].style.display = "none";
})();

Is it necessary to repeat

document.getElementsByTagName("tr")[].style.display = "none"

again and again or is there any way to simplify it ?
I mean to merge all these into a simple command like

document.getElementsByTagName("tr")[1,3,6].style.display = "none".

Is it possible?

Kindly provide me an example coding for above bookmarklet?

You can save the returned value in variable and then use the variable instead of calling the function over and over again. — Pointy, Mar 08 '17 at 16:06
Check: http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method/42379723#42379723 — kind user, Mar 08 '17 at 16:10
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — evolutionxbox, Mar 08 '17 at 16:14
@evolutionxbox: I don't see how that's a duplicate. The OP already knows that an indexed collection is returned. — , Mar 08 '17 at 16:31
There is almost certainly a better way to do whatever it is you are trying to do, most likely a more CSS-centric way. What is your goal? Do you want to hide the first three rows of some table? — , Mar 08 '17 at 16:32
@squint I think so because [this answer](http://stackoverflow.com/a/10693852/989920) shows how to use the HTMLCollection. All the OP need do is swap out the for loop variables. — evolutionxbox, Mar 08 '17 at 16:34
Please do not ask "is it possible?". Everything is possible--we are working with computers, which can be programmed. You probably meant to ask "is there a way to do this?". Also, you may want to look at how to use a dictionary or spellchecker (on your title) efficiently. Anyway, the answer to your question is to use the Programming 101 concept known as a "loop". — , Mar 12 '17 at 02:44

Peter Olson · Answer 1 · 2017-03-08T16:19:17.120

1

Sure, you can store the trs in a variable:

var trs = document.getElementsByTagName("tr");

Then you can loop through the trs 1 through 3.

for(var i = 1; i <= 3; i++) {
  trs[i].style.display = "none";
}

Alternately, you can use Array.prototype.slice to select a range of trs.

Array.prototype.slice.call(trs, 1, 4).forEach(function(tr) {
  tr.style.display = "none";
});

edited Mar 08 '17 at 16:19

answered Mar 08 '17 at 16:09

Peter Olson

139,199
49
202
242

1

Unless something has changed, you can't slice `trs` directly. You'll need to borrow `Array.prototype.slice`. – Mar 08 '17 at 16:13
...however, modern implementations seem to be adding `.forEach()` directly, so you could compare the index inside the callback as an alternative. – Mar 08 '17 at 16:15
This is technically speaking a good answer to the question, but it's almost never necessary to loop over something and set styles explicitly like this. CSS can handle almost all such cases, and we could tell the OP how to do that if he told us what his actual problem is. – Mar 08 '17 at 16:33

score 0 · Answer 2 · answered Mar 08 '17 at 16:18

0

Try this one

var rows= document.getElementsByTagName("tr")
Array.from(rows).forEach(v => v.style.display = 'none');

answered Mar 08 '17 at 16:18

Banshi Lal Dangi

655
3
11

score -2 · Answer 3 · edited Mar 12 '17 at 02:44

-2

Use a for loop or foreach loop.

var temp = document.getElementsByTagName("tr");
for(var i = 0; i < temp.length; i++){
    temp[i].style.display = "none";
}

or

var temp = document.getElementsByTagName("tr");
temp.forEach(element => element.style.display = "none");

Can be put into

document.getElementsByTagName("tr").forEach(element => element.style.display = "none");

edited Mar 12 '17 at 02:44

answered Mar 08 '17 at 16:09

broodjetom

276
1
11

That's not your question. You want to do one thing for every element without repeating. – broodjetom Mar 08 '17 at 16:10
A table row doesn't have a prototype method `doSomething()`. your code will simply throw an error – baao Mar 08 '17 at 16:11
1

And now your answer is getting insanely wrong. foreach = forEach, and a htmlCollection doesn't have this prototype – baao Mar 08 '17 at 16:12
Man, serious? You have to fill that in yourself. Something like `row.style.display = "none"` – broodjetom Mar 08 '17 at 16:13
Do you really want me to change it? – broodjetom Mar 08 '17 at 16:13
2

Your answer is completely wrong. Yes you should change it, did you try to run this code? – baao Mar 08 '17 at 16:14
@MadhusoodanP: There really is quite a lot wrong with this. `foreach`, `documetn`, declaring with `int`, and not targeting the subset of elements described in the question for starters. I'd be curious to know why the positive points. – Mar 08 '17 at 16:19

How to use getElementsByTagName Effeciently

3 Answers3