Here's some nice code, it works only in Netscape 6 and Internet Explorer 5.5 (somewhat). It's not really usefull, but more a demonstration of the W3C Level1 DOM. Trough the use of the IE DHTML DOM (introduced in IE4), it could be done easier, and it would have worked fine in IE4 even, but what's the fun in making webpages, if you dont get to make bleeding egde stuff? Some functions works fine in IE5.5, though it's a bit slow. Nothing here works in Opera 5, and lets not get started in Netscape 4. As for IE5 and 4, something might work in IE5, but I doubt it, and nothing should work at all in IE4.
Here below I fool around with a little piece of text in a paragraph. If you press the swap link, the content of the
paragraph is swapped (duh), pressing the "change alignment" will cause the text to fly across the screen, in that
you set the old "align" attribute of html to right/left, like so align="right/left". "View current style"
will display the paragraphs current styles, as assigned by me, when I wrote this. Pressing "change style" will give the paragraph
whatever style that you have written in the box, just beware that it has to be
real css, otherwise the changes will not work. But all styles WILL work.
Setting overflow:scroll; will in NS6 put scroll bars on the paragraph
Here I play with a piece of text, a paragraph
this is a paragraph, read it and weep!
Below here, I add new text to the page. Type in whatever you want in the box below, and press the "make new paragraph" link, and you'll see the goodies that DOM1 can offer. In the little box to the right, you can type the line number you wish to remove. Leave it blank, and it'll just removes the top most line.
make new paragraph remove paragraph
Following is a list of all the functions called on this pages, each has its own listing, and is explained below.
Ok, first we fecth the element we wish to manipulate, with the getElementById, then we access the firstChild node, which is the text field of the paragraph, we then acces this text with nodeValue, and then we change it, simple eh? Of course the whole thing is a conditional test, so that we swap the text, depending on the content of it.
function swap(){
var p = document.getElementById('mytxt');
p.firstChild.nodeValue=='this is a paragraph, read it and weep!'?
p.firstChild.nodeValue='hey there, this is some swapped content':
p.firstChild.nodeValue='this is a paragraph, read it and weep!';
}
First get the element, "mytxt", first we want to know what the current alignment is of the align attribute, we run a check for both right and Right, since IE and NS6 give different values, and Javascript is case sensitive. We fecth is by calling for getAttribute('align'), and then we set it with "setAttribute('align','left'), and we swap it accordingly.
function alignp(){
var p = document.getElementById('mytxt');
if ((p.getAttribute('align')=='Right')||(p.getAttribute('align')=='right')){
p.setAttribute('align','Left');
}
else{
p.setAttribute('align','Right');
}
}
This is more or less the same as the last function, except here the value of the attribute is rather comlpex, as we are talking about a whole style for the paragraph. we get the element, and then we set the value of the "style" attribute (the way of declaring inline styles) to the content of the text field, where a user can write any valid css.
function changeStyle(){
document.getElementById('mytxt').setAttribute('style',document.currStyles.writestyle.value);
}
Simple, just get the valye of the style attribute, see what it contains, and then write it to the form field.
function viewStyle(){
document.currStyles.writestyle.value=document.getElementById('mytxt').getAttribute('style');
}
First we make a new element, we want a paragraph, so we make a p element. Then we look for the "divforp" element, which is a div I made specificly to stuff the new p's into, we then stick make the new p a child of the div, with appendChild, this will stick the p into the very end of the div.
Then we find out what to write in the new paragraph, we either use a default txt, if the user has not written any or we use the entered txt, and then we also clear the text field.
Ok, then comes the real magic. first we make a new container for the txt we want to write, we call this mynewptxt (yeah, very inventive) what we then do is to acces the div again, since the new p we made has no ID, we have to go trough it's parent, remember how we made the new p a child of the div? we go like this then, getElement, the div, and then we say lastChild, which is the object we added in the first two lines of code, the appendChild method sticks the element onto the end, so we know that it is also the lastChild. and now we have the p itself, and then we add the text node we just made, and we make this a child of the p, which is the same as making the text node the actual content of the p element.
here we just add some styles to the p, just so it looks like the paragraph we used earlier. Just note that the adding of styles only works in NS6.
function makep(){
var d = document.getElementById('divforp')
var mynewp = document.createElement('P');
d.appendChild(mynewp);
txt = 'This is a new <p>, the p and the text have been generated dynamicly!';
if (!document.myform.yourtxt.value==''){
txt = document.myform.yourtxt.value;document.myform.yourtxt.value='';}
var mynewptxt = document.createTextNode(txt)
d.lastChild.appendChild(mynewptxt);
d.lastChild.setAttribute('style','background-color: white; color: black; padding: 5px;');
}
This function removes the last <p> element from the divforp. The first few lines are simply codes to see which line to
remove, so the user can choose which line to remove. The code makes a var called node, which is the node we wish to strip of something.
Then we call the removeChild method, and as the variable, the Child to be removed, we pass the nodes own childNodes array. As the number,
which is the item to be removed, we pass the number the user specified, or is the user didn't specify anything, we remove the first
item, which is the uppermost <p>.
Also note that I have a error handler tossed in, for the simple reason that this script isn't perfect. If a user writes a line number which doesn't exist (too high, negative value, whatever), it generates an error. by setting window.onerror = null; all error messeges are supressed.
function removep(){
window.onerror = null;
line = 0;
if (!document.myform.removeline.value==''){
templine = document.myform.removeline.value;
line = --templine}
var node = document.getElementById('divforp')
node.removeChild(node.childNodes[line]);
};
If you want, you can download the external javascript file, that is used on this site, it holds the same comments as above, and is basicly the same.
Well, when you want to switch the alignment of a paragraph, IE 5.5 reports the alignment as "right", while Mozilla says "Right", as long you take into considaration, this little thing (it bugged me for a hour), things will works smoothly.
Another idea is to use ALOT of alert boxes, while you explorer the HTML elements relationships with each other. Especially
Mozilla is a good browser, though it doesn't tell you about script errors, asking for fx alert(document.getElementById('divforp').childNodes[1])
will give you a box with the text [object HTMLParagraphElement], while IE 5.5 merely tells you that it is a [object].
Also of notice is that while I in the code have used padding:5px, as a short hand for padding-left:5px, padding-top:5px, padding-bottom:5px and padding-right:5px, when asked for the value of the style attribute, Mozilla/NS6 will tell you in the long way, with padding-left and so on. This doesn't work on IE5.5, as IE merely reports the attribute to be a [object]
Now go and read up on your homework. This isn't for the average home coder.