1
0
mirror of https://github.com/rkd77/elinks.git synced 2024-06-20 00:15:31 +00:00

Merge branch 'assert'

This commit is contained in:
Witold Filipczyk 2024-04-13 13:56:54 +02:00
commit 26815e829a
45 changed files with 1156 additions and 1 deletions

View File

@ -275,7 +275,7 @@ check_for_rerender(struct ecmascript_interpreter *interpreter, const char* text)
#ifdef ECMASCRIPT_DEBUG
fprintf(stderr, "%s:%s %s %d\n", __FILE__, __FUNCTION__, text, interpreter->changed);
#endif
if (interpreter->changed) {
if (interpreter->changed && !get_cmd_opt_bool("test")) {
struct document_view *doc_view = interpreter->vs->doc_view;
struct document *document = doc_view->document;
struct session *ses = doc_view->session;

View File

@ -1,4 +1,5 @@
<script>
console.error("console.assert.html");
console.assert(0 % 2 === 0, "O is not even");
console.assert(1 % 2 === 0, "1 is not even");
console.exit(0);

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<body>
First Name: <input name="fname" type="text" value="Michael"><br>
First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the outer html of anchor number 1. Anchors are counted from 0.</p>
<button onclick="myFunction()">Try it</button>
<a href="/" name="aaa">/</a>
<a href="/home" name="bbb">/home</a>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.anchors.item(1).outerHTML;
console.assert(x === '<A href="/home" name="bbb">/home</A>', 'anchors');
}
console.error('document.anchors.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the base URI of the document.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The baseURI property is not supported in Internet Explorer.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.baseURI;
console.assert(x.endsWith('document.baseURI.html'), 'baseURI');
}
console.error('document.baseURI');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<body><!-- This is a comment node! -->
<p>Click the button get info about the body element's child nodes.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text
is considered as nodes. Comments are also considered as nodes.</p>
<p id="demo"></p>
<script>
function myFunction() {
var c = document.body.childNodes;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].nodeName + "<br>";
}
console.assert(txt === '#comment<br>#text<br>P<br>#text<br>BUTTON<br>#text<br>P<br>#text<br>P<br>#text<br>SCRIPT<br>#text<br>#text<br>#text<br>', 'Child nodes');
}
console.error('document.body.childNodes');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the tag names of the body element's children.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var c = document.body.children;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].tagName + "<br>";
}
console.assert(txt === '#text<br>P<br>#text<br>BUTTON<br>#text<br>P<br>#text<br>SCRIPT<br>#text<br>#text<br>', txt);
}
console.error('document.body.children');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<body id="test">
<button onclick="myFunction()">Click to see id of body element.</button>
<a href="/">/</a>
<a href="/home">/home</a>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.body.id;
console.assert(x === 'test', 'id');
}
console.error('document.body.id.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check the encoding of this document.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> Internet Explorer 8 and earlier does not support the characterSet property.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.characterSet;
console.assert(x === 'utf-8', 'Usually utf-8');
}
console.error('document.characterSet');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the doctype name of the document.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> In Internet Explorer 8 and earlier, the doctype property returns <em>null</em> for HTML and XHTML documents, and will only work for XML documents.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.doctype.name;
console.assert(x === 'html', 'html');
}
console.error('document.doctype.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<body id="test">
<button onclick="myFunction()">Try it</button>
<a href="/">/</a>
<a href="/home">/home</a>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.documentElement.innerHTML;
console.assert(x.startsWith('<HEAD></HEAD><BODY id="test">'), 'head was added');
}
console.error('document.documentElement.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the location of this document</p>
<p><strong>Note:</strong> Internet Explorer does not support the documentURI property.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.documentURI;
console.assert(x.endsWith('/test/ecmascript/assert/document.documentURI.html'), 'documentURI.html');
}
console.error('document.documentURI.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the domain name of the server that loaded this document.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.domain;
console.assert(!x, 'empty for file://');
}
console.error('document.domain.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<body class="test">
First Name: <input name="fname" type="text" value="Michael"><br>
First Name: <input name="fname" type="text" value="Doug">
<p class="a">Click the button to get the tag name of the first element in the document that has a name attribute with the value "fname".</p>
<button onclick="myFunction()" class="test">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByClassName("test");//.item(1).outerHTML;
console.assert(x === '<button onclick="myFunction()" class="test">Try it</button>', x);
}
console.error('document.getElementsByClassName.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<body>
First Name: <input name="fname" type="text" value="Michael"><br>
First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the tag name of the first element in the document that has a name attribute with the value "fname".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByName("fname");//.item(1).outerHTML;
console.assert(x === '<input name="fname" type="text" value="Doug">', 'TODO');
}
console.error('document.getElementsByName.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<body>
First Name: <input name="fname" type="text" value="Michael"><br>
First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the tag name of the first element in the document that has a name attribute with the value "fname".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByTagName("P").item(1).outerHTML;
console.assert(x === '<P id="demo"></P>', 'demo');
}
console.error('document.getElementsByTagName.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head><title>HEAD</title></head>
<body id="test">
<button onclick="myFunction()">Try it</button>
<a href="/">/</a>
<a href="/home">/home</a>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.head; //.innerHTML;
console.assert(x === '<TITLE>HEAD></TITLE>', x);
}
console.error('document.head.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<a href="/">/</a>
<a href="/home">/home</a>
<img src="blabla.gif" />
<img src="blabla2.gif" />
<p id="demo"></p>
<script>
function myFunction() {
var x = document.images.length;
console.assert(x == 2, '2');
}
console.error('document.images.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<body>
First Name: <input name="fname" type="text" value="Michael"><br>
First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the tag name of the first element in the document that has a name attribute with the value "fname".</p>
<button onclick="myFunction()">Try it</button>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
<a href="/">/</a>
<a href="/home">/home</a>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.links.length;
console.assert(x === 5, 5);
}
console.error('document.links.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to append an item to the end of the list.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong><br>First create an LI node,<br> then create a Text node,<br> then append the Text node to the LI node.<br>Finally append the LI node to the list.</p>
<script>
function myFunction() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
console.assert(document.getElementsByTagName("UL")[0].outerHTML === '<UL id="myList">\n <LI>Coffee</LI>\n <LI>Tea</LI>\n<LI>Water</LI></UL>', 'Water');
}
console.error('element.appendChild.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the value of the onclick attribute of the button element.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> Internet Explorer 8 and earlier does not support the getNamedItem method.</p>
<p id="demo"></p>
<script>
function myFunction() {
var a = document.getElementsByTagName("BUTTON")[0];
var x = a.attributes.getNamedItem('onclick').value;
console.assert(x === 'myFunction()', 'attributtes');
}
console.error('element.attributes.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<body>
<h1>The input checked attribute</h1>
<form action="" method="get">
<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input id="boat" type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
<script>
function ch()
{
console.assert(document.getElementById('boat').checked, 'checked true');
}
console.error('element.checked.html');
ch();
console.exit(0);
</script>
<button onclick="ch();">CLICK</button>
</body>
</html>

View File

@ -0,0 +1,24 @@
<html>
<body>
<a id="blabla" href="/" rel="nofollow"><b>AAA</b><u id="ble">UUU</u></a>
<b id="empty"></b>
<script>
function aa()
{
console.assert(document.getElementById('blabla').childElementCount == 2, 'Two, b and u');
}
function bb()
{
console.assert(document.getElementById('empty').childElementCount == 0, 'zero');
}
console.error('element.childElementCount.html');
aa();
bb();
console.exit(0);
</script>
<button onclick="return aa()">blabla child element count</button>
<button onclick="return bb()">empty child element count</button>
</body>
</html>

View File

@ -0,0 +1,29 @@
<html>
<body>
<a href="/home">BBB</a>
<b dir="ltr" id="aaaa" class="a b c">bbb</b>
<a dir="rtl" id="blabla" href="/">
<b>AAA</b><u dir="auto" id="ble" title="test">UUU</u>AAAAAAA
</a>
<a id="bb" dir="blalalala" href="/">BB</a>
<script>
function aa()
{
console.assert(document.getElementById('aaaa').className === 'a b c', 'a b c');
}
function bb()
{
document.getElementById('aaaa').className = 'abc';
console.assert(document.getElementById('aaaa').className === 'abc', 'abc');
}
console.error('element.className.html');
aa();
bb();
console.exit(0);
</script>
<button onclick="return aa()">Click me!</button>
<button onclick="return bb()">Set className to abc</button>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<body>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p>Click the button to copy an item from one list to another.</p>
<button onclick="myFunction()">Try it</button>
<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p>
<script>
function myFunction() {
var itm = document.getElementById("myList2").lastChild;
console.assert(itm.outerHTML === '<LI>Milk</LI>', 'Milk');
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
console.assert(document.getElementById("myList1").innerHTML === '<LI>Coffee</LI><LI>Tea</LI><LI>Milk</LI>', 'Coffee, Tea, Milk');
}
console.error('element.cloneNode.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<body>
<div class="demo container"> Grandparent
<div class="demo container">Parent
<div id="myElement" class="demo">The outer HTML of closest element will be shown.</div>
</div>
</div>
<script>
var element = document.getElementById("myElement");
var closest = element.closest(".container");
console.error('element.closest.html');
console.assert(closest.outerHTML === '<DIV class="demo container">Parent\n <DIV id="myElement" class="demo">The outer HTML of closest element will be shown.</DIV>\n </DIV>', 'TODO');
console.exit(1);
</script>
</body>
</html>

View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDIV">
<p>I am a p element inside div, and I have a <span id="mySPAN"><b>span</b></span> element inside of me.</p>
</div>
<span id="mySPAN2"><b>span</b></span>
<p>Click the button to find out if the div element contains a span element.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var span = document.getElementById("mySPAN");
var span2 = document.getElementById("mySPAN2");
var div = document.getElementById("myDIV").contains(span);
var div2 = document.getElementById("myDIV").contains(span2);
console.assert(div, 'myDIV contains mySPAN');
console.assert(!div2, '!myDIV contains mySPAN2');
}
console.error('element.contains.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,32 @@
<html>
<body>
<a href="/home">BBB</a>
<b dir="ltr" id="aaaa">bbb</b>
<a dir="rtl" id="blabla" href="/">
<b>AAA</b><u dir="auto" id="ble" title="test">UUU</u>AAAAAAA
</a>
<a id="bb" dir="blalalala" href="/">BB</a>
<script>
function aa()
{
console.assert(document.getElementById('aaaa').dir === 'ltr', 'aaaa', 'ltr');
console.assert(document.getElementById('blabla').dir === 'rtl', 'blabla', 'rtl');
console.assert(document.getElementById('ble').dir === 'auto', 'ble', 'auto');
console.assert(document.getElementById('bb').dir === '', 'bb', 'empty');
}
function bb()
{
document.getElementById('blabla').dir = 'ltr';
console.assert(document.getElementById('blabla').dir === 'ltr', 'blabla ltr');
}
console.error('element.dir.html');
aa();
bb();
console.exit(0);
</script>
<button onclick="return aa()">Click me!</button>
<button onclick="return bb()">blabla.dir = ltr</button>
</body>
</html>

View File

@ -0,0 +1,21 @@
<html>
<body>
<a href="/home">BBB</a>
<b dir="ltr" id="aaaa" class="a b c">bbb</b>
<a dir="rtl" id="blabla" href="/"><b id="b1">AAA</b><u dir="auto" id="ble" title="test">UUU</u>AAAAAAA
</a>
<a id="bb" dir="blalalala" href="/">BB</a>
<script>
function aa()
{
var x = document.getElementById('blabla').firstChild.id;
console.assert(x === 'b1', 'b1');
}
console.error('element.firstChild.html');
aa();
console.exit(0);
</script>
<button onclick="return aa()">Click me!</button>
</body>
</html>

View File

@ -0,0 +1,21 @@
<html>
<body>
<a href="/home">BBB</a>
<b dir="ltr" id="aaaa" class="a b c">bbb</b>
<a dir="rtl" id="blabla" href="/">BBB<b id="b1">AAA</b><u dir="auto" id="ble" title="test">UUU</u>AAAAAAA
</a>
<a id="bb" dir="blalalala" href="/">BB</a>
<script>
function aa()
{
var x = document.getElementById('blabla').firstElementChild.outerHTML;
console.assert(x === '<B id="b1">AAA</B>', 'B');
}
console.error('element.firstElementChild');
aa();
console.exit(0);
</script>
<button onclick="return aa()">blabla firstElementChild outerHTML</button>
</body>
</html>

View File

@ -0,0 +1,30 @@
<html>
<body>
<a href="/home">BBB</a>
<b id="aaaa">bbb</b>
<a id="blabla" href="/" rel="nofollow">
<b>AAA</b><u id="ble">UUU</u>AAAAAAA
</a>
<a id="bb" href="/">BB</a>
<script>
function aa()
{
var a = document.getElementById('blabla').getAttribute('rel');
console.assert(a === 'nofollow', a);
}
function bb()
{
var b = document.getElementById('ble').getAttribute('href');
console.assert(b === null, b);
}
console.error('element.getAttribute.html');
aa();
bb();
console.exit(0);
</script>
<button onclick="return aa()">blabla rel nofollow</button>
<button onclick="return bb()">ble href null</button>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
color: red;
}
</style>
</head>
<body>
<h1 class="democlass">Hello World</h1>
<p>Click the button to display the value of the class attribute node of the h1 element.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var elmnt = document.getElementsByTagName("H1")[0];
var attr = elmnt.getAttributeNode("class").value;
console.assert(attr === 'democlass', 'democlass');
}
console.error('element.getAttributeNode.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<body id="body">
First Name: <input name="fname" type="text" value="Michael"><br>
First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the tag name of the first element in the body that has tag P.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById('body').getElementsByTagName("P").item(0).outerHTML;
console.assert(x === '<P>Click the button to get the tag name of the first element in the body that has tag P.</P>', 'first p');
}
console.error('element.getElementByTagName.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<html>
<body>
<a href="/home">BBB</a>
<b id="aaaa">bbb</b>
<a id="blabla" href="/" rel="nofollow">
<b>AAA</b><u id="ble">UUU</u>AAAAAAA
</a>
<a id="bb" href="/">BB</a>
<script>
function aa()
{
var a = document.getElementById('blabla').hasAttribute('rel');
console.assert(a, 'True');
}
function bb()
{
var b = document.getElementById('ble').hasAttribute('href');
console.assert(!b, 'False');
}
console.error('element.hasAttribute.html');
aa();
bb();
console.exit(0);
</script>
<button onclick="return aa()">blabla rel true</button>
<button onclick="return bb()">ble href false</button>
</body>
</html>

View File

@ -0,0 +1,22 @@
<html>
<body>
<a href="/home">BBB</a>
<b id="aaaa">bbb</b>
<a id="blabla" href="/" rel="nofollow">
<b>AAA</b><u id="ble">UUU</u>AAAAAAA
</a>
<a id="bb" href="/">BB</a>
<script>
function aa()
{
var a = document.getElementById('blabla').hasAttributes();
console.assert(a, 'True');
}
console.error('element.hasAttributes.html');
aa();
console.exit(0);
</script>
<button onclick="return aa()">blabla has attributes</button>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to see if the ul element has any child nodes.</p>
<button onclick="myFunction()">Try it</button>
<p>Try removing the child nodes of the list element, and the result will be false instead of true.</p>
<p><strong>Note:</strong> Whitespace inside a node is considered as text nodes, so if you leave any white space or line feeds inside an element, that element still has child nodes.</p>
<p id="demo"></p>
<script>
function myFunction() {
var a = document.getElementById("myList").hasChildNodes();
console.assert(a, 'True');
}
console.error('element.hasChildNodes.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,14 @@
<html>
<body>
<a href="/">inner</a>
<button id="blabla">AAAAA</button>
<button>BBBB</button>
<script>
console.error('element.id.html');
console.assert(document.getElementById('blabla').innerHTML === 'AAAAA', 'AAAAA');
document.getElementsByTagName("A")[0].id = 'test';
console.assert(document.getElementById('test').innerHTML === 'inner', 'inner');
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,33 @@
<html>
<body>
<a href="/home">BBB</a>
<b id="aaaa">bbb</b>
<a id="blabla" href="/">
<b>AAA</b><u id="ble">UUU</u>AAAAAAA
</a>
<a id="bb" href="/">BB</a>
<script>
function aa()
{
var a1 = document.getElementById('blabla').innerHTML;
console.assert(a1 === '\n<B>AAA</B><U id="ble">UUU</U>AAAAAAA\n', a1);
var a2 = document.getElementById('ble').innerHTML;
console.assert(a2 === 'UUU', 'UUU');
}
function bb()
{
document.getElementById('blabla').innerHTML = '<u>test</u><b>OK</b>';
var b1 = document.getElementById('blabla').outerHTML;
console.assert(b1 === '<A id="blabla" href="/"><U>test</U><B>OK</B></A>', 'Changed');
}
console.error('element.innerHTML.html');
aa();
bb();
console.exit(0);
</script>
<button onclick="return aa()">Click me!</button>
<button onclick="return bb()">innerText test</button>
</body>
</html>

View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to insert an item to the list.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Example explained:</strong><br>First create a LI node,<br> then create a Text node,<br> then append the Text node to the LI node.<br>Finally insert the LI node before the first child node in the list.</p>
<script>
function myFunction() {
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Water");
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.firstChild);
var result = document.getElementsByTagName("UL")[0].outerHTML;
console.assert(result === '<UL id="myList"><LI>Water</LI>\n <LI>Coffee</LI>\n <LI>Tea</LI>\n</UL>', 'Water, Coffee, Tea');
}
console.error('element.insertBefore.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the buttons to compare the <strong>first item</strong> in two of the lists.</p>
<button onclick="testFunction('myList1','myList2')">Compare List 1 and 2</button>
<button onclick="testFunction('myList1','myList3')">Compare List 1 and 3</button>
<br><br>
List 1:
<ul id="myList1"><li><a href="/" rel="nofollow">Water</a></li><li>Milk</li></ul>
List 2:
<ul id="myList2"><li>Coffee</li><li>Tea</li></ul>
List 3:
<ul id="myList3"><li><a href="/" rel="nofollow">Water</a></li><li>Fire</li></ul>
<p><strong>Note:</strong> Internet Explorer 8 and earlier does not support the isEqualNode method.</p>
<p id="demo"></p>
<script>
function testFunction(x, y, expected) {
var item1 = document.getElementById(x).firstChild;
var item2 = document.getElementById(y).firstChild;
var res = item1.isEqualNode(item2);
console.assert(res === expected, x, y, expected);
}
console.error('element.isEqualNode.html');
testFunction('myList1', 'myList2', false);
testFunction('myList1', 'myList3', true);
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check if the ul element with id="myList" is the same as the document's first ul element.</p>
<button onclick="myFunction()">Try it</button>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p><strong>Note:</strong> Firefox stopped supported this method as of version 10, Instead, use === to compare if two nodes are the same.</p>
<p><strong>Note:</strong> Internet Explorer 8 and earlier does not support the isSameNode() method.</p>
<p id="demo"></p>
<script>
function myFunction() {
var item1 = document.getElementById("myList");
var item2 = document.getElementsByTagName("UL")[0];
var x = item1.isSameNode(item2);
console.assert(x, 'True');
}
console.error('element.isSameNode.html');
myFunction();
console.exit(0);
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<html>
<body>
<a href="/home">BBB</a>
<b id="aaaa" lang="en">bbb</b>
<a id="blabla" href="/">
<b>AAA</b><u id="ble" title="test">UUU</u>AAAAAAA
</a>
<a id="bb" href="/">BB</a>
<script>
function testaa(expected)
{
var x = document.getElementById('aaaa').lang;
console.assert(x === expected, expected);
}
function bb()
{
document.getElementById('aaaa').lang = 'pl';
testaa('pl');
}
console.error('element.lang.html');
testaa('en');
bb();
console.exit(0);
</script>
<button onclick="return aa()">Click me!</button>
<button onclick="return bb()">Set lang to pl</button>
</body>
</html>

View File

@ -0,0 +1,20 @@
<html>
<body>
<a href="/home">BBB</a>
<b dir="ltr" id="aaaa" class="a b c">bbb</b>
<a dir="rtl" id="blabla" href="/"><b id="b1">AAA</b><u dir="auto" id="ble" title="test">UUUAAAAAAA</u></a>
<a id="bb" dir="blalalala" href="/">BB</a>
<script>
function aa()
{
var x = document.getElementById('blabla').lastChild.innerHTML;
console.assert(x === 'UUUAAAAAAA', 'UUUAAAAAAA');
}
console.error('element.lastChild.html');
aa();
console.exit(0);
</script>
<button onclick="return aa()">Click me!</button>
</body>
</html>

View File

@ -0,0 +1,21 @@
<html>
<body>
<a href="/home">BBB</a>
<b dir="ltr" id="aaaa" class="a b c">bbb</b>
<a dir="rtl" id="blabla" href="/">BBB<b id="b1">AAA</b><u dir="auto" id="ble" title="test">UUU</u>AAAAAAA<!-- comment -->
</a>
<a id="bb" dir="blalalala" href="/">BB</a>
<script>
function aa()
{
var x = document.getElementById('blabla').lastElementChild.outerHTML;
console.assert(x === '<U dir="auto" id="ble" title="test">UUU</U>', 'u');
}
console.error('element.lastElementChild.html');
aa();
console.exit(0);
</script>
<button onclick="return aa()">blabla lastElementChild outerHTML</button>
</body>
</html>

View File

@ -0,0 +1,21 @@
<ul id="birds">
<li>Orange-winged parrot</li>
<li class="endangered">Philippine eagle</li>
<li>Great white pelican</li>
</ul>
<script type="text/javascript">
console.error('element.matches');
var birds = document.getElementsByTagName('li');
for (var i = 0; i < birds.length; i++) {
if (birds[i].matches('.endangered')) {
console.assert(birds[i].textContent === 'Philippine eagle', 'endangered');
}
}
console.exit(0);
</script>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<body>
<h1>HTMLCollection namedItem() Method</h1>
<p id="myElement">The namedItem() method returns the element with the specified ID or name.</p>
<p>This example uses a shorthand method for the namedItem() method</p>
<p>Click the button to return the content of the P element with ID "myElement":</p>
<button onclick="myFunction()">Alert innerHTML of P</button>
<script>
function myFunction() {
var x = document.getElementsByTagName("P");//.namedItem("myElement").innerHTML;
console.assert(x === 'The namedItem() method returns the element with the specified ID or name.', x);
}
console.error('element.namedItem.html');
myFunction();
console.exit(0);
</script>
</body>
</html>