DOM cannot be acquired from the HTML source entered in the HTML widget

[yuya3]

Hi all.

I want to get the DOM element of the HTML source added to the HTML widget using the client script in the widget editor.

I used document.getElementsByClassName in clientscript. but it not worked.it return " NULL"

how do i get DOM?

thank you all answers.

[Tommy Jensen]

You can use jquery syntax:

$("#id-of-the-element")

[SatheeshKumar]

can you share your  the input you have entred in the html 

[yuya3]

here you are.

<div><iframe id="button-test" src="https://XXXXXXXXXXX.service-now.com/u_support_desk_inquiry_list.do?sysparm_userpref_module=206c70a81b8040dc8c93db16cc4bcb08&amp;sysparm_clear_stack=true" width="1200" height="1200" frameborder="0" marginwidth="10" marginheight="10">
</iframe></div>

I use maked original "VIEW" in "iframe" to display list view.

[ChrisBurks]

Although not recommended document can be used to access the DOM. The problem with using document in this case is that you would be stepping out of the AngularJS scope of things. 

What's happening in your case is more than likely a timing issue, meaning when the HTML renders in the DOM when the page is loading. If it's a timing issue simply using jquery may not solve the issue. However, there are a few things you can try.

1) Try using $scope.$evalAsync().

$evalAsync() executes the expression on the current scope at a later point in time. Albeit, it doesn't guarantee that it will execute at the correct time. It just executes at a later time. 

Example use: 

$scope.$evalAsyc(function(){
    var elCollection = document.getElementsByClassName('class-name-here');
    ...
})

JQuery could be used within the evalAsync as well

2) Try grabbing the elements in the Link function instead. 

When doing DOM manipulation in AngularJS it should normally be done in the Link function. All rendering should be done by the time you get to the Link function. If you pass in element you can leverage this to stay within the scope of the widget and use the find method provided

example:

function(scope,element,attrs){
    var elms = element.find('.classname');
    ...
}

Notice how the dot '.' is included with the classname in the example indicating it's a class. $evalAsync can be used here as well. Use the same structure except remove the dollar sign '$' from scope:  scope.$evalAsync

3) Use $element in the client controller script by passing it in

$element is the same thing as in the link function but to use it in client scope you'll have to pass it in. Or if you don't want to pass it in you can access it using angular.element

example: $element

//client controller
function($scope,$element){
   var elms = $element.find('.classname');
   ...
}

         example: angular.element

//client controller
function($scope){
   var elms = angular.element.find('.test-div');
   ...
}

4) $timeout can be brought in 

$timeout is basically the same as the regular javascript timeout, just angularized

//Client controller
function($scope, $timeout){
   $timeout(function(){
      var elms = [any of the other methods here]
   },500)
}

5) If you're trying to reach outside the scope of the widget meaning you're trying to grab an element(s) on the page that renders that may exist in another widget then you would need to use regular jQuery syntax or the document.getElementsByClassName. But you would definitely need to use timeout because it will be a timing issue. You can also use javascript's MutationObserver to listen to the DOM for changes on the whole page. I would use this in the Link function

I hope this helps