Home/ Questions/Q 8358335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T10:45:44+00:00

I’m working in the latest version of Opera. It supports the Microdata API, but

  • 0

I’m working in the latest version of Opera. It supports the Microdata API, but when I typed the following code, it does not work. 

<head>
<script type="text/javascript">
        var user = document.getItems('http://schema.org/Person')[0];
        alert('Hi there ' + user.properties['name'][0].textContent + '!');
        function supports_microdata_api() {
             return !!document.getItems;
        }
        alert(supports_microdata_api());
        </script>
    </head>
<body>
<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Fatima Zohra</span>
  <img src="" itemprop="image" />
</div>

Can anyone tell me what I’m doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to wait until the page loads; you’re calling for something: 

    document.getItems('http://schema.org/Person')[0]

    That’s not part of the DOM yet; your code is run before the DOM is aware of the “yet unseen” element.

    Use window.onload to wait for the page onload event to fire, which occurs after the elements have been parsed. 

    window.onload = function(){
    var user = document.getItems('http://schema.org/Person')[0];
    console.log(user);
    console.log('user.properties Name: ' + user.properties['name'][0].textContent);
    function supports_microdata_api() {
        return !!document.getItems;
    }
    console.log(supports_microdata_api());
};

    http://jsfiddle.net/eY63s/2/

    Or, alternately, put the code after the DOM elements in page order.

    A more modern method is to use event delegation:

    window.addEventListener('load', function(){
    var user = document.getItems('http://schema.org/Person')[0];
    console.log(user);
    console.log('user.properties Name: ' + user.properties['name'][0].textContent);
    function supports_microdata_api() {
        return !!document.getItems;
    }
    console.log(supports_microdata_api());
});

    http://jsfiddle.net/eY63s/3/

    Although at least earlier versions of IE support element.attachEvent instead, IE9 or later browsers do/will support element.addEventListener.

    And this is a safer way to check and call the methods: 

    window.addEventListener('load', function(){
    var user;

    function supports_microdata_api() {
        return !!document.getItems;
    }

    console.log('Microdata support: ' + supports_microdata_api());

    if (supports_microdata_api()) {
        user = document.getItems('http://schema.org/Person')[0];
        console.log(user);
        console.log('user.properties Name: ' + user.properties['name'][0].textContent);
    }
});

    http://jsfiddle.net/eY63s/4/

    Note the use of var user inside the anonymous function, which creates a closure and prevents user from escaping to the global scope. This is a “better” way of handling variables, which can help prevent them from being overwritten by accident due to global sharing. On the other hand, you will not be able to call user from outside that scope. Resist the urge to push it to the global scope, though, which can be easier but is a bad habit and prone to at times difficult to find errors.

    • 0