Javascript 我所需要的就是用样式分别显示标记名及其内部文本。就像一个HTML编辑器

我正在尝试编辑本地html文件，其中包含多个嵌套表。我所需要的就是用样式分别显示标记名及其内部文本。我的应用程序就像一个HTML编辑器。 示例网站：

现行守则：

---

那么您遇到的实际问题是什么呢？我想要一个循环函数，它能够单独遍历表标记中的所有html标记，并相应地显示标记及其内部文本。关于我的现有代码，请参考下一条评论。如果你有现有代码，如果你把它添加到你的问题中，你可能会得到更好的回答。下面有一个编辑按钮。对不起，埃文，我是stackoverflow的新手。所以我不知道如何表达我的担忧。谢谢埃文，我现在可以更新这个问题了。。。

`    <input type="file" id="FileName" name="file" />Select File:
<span class="readBytesButtons">
<button name='preview'>Preview file</button>
</span>

<div class="top-bar">CONTENT EDITOR</div>
<div>
    <div id="update-header">Input</div>
    <div id="content-header">Preview</div>
    <div id="log">
    <!--<textarea id='text1'></textarea>-->
    </div>
    <div id="content"></div>
</div>
var y = new Array(), tables;
var x = new Array();

function readBlob(opt_startByte, opt_stopByte) {

    var FileName = document.getElementById('FileName').files;
    if (!FileName.length) {
        alert('Please select a file!');
        document.getElementByTagName('button').innerText = 'Preview File';
        return;
    }

    var file = FileName[0];`enter code here`
    var start = 0;
    var stop = file.size - 1;
    var reader = new FileReader();

    reader.onloadend = function (evt) {
        if (evt.target.readyState == FileReader.DONE) { // DONE == 2
            document.getElementById("content").innerHTML = evt.target.result;
            //evt.target.result is the one which has the content read from the file.
            if (document.getElementsByTagName('table') != null) {
                tables = document.getElementsByTagName('table');
                x = childNodesofTables(tables);
                /*for (i=0;i<tables.length; i++) {
                    for (j=0; j<tables[i].childNodes.length; j++) {
                        x.push(tables[i].childNodes[j]);
                    }
                }*/

                y = childNodes_childNodesofTables(x)
                /*for (i=0;i<x.length; i++) {
                    if( x[i].nodeName != '#text' ) {
                        for (j=0; j<x[i].childNodes.length; j++) {
                            y.push(x[i].childNodes[j]);
                        }
                    }
                }*/
                z = childNodes_childNodesofTables(y)
            }
            //
            document.getElementById('log').innerText = y; //DISPLAY CONTENTS OF THE FILE COMPLETELY
            //document.getElemtById('text1').value = y;
        }
    };
    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);

}

document.querySelector('.readBytesButtons').addEventListener('click', function (evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
        readBlob();
        evt.target.innerText = 'Edit File';
    }
}, false);

function childNodesofTables(tables) {
    var aray = new Array();
    for (i = 0; i < tables.length; i++) {
        for (j = 0; j < tables[i].childNodes.length; j++) {

            aray.push(tables[i].childNodes[j]);
        }
    }
    return aray;
};

function childNodes_childNodesofTables(ara) {
    var aray1 = new Array();
    for (i = 0; i < ara.length; i++) {
        if (ara[i].childNodes.length != 0) {
            //if(ara[i].nodeName != '#text' || ara[i].nodeName != 'undefined' ) {
            for (j = 0; j < ara[i].childNodes.length; j++) {
                aray1.push(ara[i].childNodes[j]);
            }
        }
    }
    return aray1;
};`