JDev

Did you know that you can use any custom attributes for your HTML tags? For example:

<div id=’myDiv’ firstName=’John’></div>

 Now, in your JavaScript code, you get the value of your custom attribute as follows:

var div = document.getElementById (’myDiv’);
var fName = div.getAttribute(’firstName‘); 

This technique may prove useful if you manipulate and re-arrange HTML elements on your web page. 

var cell = document.createElement("td");
cell.appendChild(document.createTextNode("sometext"));

Let’s say your link element (HTMLLinkElement)  is enclosed in a div with an id attribute "div1":

<div id=’div1′><a href=’somepage.html’>Go to some page </a></div>

Now to get to the text value of the link, first get a reference to the div element:

var oDiv = document.getElementById(’div1′);

and then use the innerHTML property

 alert(oDiv.firstChild.innerHTML);

This would work only if there is no whitespace or other elements between the opening div tag and the link.
If we know that the link  we want to get to is the first or only link in that div element we can use the following code:

var oAnchor = oDiv.getElementsByTagName("a").item(0);
 alert (oAnchor.innerHTML);

If you want to strictly follow the DOM specification, use the data property of a CharacterData object:

alert (oAnchor.firstChild.data);

You can also use the nodeValue property of a Node object:

alert(oAnchor.firstChild.nodeValue); 

HTMLLinkElement object properties and methods are listed here. 

The following code finds the row and column numbers of a table cell. The code uses getParent function from the previous post. The obj variable represents a table cell element.

    var oTable =findParent(obj, "table");
    var tr = findParent(obj, "tr");
    var td = findParent(obj, "td");      

    var len= oTable.rows.length;
    while(len–>0){
                if(oTable.rows[len]==tr){
                    var row =len;
                    break;
                }
    }

    var i = tr.cells.length;
    while(i–>0){
                if(tr.cells[i]==td){
                    var col = i;
                    break;
                }
    }
    alert("Row Number :"+ row +"\nColumn number :"+ col);
 

The following function goes up the DOM parent chain until if finds a node whose name was passed as a second parameter.
If it does not find it, it returns null. For example, you can pass it an HTMLTableCellElement as the first argument, and a "TABLE"
 as the second argument, and it will return an HTMLTableElement object.

function findParent(node, parentName){

        return null;
    }

Here is a code sample that converts text in each paragraph to upper case when you place a mouse over it and returns to the original value on mouseout. This may be stupid but it does illustrate a few DOM techniques including how to get a reference to all page elements, and how to create additional properties on an object.  Works only in Firefox at this time.

  function ucListener(){

         //save the existing text in a custom property
        this.firstChild.oldValue = this.firstChild.nodeValue;
        this.firstChild.nodeValue = this.firstChild.nodeValue.toUpperCase();
    }

    function installAllListeners() {
        var elements = document.getElementsByTagName(’*');
        var i = elements.length;
        while(i–>0){
            elements[i].addEventListener(’mouseover’, ucListener, false);
            elements[i].addEventListener(’mouseout’, ucListenerOut, false);
        }
    }

Here are some handy examples from SlayerOffice that demonstrate how to manipulate and reference DOM Elements: 

1 .Remove a DOM Element  :

    oElement.parentNode.removeChild(oElement);

2. Replace a child element with a new one:

  var newElement = document.createElement("p");
  oldElement.parentNode.replaceChild(newElement, oldElement); 

 3. Remove text from an element:

    var oElement = document.getElementById(obj.id);
    while(oElement.firstChild)
        oElement.removeChild(oElement.firstChild);

 4. Use a DocumentFragment object to speed up loop constructs:

    var oFragment = document.createDocumentFragment();
   var i = 1000;
   while(i–>0) {
     var oElement = document.createElement("div");
     oFragment.appendChild(oElement);
   }
   bodyElement.appendChild(oFragment);

5. Use cloneNode to clear innerHTML:

    var oElement = document.getElementById("myElement");                       
    oElement.parentNode.replaceChild(oElement.cloneNode(false),oElement);

6. Insert an element before the specified element:

    var oldElement = document.getElementById("myElement");
    var newElement =     document.createElement("span");    
    oldElement.parentNode.insertBefore(newElement , oldElement);

7. Insert an element after the specified element:

    var oldElement = document.getElementById("myElement");
    var newElement = document.createElement("span");
    oldElement.parentNode.insertBefore(newElement,oldElement.nextSibling);

8. Get the text value of an element:
     var text = oElement.firstChild.nodeValue;   

9.Get a reference to the next element among the children: 
     var oNode1 = document.getElementById("myDiv").firstChild.nextSibling;

10. Get a reference to the previous element:
   var oNode2 = document.getElementById("myDiv").lastChild.previousSibling;

More techniques:

Insert an element at the top of a page:

var oElement = document.createElement("div"); 
var bodyRef = document.getElementsByTagName("body").item(0);
bodyRef.insertBefore(oElement, document.body.firstChild);

The algorithm to hide a particular column in a HTML table will be as follows: get a reference to table rows, then cycle through each row, get a reference to a cell belonging to that particular column, and set its style to none: mycell.style.display="none";

More on this and an example is at this page.

The following script can be used instead of an alert to display messages on web pages during development. It creates a div section at the bottom of a page to hold messages. The div section has a button to clear text. The script uses a JavaScript object literal.
 

var messages= {

        var txt = document.createTextNode(vText);
        dcontents.appendChild (txt);
    }
    else{
        var dcontents = document.getElementById(’cnts’);
        var br = document.createElement("br");
        dcontents.appendChild(br);
        var sp = document.createElement("span");
        var txt =  document.createTextNode(vText);
        sp.appendChild(txt);
        dcontents.appendChild(sp);
    }
}
}

Usage: messages.debug("some text"); 

You can view the demo page here. 

The post moved to http://www.ekcsoft.com/jstl/content/hilinks/

The code and explanation was moved to this site.

This post has been expanded and moved to this web page.