document.getElementsBy "shorthand"?

[Former Member]

Instead of:

<script>
document.getElementsByTagName('br")[0].style.display="none"
document.getElementsByTagName('br")[1].style.display="none"
document.getElementsByTagName('br")[2].style.display="none"
document.getElementsByTagName('br")[3].style.display="none"
</script>

is there a short hand method for this?

maybe something like:

<script>
document.getElementsByTagName('br")
[0,1,2,3].style.display="none"
</script>


Edit:
I found a way to loop it:

<script>
br= document.getElementsByTagName("br")
for(i=3;i<br.length;i--){
br.style.display="none"}
</script>

but still curious if there is a shorthand

Also is the loop 'as I have it wrote' efficient?

[RedBassett]

Or learn JQuery:

$('br').hide();

;D

[Former Member]

3 questions:

Is JQuery as easy as Javascript to learn?
and
Can JQuery be used with javascript"
and
That looks like it would alter every br on the forum, would it?
Because I was trying to target the first 4.

[RedBassett]

1) JQuery is actually javascript, so no new langauge, just a lot of functions and a little syntax.

2) See above.

3) The example I gave would target all BRs (I was highlighting it's ease of use), however selecting only some is easy:

$('br').slice(0,5).hide();

[coolcoolcool]

It's fair to note that JQuery is a fairly large library. Most modern browsers can load it quickly, but if you're not using it for a javascript intensive project, it's generally not a good idea to use it.

Something interesting you might not know about getElementsByTagName is that it doesn't return an array, even though it seems to. What it actually returns is a collection called a NodeList. That means you can't use array methods on it, such as slice. It actually only has one method in the entire class, which is .item() and it returns a singular element. One possible way of fixing this that you may be able to think of is extending the object using .prototype or possibly creating another class that works with NodeLists. However, extending nodelist directly is extremely dangerous unless you have very good reason to do so (I can't think of any), especially in IE. The actual reasons for why it's dangerous are out of the scope of what we're doing here, but if you're interested there's a good article here.

So that leaves either creating a function that does the work for you or just doing it the long way. Most of the time creating a function for little things like this ends up doing more harm than good, because you have to design your functions to behave correctly for the many different cases that could be presented to them, so it's actually better to just do it the long way. For example, say you wanted to make a function called createElementWithAttributes() and you passed an object of paramaters and a type to it like so createElementWithAttributes({type: "img", alt: "blah"}) and inside the function you loop with for(arg in arguments) and you handle creating the element and returning it. You start thinking, wow, this is kind of useful. Now lets make a div that floats left and has margin 10px 20px 30px 40px.

Sh1tt.

But that uses .style.margin which requires a case check.

And then you keep finding problems as you program and eventually that little useful function turns into a massive, ugly, barely used piece of code, so it wasn't even worth doing it in the first place.

That's why I tend to keep it simple. If I really need a library, I use one. If I don't I write simple functions where they're required, but for the most part I keep it simple and make the code work.

Bit of a rant, but long story short, javascript is beefy.

[Former Member]

Jul 27, 2012 20:43:19 GMT -8 coolcoolcool said:

It's fair to note that JQuery is a fairly large library. Most modern browsers can load it quickly, but if you're not using it for a javascript intensive project, it's generally not a good idea to use it.

Something interesting you might not know about getElementsByTagName is that it doesn't return an array, even though it seems to. What it actually returns is a collection called a NodeList. That means you can't use array methods on it, such as slice. It actually only has one method in the entire class, which is .item() and it returns a singular element. One possible way of fixing this that you may be able to think of is extending the object using .prototype or possibly creating another class that works with NodeLists. However, extending nodelist directly is extremely dangerous unless you have very good reason to do so (I can't think of any), especially in IE. The actual reasons for why it's dangerous are out of the scope of what we're doing here, but if you're interested there's a good article here.

So that leaves either creating a function that does the work for you or just doing it the long way. Most of the time creating a function for little things like this ends up doing more harm than good, because you have to design your functions to behave correctly for the many different cases that could be presented to them, so it's actually better to just do it the long way. For example, say you wanted to make a function called createElementWithAttributes() and you passed an object of paramaters and a type to it like so createElementWithAttributes({type: "img", alt: "blah"}) and inside the function you loop with for(arg in arguments) and you handle creating the element and returning it. You start thinking, wow, this is kind of useful. Now lets make a div that floats left and has margin 10px 20px 30px 40px.

Sh1tt.

But that uses .style.margin which requires a case check.

And then you keep finding problems as you program and eventually that little useful function turns into a massive, ugly, barely used piece of code, so it wasn't even worth doing it in the first place.

That's why I tend to keep it simple. If I really need a library, I use one. If I don't I write simple functions where they're required, but for the most part I keep it simple and make the code work.

Bit of a rant, but long story short, javascript is beefy.

OK, well that is good to know because I would much rather "keep it simple".

There just seems to be an unofficial rule for Javascript, "The longer the code, the longer the load". Ha, I just made that up ... catchy
But in all seriousness, that is what I have come to believe due to all of the aticles that I have read and things of that nature.

That is why I was looking for a "shorthand" code.

I'm relieved to know that "keeping it simple" is a good practice for Javascript.

Thanks as always cool

[James [a_leon]]

Jul 27, 2012 20:43:19 GMT -8 coolcoolcool said:

It's fair to note that JQuery is a fairly large library. Most modern browsers can load it quickly, but if you're not using it for a javascript intensive project, it's generally not a good idea to use it.

Something interesting you might not know about getElementsByTagName is that it doesn't return an array, even though it seems to. What it actually returns is a collection called a NodeList. That means you can't use array methods on it, such as slice. It actually only has one method in the entire class, which is .item() and it returns a singular element. One possible way of fixing this that you may be able to think of is extending the object using .prototype or possibly creating another class that works with NodeLists. However, extending nodelist directly is extremely dangerous unless you have very good reason to do so (I can't think of any), especially in IE. The actual reasons for why it's dangerous are out of the scope of what we're doing here, but if you're interested there's a good article here.

So that leaves either creating a function that does the work for you or just doing it the long way. Most of the time creating a function for little things like this ends up doing more harm than good, because you have to design your functions to behave correctly for the many different cases that could be presented to them, so it's actually better to just do it the long way. For example, say you wanted to make a function called createElementWithAttributes() and you passed an object of paramaters and a type to it like so createElementWithAttributes({type: "img", alt: "blah"}) and inside the function you loop with for(arg in arguments) and you handle creating the element and returning it. You start thinking, wow, this is kind of useful. Now lets make a div that floats left and has margin 10px 20px 30px 40px.

Sh1tt.

But that uses .style.margin which requires a case check.

And then you keep finding problems as you program and eventually that little useful function turns into a massive, ugly, barely used piece of code, so it wasn't even worth doing it in the first place.

That's why I tend to keep it simple. If I really need a library, I use one. If I don't I write simple functions where they're required, but for the most part I keep it simple and make the code work.

Bit of a rant, but long story short, javascript is beefy.

It isn't that bad or ugly, I did it when coding for SSD.

function createElem(elem, isNew, AttObj) {
   if (isNew)
      elem = document.createElement(elem);

   if (AttObj) {
      for (key in AttObj) {
         if (key == "style") {
            for(a in AttObj[key]) {
               elem.style = AttObj[key];
            }
         } else {
            for(a in AttObj[key]) {
               elem.setAttribute(a, AttObj[key]);
            }
         }
      }
   }
   if (isNew)
      return elem;
}

And using it in code was something along these lines (for style and for non style attirbutes).

var boxDiv = createElem("div", 1, {
   style: {
      styleFloat: "right",
      cssFloat: "right",
      width: "6px",
      height: "6px",
      margin: "1px",
      backgroundColor: "#" + HexArr[h]
   },
   set: {
      id: HexArr[h]
   }
});

Now, it's totally useless for a small bit of coding, but it'd be handy for a larger project, and even allows for you to add attributes to existing objects using this method.

[coolcoolcool]

Yeah, I did something similar for some heavy scripting I was doing on project I was working on as well.

I was more trying to put forward the point that custom functions can get complicated and more often than not it's just extra trouble and lines of code for nothing.

This is what I used (basically the same thing):


var createElementWithArgs = function(type, attributes)
{
var elem = document.createElement(type);
if(elem)
{
for(var attribute in attributes)
{
if(attribute != "style")
elem.setAttribute(attribute,attributes[attribute]);
else
{
//style changes in an array of rotating attribute,value,attribute,value..
for(var i = 0; i < attributes[attribute].length; i+=2)
elem.style[attributes[attribute][i]] = attributes[attribute][i+1];
}
}
}
return elem;
};


We can do all kinds of abstractions like this though and (like you said) at the end of the day most proboards related scripts don't require anything like this.

[James [a_leon]]

Jul 28, 2012 6:52:37 GMT -8 coolcoolcool said:

Yeah, I did something similar for some heavy scripting I was doing on project I was working on as well.

I was more trying to put forward the point that custom functions can get complicated and more often than not it's just extra trouble and lines of code for nothing.

This is what I used (basically the same thing):


var createElementWithArgs = function(type, attributes)
{
var elem = document.createElement(type);
if(elem)
{
for(var attribute in attributes)
{
if(attribute != "style")
elem.setAttribute(attribute,attributes[attribute]);
else
{
//style changes in an array of rotating attribute,value,attribute,value..
for(var i = 0; i < attributes[attribute].length; i+=2)
elem.style[attributes[attribute][i]] = attributes[attribute][i+1];
}
}
}
return elem;
};


We can do all kinds of abstractions like this though and (like you said) at the end of the day most proboards related scripts don't require anything like this.

It's often not worth it for the code you're working on, but I think the experience of thinking through the cases is important. Then learning how many things can break something that you thought would be simple. It forces you to think of more things upfront in the future, you know?

Also, mine's more versatile, so nyeh.

[coolcoolcool]

Haha, plus my if(elem) probably isn't really necessary either.

Most of the projects I work on already has JQuery loaded in by default though, so I rarely have this problem. This was just me getting frustrated with having to repeatedly create and append elements in this one piece of code I was working on.

And ahh, I miss SSD.

[Bennett 🚀]

Jul 27, 2012 5:15:04 GMT -8 RedBassett said:

Or learn JQuery:

$('<br>').hide();

;D

Since when is "<br>" a valid selector? It should be

$("br").hide();

[RedBassett]

Jul 31, 2012 22:01:52 GMT -8 Bennett 🚀 said:

Jul 27, 2012 5:15:04 GMT -8 RedBassett said:

Or learn JQuery:

$('<br>').hide();

;D

Since when is "<br>" a valid selector? It should be

$("br").hide();

Thanks, I switched selector and element creator for some reason.

[Bennett 🚀]

Aug 1, 2012 8:56:24 GMT -8 RedBassett said:

Jul 31, 2012 22:01:52 GMT -8 Bennett 🚀 said:

Since when is "<br>" a valid selector? It should be

$("br").hide();

Thanks, I switched selector and element creator for some reason.

Element creator? Something like append or prepend? I wouldn't quite call it an element creator. It's a DOM manipulator.

[coolcoolcool]

Looks like a simple mistype to me.

Jquery is just a syntax you have to learn. I think we all got the idea of what bassett was saying.

[Former Member]

;D