I have received many questions about how to manipulate the Document Object Model (DOM) with JavaScript. In this tutorial I will focus on the many ways to do just that.
I’ll show you how to easily dramatically change your web pages the easy way using getElementById. I’ll then show you how to:
- Add Elements to a Web Page Dynamically
- Remove Elements
- Edit Child Elements
And, much much more….
All of the code used follows the video. if you have any questions or comments leave them below.
More Tutorials are Here Think Tank
Code From the Video
Watched this tutorial and decided to try it out. Can you tell me why this doesnt work:
function changeBorder(){
var node = document.getElementsByTagName(“p”).style.border=”2px dotted green”;
return true;
}
Your browser doesn’t support javascript.
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
It doesn’t work because Chrome/Firefox/Safari define borders like this “2px dotted green” while IE stores it as “green dotted 2px”.
It’s better to define a class and then search for that class.
.greenBox { border: 2px dotted green; }
document.getElementsByClassName(‘greenBox’)
If you ever have browser problems blame Internet Explorer 🙂 That’s why I use JQuery whenever possible because it is cross browser
Here is my JQuery Tutorial
Thanks
sorry the “var node” isnt supposed to be in the above code. It’s just that I was trying out different ways to make that function work but even if you delete “var node =” from above it still doesnt work.
Oh ok, I didn’t know IE handles the border styling differently. What about this though, I tried to create a function to append some stuff to all my paragraphs and it doesn’t work either:
Hey again Derek, hows it’s all sir? thanks to you and your blazing tutorials, I’m completely and slowly (because it’s hard for me) re-discovering programming again like did before in other times (I once became kinda decent in PHP this same way) and now I’m trying to get into javascript but I gotta say, I’m finding it, really hard.
But back to the subject.
What I asked in youtube is something about this void I have found in several tutorials that is how to work with the and tags.
What I need to do is the next thing for example:
select category
cars
trucks
select item
Problem 1: Remove tag atribute “disabled=disabled”. I actually have not found or maybe did not notice how to do it.
Problem 2: Populate the second with array values.
and come from the same bi-dimensional array. I wanted that once you select a cat in the first select, the second one get its “disabled” attribute removed so it becomes usable and the list gets filled with the second value in the array.
An example of how the array is, for example, would be like this:
var everything = Array[cat, items]
[cars, chevy]
[cars, mustang]
[trucks, toyota]
[cars, acura]
[cars, camaro]
[trucks, mitsubishi]
So if you select cars in you would get:
select item
chevy
mustang
acura
camaro
Thats more or less it. I hope you can help me throw in some code so I can dig it, learn it and throw it into my head’s SSD drive.
Thanks man, I apretiate your help.
You’ll probably like to do this with Jquery which is a JavaScript framework. It is easy to dynamically change the select options with jquery. I have a big tutorial on jquery on my site. I hope that helps
letme edit the post it had HTML tags on it.
Javascript Tutorials 5
Derek, with the things i’ve learned from the video i try something but don’t work:
function insertNodeValue()
{
var fNode = document.getElementById(“stNode”);
for (var i = 0; i < 3; i++)
{
var node[i] = prompt("insert value for node","");
node.childNodes[i].nodeValue = node[i];
}
for(var j = 0; j < 3; j++)
{
document.write(fNode.childNodes[j]);
}
return true;
}
In the body i have a div called fNode and 3 elements inside (,,)
i want to insert the value of the prompt();
Mr Banas,
For completeness you have forgotten the code of the function.
function addThese(a,b)
{
return a+b;
}
Thank you for pointing that out. I fixed it.