button ran=

dom model

--- a b c ---

--- a b c ---

Source /home/ch45859/web/wlkl.ch/public_html/inf/js/j03dom.php 

<html>
 <head>
<meta charset="utf-8">
  <title> <?php echo basename(__file__, '.php'); ?> </title>
    <script type="text/javascript">
        var ran = Math.floor(Math.random() * 100);
        var stop = 100;
        var done = new Map();
        function clean(obj) {
            if (obj == null)
                return 'null';
            if (obj == undefined)
                return 'undefined';
            var s = obj.toString();
            var t = (s.length <= 120 ? s : s.substr(0,97) + '...' ) . replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, '\\n');
            return 'typeof=' + typeof obj + ' constructor=' + obj.constructor.name + ' length=' + s.length + ': ' + t;
            }  

        function showNode(nd, off) {
            var res = ' '.repeat(off) + 'node ';
            var r2 =  nd.nodeName + ' ' + nd.nodeType + ' children ' + nd.children.length + '\n';
            if (done.has(nd))
                return res + done.get(nd) + ' alreadyDone ' + r2;
            done.set(nd, 'n' + (done.size+1));
            res = res + done.get(nd) + ' ' + r2;
            for (var pr in nd) {
                res = res +  ' '.repeat(off+4) + '+ ' + pr; 
                if (pr == 'selectionStart' | pr == 'selectionEnd' | pr == 'selectionDirection') 
                    res = res + ' ???avoid error when accessing ???\n';
                else
                    res = res + ' = ' + clean(nd[pr] ) + '\n';
            } 
        
            if (off < 20) 
                for (var i=0; i < nd.children.length && stop-- > 0; i++) {
                    res = res + ' '.repeat(off+1) + 'child ' + i + ' stop=' + stop + ': ' + clean(nd.children[i]) + '\n';
                    if (nd.children[i] != null)
                        res = res + showNode(nd.children[i], off + 2);
                    }
            return res;
        }
        
        function addNd() {
            var n = document.createElement('h2');
            ran++;
            n.innerHTML = 'created h2 ' + ran;
            var dom = document.getElementById('dom');
            document.body.insertBefore(n, dom);
        }

        function removeNd() {

            console.log('lastBut = ' + document.getElementById('lastBut'));
            var r = document.getElementById('lastBut');
            while(r) {
                console.log('r = ' + r + 'name='+r.tagName + ' instanceof ' + (r instanceof HTMLHeadingElement) + ' = ' + clean(r.innerHTML));
                if (r instanceof HTMLHeadingElement & r.tagName == 'H2') {
                    var s = document.body.removeChild(r);
                    window.alert('remove: ' + r.innerHTML); 
                    return;
                }
                r = r.nextSibling;
            }
            window.alert('h2 to remove not found'); 
        }
</script>
 </head>
<body>
<h1 >button ran=
    <script type="text/javascript">
        document.write(ran) 
    </script>
</h1>
<input type="button" value="add node" onclick="addNd()" />
<input id="lastBut" type="button" value="remove node" onclick="removeNd()" />
<h1 id="dom">dom model</h1>
<pre>
--- a b c ---
<script type="text/javascript">
document.writeln(showNode(document, 2)); 
</script>
--- a b c ---
</pre>

<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>