PDA

View Full Version : Manipulating DOM newb

Jaxyral
04-19-2010, 10:13 PM
So it's been about a year since i did javascript and am doing some simple things to try and remember it again, I have never really used the DOM before either and this is where I am starting.

Here is my HTML page for now. I am trying to toggle between styles but i can only change the p[1] to toggle. p[0] toggles on the first click then stops toggling after. I do plan on making more styles so each p[1] p[0] h1 need to be accessed separately
.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>StyledDOM-v2</title>

<link rel="stylesheet" type="text/css" href="../css/styledDOM.css" />

</head>

<script type="application/javascript" src="../js/styledDOM.js"></script>

</head>

<body>

<h1 class="normal">Awesome</h1>

<p class="normal">Not as awesome as /..</p>

<p class="normal">Not as awesome as /.. or ../..</p>

<button onclick="toggleStyles()">Toggle Styles</button>
</body>
</html>

<body>
</body>
</html>


Here is the Javascript code



function toggleStyles() {

var h1 = document.getElementsByTagName("h1")[0];
var p0 = document.getElementsByTagName("p")[0];
var p1 = document.getElementsByTagName("p")[1];


p0.className = (p0.classname == "styled") ? "normal" : "styled";
p1.className = (p1.className == "styled") ? "normal" : "styled";

}



Here is the stylesheet



@charset "UTF-8";

.normal {

color: #008000;

font-style: normal;

font-weight: normal;

text-decoration: none;

}



.styled {

color: #FF0000;

font-style: italic;

font-weight: bold;

text-decoration: underline;

}
TinyScript
04-20-2010, 01:13 AM
looks like an error with className

You have it as classname

Needs capital N
fixed:

function toggleStyles() {

var h1 = document.getElementsByTagName("h1")[0];
var p0 = document.getElementsByTagName("p")[0];
var p1 = document.getElementsByTagName("p")[1];


p0.className = (p0.className == "styled") ? "normal" : "styled";
p1.className = (p1.className == "styled") ? "normal" : "styled";

}
Jaxyral
04-20-2010, 09:02 PM
Thank you, duh such a simple error i should of known, been doign c++ for the last year.
Jaxyral
04-20-2010, 09:21 PM
Here is one more thing that is bugging me. I know I need to appendChild node somewhere but i can not figure out where to. So far i have appendChild at the table head which works to an extent. How can I make it so the new row is added above the table header but in it's own formatted little box. Also how would you insert the row below the header but at the top of the other rows?

I have managed to move the inserted row to the top above the header but it doesn't look terribly good.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TableDOM</title>
<script type="text/javascript">

//Appends a new row to the tea table

function addTeaGrade(s){

var tableElem, trElem, tdElem, textElem

//get a handle for the table
tableElem = document.getElementsByTagName("tfoot")[0]

//create text element with text entered by user
textElem = document.createTextNode(s)
//alert(textElem.nodeValue)

//create td element
tdElem = document.createElement("td")

//create tr element
trElem = document.createElement("tr")

//assemble row:
//footbone connected to the ankle bone,
//ankle bone connected to the shin bone, etc.
tdElem.appendChild(textElem)
trElem.appendChild(tdElem)

//get a handle for the TBODY element
var tbodyElem = document.getElementsByTagName('thead')[0]

//appendChild() inserts the new row as the last child of TBODY
tbodyElem.appendChild(trElem)

}

</script>
</head>

<body>
<h3>Example: Dynamic HTML Table</h3>
Demonstrates how to add table elements using the DOM API.
<br /><br />

<table border="1">

<tr id="hdr-row">
<th>
<a href="http://www.2basnob.com/grading-tea.html">Grades of tea</a>
</th>
</tr>

<tr id="row-1">
<td>
Golden Flowery Orange Pekoe
</td>
</tr>

<tr id="row-2">
<td>
Tippy Golden Flowery Orange Pekoe
</td>
</tr>

</table>

<br />

<form style="width:650px" id="teaForm" action="">
Grade of tea to add to table: <br />
<input id="gradeBox" size="34" type="text" value="" />
<br />

<input type="button" value="Add"
onclick="addTeaGrade(this.form.gradeBox.value)" />
&nbsp;&nbsp;
<input type="reset" />
</form>
<hr />
<h3>Drilling Down Through the DOM (w/X-Ray Vision)</h3>
<script type="text/javascript">

document.write('<ol>')

var elemTbl = document.getElementsByTagName('table')[0].firstChild
document.write('<p>Children of table element:</p>')
while (elemTbl) {
document.write('<li>' + elemTbl.nodeName + '</li>')
elemTbl = elemTbl.nextSibling
}

var elemTBODY = document.getElementsByTagName('TBODY')[0].firstChild
document.write('<p>Children of TBODY element:</p>')
while (elemTBODY) {
document.write('<li>' + elemTBODY.nodeName + '</li>')
elemTBODY = elemTBODY.nextSibling
}

var el = document.getElementById('hdr-row').nextSibling;
document.write('<p>Siblings of hdr-row:</p>')
while (el) {
document.write('<li>' + el.nodeName + '</li>')
el = el.nextSibling
}

document.write('</ol>');
</script>

<hr />
<h3>The Complex Table Model</h3>
The Complex model incorporates all the elements of Simple tables in addition to many new elements that give the author even more organizational control. The Complex model gives the developer the ability to group Table Rows into THEAD, TBODY and TFOOT sections. <br /><br />
The TBODY element is part of a trio of table grouping elements that organize a series of Table Rows [TR] into Header [THEAD], Body [TBODY] and Footer [TFOOT] sections.
<br /><br />
The THEAD and TFOOT section markers are optional, but one or more TBODY sections are always required. <br />
<br />

To allow for backward compatibility with the older Simple Table Model, if no TBODY structures exist in a table, the entire set of row groupings [TR] are assumed to be a single TBODY.
</body>
</html>
Gjslick
04-21-2010, 05:59 AM
Instead of appendChild(), you want to look into using insertBefore(). https://developer.mozilla.org/En/DOM/Node.insertBefore