How to get the class name for DOM access. document.getElementsByClassName('handle-contain'). I Mean this 'handle-contain'

Beast
Tera Contributor

How to get the class name for DOM access. document.getElementsByClassName('handle-contain'). I Mean this 'handle-contain'.

document.getElementsByClassName('icon-contain-menu');- here 'icon-contain-menu'

How to get these.

4 REPLIES 4

Aoife
Tera Guru

Direct manipulation of the DOM is highly discouraged.  Check into the g_form object, it has a method 'getElement' that can return elements, and many other useful functions.  

Also, what are you trying to do with the DOM?  There might be other ways.  I rarely even use the g_from.getElement() method.

Aoife

Beast
Tera Contributor
function onLoad() {


   var domChecklistItems = document.getElementsByClassName('handle-contain');


   setTimeout(function waitChecklistItems() {


       if (document.body.contains(domChecklistItems[0])) {


           var domMenu = document.getElementsByClassName('icon-contain-menu');   // Checklist menu


           var domAdd = document.getElementsByClassName('add-item');   // Add Item Row


           var domHandle = document.getElementsByClassName('handle-contain');   // Reorder Icon


           var domIcon = document.getElementsByClassName('icon-contain');   // Delete Icon



           removeDom(domMenu);


           removeDom(domAdd);


           removeDom(domHandle);


           removeDom(domIcon);


       } else {


           setTimeout(waitChecklistItems, 10);


       }


   }, 10);



   function removeDom(elemArray) {


       while(elemArray.length > 0) {


           elemArray[0].parentNode.removeChild(elemArray[0]);


       }


   }


}

I used DOM to restrict Adding item and deleting item. And Also I want to restrict the Text editing in checkList. Is there any Other method ?

UI Policies to show/hide, make read-only, etc. comes to mind.  That appears to be what you are trying to do.

Also using the built in g_form methods is much safer and you can hide elements, make then read-only, etc. in script when necessary.

Direct DOM manipulation is very dangerous and can render you page unable to be displayed at all.  Make sure you know what you are doing in regards to how ServiceNow encodes things within the DOM and how the framework does things or you will live to regret it as many have.

Read up on g_form.getElement.  Also check into UI Policies, available for forms and catalog item/record producers.

Aoife

Hitoshi Ozawa
Giga Sage
Giga Sage

Hi Beast,

I usually open up the form and right click near the field and select "inspect". In the Element view, find and element near the field with a class, right click on the tag and select "Copy" > "Copy element". Paste it to a text editor and copy the value of the class.

ID can be copied by selecting "Copy XPath".