W3C DOM tests - the Five Methods

Test <p> with id="test" and class="testClass". It contains a <b> with id="testB".

<p> with id="test2" and class="nonsense testClass"

This is a <ppk> tag.

This <img>has name (and not id!) test3

This <div> also has id="test". It should be ignored, since there's a previous element with id="test".

This page tests a few basic DOM methods.

Test scripts

createElement()

x = document.createElement('P');
alert(x)

Test with an argument that includes brackets

x = document.createElement('<P>');
alert(x)

createTextNode()

var test = document.createTextNode(' textNode');
var testEl = document.getElementById('test');
testEl.appendChild(test);
alert(testEl.innerHTML)

compareDocumentPosition()

Correct answers: 4 and 20

var x = document.getElementById('test');
var y = document.getElementById('test2');
var z = document.getElementById('testB');
alert(x.compareDocumentPosition(y));
alert(x.compareDocumentPosition(z));

getElementById()

Test basic getElementById functionality (correct answer: P):

alert(document.getElementById('test').tagName)

Test if getElementById also works on elements with a name. It shouldn't, but in some browsers it does.

alert(document.getElementById('test3').tagName)

getElementsByTagName()

alert(document.getElementsByTagName('P').length)

Test * argument

alert(document.getElementsByTagName('*').length)

Test custom tags

alert(document.getElementsByTagName('PPK').length)

contains()

Test whether test contains testB (correct value: true)

var test = document.getElementById('testB');
alert(document.getElementById('test').contains(test))

Test whether test contains test2 (correct value: false)

var test = document.getElementById('test2');
alert(document.getElementById('test').contains(test))

Test whether test contains itself (correct value: true, which is a bit odd)

var test = document.getElementById('test');
alert(document.getElementById('test').contains(test))

getElementsByClassName()

The correct answers are 2 and P, because there are two paragraphs that have class="testClass"

var cn = document.getElementsByClassName('testClass');
alert(cn.length);
alert(cn[0].tagName);

The correct answers are 1 and P, because there is only one paragraph that ha class="testClass nonsense"

var cn = document.getElementsByClassName('testClass nonsense');
alert(cn.length);
alert(cn[0].tagName);

querySelectorAll()

The first test should give the first test paragraph a red border; the second test the second paragraph.

var qsa = document.querySelectorAll('.testClass');
qsa[0].style.border = '1px solid red';

var qsa = document.querySelectorAll('.testClass + p');
qsa[0].style.border = '1px solid red';

item()

var x = document.getElementsByTagName('P');
var y = x.item(0);
alert(y.nodeName);