SharePoint

So in a lot of cases the element also has a unique CSS class (ms-listdescription) in our case. Because native in JavaScript we can’t select elements by its class name, and we don’t use jQuery (jQuery can select elements by its css class name), we’ll add an additional function to help us select the elements. This function uses

document.getElementsByTagName('[tag-name]')

which returns an array of all elements with specified tag name. From that array we have to filter out only the ones with CSS class that we desire. So we use the following function:

function getElementsByCssClass(sTagName, sClassName) {
    var results = new Array();
    var allTagElements = document.getElementsByTagName(sTagName);
    for (i = 0; i < allTagElements.length; i++) {
        if(allTagElements[i].className == sClassName) results.push(allTagElements[i]);
    }
    return results;
}

Now let’s insert the CEWP into the page and add the code we prepared untill now – function getElementsByCssClass and function deHTML.

Now let’s test how many elements are there with the CSS class "ms-listdescription". Just before the at the end of the code add the following command:

alert(getElementsByCssClass("div", "ms-listdescription").length);

and we should get the following alert:

Great so there is only one HTML DOM element with CSS class "ms-listdescription".

So we have successfully selected our DOM element. Now let’s change its inner HTML using the following code:

getElementsByCssClass("div", "ms-listdescription")[0].innerHTML = deHTML(getElementsByCssClass("div", "ms-listdescription")[0].innerHTML);

and we get the result:

You may notice some space between the list description and the list view. We can remove this by pure CSS. Let’s select the element that is making this space and discover its CSS class name.

Now we will adapt the CSS rule for that class using the following:

to hide the space created by new webpart.

To sum it all up

There are multiple ways of getting an element we want to work with from SharePoint’s enormous HTML DOM. First we get its ID, CSS class name or tag name with IE Developer Tools and then we get it with JavaScript. There are certain native functions that do this job, like

• document.getElementById – which returns the object with given unique ID
• document.getElementsByName – which returns an array of objects with given name in its attribute.
• document.getElementsByTagName – which returns an array with all the elements that have the specified tag name.

And if the element we are trying to reach doesn’t have a unique ID or name or there are too many elements with the same tag name, we can create our own support function, like getElementByCssClass, which returns an array of elements with the specified tag AND css class name. We’ll get to know another function later in the series, which returns object by its title, but let’s not get ahead of ourselves.

An important thing to note is also that when the function returns an array of elements, even if that array contains only one element, we always have to use index with the results for example (getElementsByCssClass("div", "ms-listdescription")[0]).

If getting to the object is still quite tough, because it doesn’t have any ID, Name or  Class Name, there are more ways of getting to the object by traversing the DOM. We’ll get to know this in next parts of this series.

The complete code we used in this demo is as follows:

---

Other articles from this series: