Accessing the Document Object Model in Smart Pascal

This demonstration uses Smart Pascal to add a few elements to a web page and shows how you can access the elements. The document object has inbuilt collections of images and links, and also an all collection containing every one of the elements. We use these three collections to output some data from the Document Object Model (DOM). (The images are from George Wright's TowerOfArcher). The w3schools site provides a clear diagram of the DOM tree of objects.

Demonstration

If the demo does not work in your current browser, try another such as Chrome. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

DOMDemo.html

The Smart Pascal code of the main unit follows. Open the project file project file in Notepad++ to see also the code of JElement and the small CSS file that we used. (You can open the project file in Smart Mobile Studio if you download the two images to the project's www folder).

Smart Pascal Code of Main Unit

uses W3C.HTML5, W3C.DOM, W3C.CSS, W3C.Console, JElement;

var div1 := TElement.Create('div', nil, '');
div1.SetAttribute('id', 'main');

  // h3
  TElement.Create('h3', div1, 'blue_class', 'DOM Demo');
  // h4
  TElement.Create('h4', div1, 'blue_class', 'Examples of Links');
  // a href
  var a1 := TElement.Create('a', div1, '', 'PPS');
  a1.SetAttribute('href', 'http://www.pp4s.co.uk');
  TElement.Create('br', div1, '');
  var a2 := TElement.Create('a', div1, '', 'Pascal Game Development');
  a2.SetAttribute('href', 'http://www.pascalgamedevelopment.com/');
  TElement.Create('br', div1, '');
  var a3 := TElement.Create('a', div1, '', 'Smart Mobile Studio');
  a3.SetAttribute('href', 'http://smartmobilestudio.com/');
  TElement.Create('br', div1, '');

  TElement.Create('h4', div1, 'blue_class', 'Examples of Images');
  var i1 := TElement.Create('img', div1, '');
  i1.SetAttribute('src', 'res/GroundEnemy.png');
  i1.SetAttribute('alt', 'Ground Enemy');
  var i2 := TElement.Create('img', div1, '');
  i2.SetAttribute('src', 'res/AirEnemy.png');
  i2.SetAttribute('alt', 'Air Enemy');
  TElement.Create('br', div1, '');

  // p
  var p1 := TElement.Create('p', div1, 'blue_class', 'Press F12 for output in console');

  var DOM_Data := 'Document Title: ' + Document.title + #13#10;

  for var i := 0 to Document.links.length - 1 do
    begin
      DOM_Data += 'Link number ' + inttostr(i + 1) + ' has ' +
      'tag name ' + Document.links[i].tagName + ', ' +
      'inner HTML = ' + Document.links[i].innerHTML + ' and ' +
      'href = ' + Document.links[i].getAttribute('href') + #13#10#13#10;
    end;

  for var i := 0 to Document.images.length - 1 do
    begin
      DOM_Data += 'Image number ' + inttostr(i + 1) + ' has ' +
      'tag name ' + Document.images[i].tagName + ', ' +
      'src = ' + Document.images[i].getAttribute('src') + ' and ' +
      'alt = ' + Document.images[i].getAttribute('alt') + #13#10 + #13#10;
    end;

  DOM_Data += #13#10 + 'All Elements with Tag Names' + #13#10;
  for var i := 0 to Document.all.length - 1 do
    DOM_Data += inttostr(i + 1) + ': ' + Document.all[i].tagName + ' ';
  Console.log(DOM_Data);   

Output

Document Title: DomDemo
Link number 1 has tag name A, inner HTML = PPS and href = http://www.pp4s.co.uk

Link number 2 has tag name A, inner HTML = Pascal Game Development and 
href = http://www.pascalgamedevelopment.com/

Link number 3 has tag name A, inner HTML = Smart Mobile Studio and 
href = http://smartmobilestudio.com/

Image number 1 has tag name IMG, src = res/GroundEnemy.png and alt = Ground Enemy

Image number 2 has tag name IMG, src = res/AirEnemy.png and alt = Air Enemy


All Elements with Tag Names
1: HTML 2: HEAD 3: META 4: META 5: META 6: META 7: META 8: META 9: TITLE 10: STYLE 
11: SCRIPT 12: BODY 13: DIV 14: H3 15: H4 16: A 17: BR 18: A 19: BR 20: A 21: BR 
22: H4 23: IMG 24: IMG 25: BR 26: P 
Programming - a skill for life!

Smart Pascal applications giving small HTML files