W3C DOM tests - the Five Methods
This is the test HTML:
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
x = document.createElement('P');
alert(x)
Test with an argument that includes brackets
x = document.createElement('<P>');
alert(x)
var test = document.createTextNode(' textNode');
var testEl = document.getElementById('test');
testEl.appendChild(test);
alert(testEl.innerHTML)
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));
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)
alert(document.getElementsByTagName('P').length)
Test *
argument
alert(document.getElementsByTagName('*').length)
Test custom tags
alert(document.getElementsByTagName('PPK').length)
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))
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);
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';
var x = document.getElementsByTagName('P');
var y = x.item(0);
alert(y.nodeName);