多次元配列において、上の階層を参照する方法

Question

###現在やろうとしていること
HTMLのタグを加工選別し、配列にコピーして、多次元配列によって、そのHTMLの親ノード子ノードを再現するのを目指しています。配列の要素はHTMLのタグのID名にして、多次元配列から直接そのタグにアクセスできるようにしています。
例えば下記のようなHTML文書があったとします。

<math id="math">
  <mi id="1">y</mi>
  <mo id="2">=</mo>
  <mfrac id="3">
    <mrow id="4">
      <mn id="6">1</mn>
    </mrow>
    <mrow id="5">
    </mrow>
  </mfrac>
</math>

これを多次元配列で表すと次のようになります。

var mathArray = {
    id: 'math',
    array: [
        '1',
        '2',
        {
            id: '3',
            argument1: {
                id: '4',
                array: ['6']
            },
            argument2: {
                id: '5',
                array: []
            }
        }
    ]
}

###出来ないこと
例えば、id="7"のタグを動的に下記の指定したところに入れることが目標とします。

var point = mathArray['array'][2]['argument2']['array'][0]

タグを挿入する場合、appendChild()を使うのですが、その時どうしても親ノードを記述しないといけません。親ノードのidは次のようにして参照することが出来ます。

var point2 = mathArray['array'][2]['argument']['id']

僕が分からないのは、どうやってpoint変数からpoint2変数のような参照をするかです。
僕が考えたプロセスは、
0. pointから['array'][0]を消す
0. ['id']を付け足す

なのですが、プロセス1のやり方が分かりません。

###僕が考えた不器用なやり方
予め、
var point = ['array', 2, 'argument2', 'array', 0];
と宣言して、for文を使って[]を足していき、最後にFunction()で文字列をメソッドに変換するやり方です。
多分時間がかかるので、もっと時間がかからない方法を探してます。

var changeF = function(point) {
    Faunction(point)();
}
var connect = 'document.getElementById(mathArray';
for(var i = 0; i <= point.length - 3; i++) {
    if(typeof mathArray[i] === 'string') {
        connect += '["' + mathArray[i] + '"]';
    } else {
        connect += '[' + mathArray[i] + ']';
    }
}
connect += '["id"]).appendChild(<入れたいElement>);';
changeF(connect);

###使用するブラウザ
使用するブラウザはFireFoxです。違うブラウザではMathMLが表示されません。

Comments

[kei344]

「多次元配列」にわざわざする意味が読み取れませんでした。JavaScriptでHTMLを扱う物に「DOM」という物があり、それが既にツリー上になった要素にアクセスする方法を提供しています。idがあるならそこからアクセスして、その親を取得することができます。具体的にどういう処理をするために質問のようなコードを書かれているのでしょう。

[suzunox]

僕が本来作ろうとしていたのは、キーボードで文字を打ち込むことで、MathMLを介して数式を表示してくれる代物です。そして、今カーソルのプログラムを作っています。(マウスカーソルではないほう)
矢印キーを押すと縦線が動くのですが、当然カーソルは点滅していて、ただの"|"を入れるとそこに空間が出来たりなくなったりして、不自然になります。そこで、カーソル自身がいるディレクトリに文字がなかった場合は"|"で、あった場合は<style>に、#~~ {border-right[left]: solid 1px }と記入するようにしました。すると、本来カーソルはどこにあるのかわかりにくくなります。それを明確にするために、配列を施し、その中に'cursor'を忍ばせたわけです。
他にも、カーソルは単にタグ一個分飛び越えて移動するわけではなく、暗黙のタグを無視して飛び越えなくてはなりません。例えば、y=axがあったとして、aとxの間には暗黙の演算子"×"がふくまれています。その要素を無視するのが面倒なので、配列の中に無視する要素を含めないことによって、カーソルの移動をたやすくしようというわけです。
あとほかにもあるのですが、今考えたら、配列を施すより、DOM上でやったほうが早く済むようなきがしてきました。

[kei344]

矢印キーで要素間を移動（カーソルを移動）したい、ということであれば、「現在どこの要素にカーソルが居るのか」の情報があれば問題ないような。カーソルで次の要素は子か兄弟か（DOMで探せば見つかる）、前の要素は親（ルートまで親が必ずある）か兄弟になります。

[oikashinoa]

HTMLなら[Node.parentElement - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/parentElement)で親取得が出来ます。

ので全て多次元配列で済ますのではなく、要素追加などはDOMでした後で多次元配列にしてはいかが？

[suzunox]

なるほど、DOMに関するメソッドも使えそうなものがたくさんありますね。parentElementだけでなく、一つ前の要素や後の要素を取得できるメソッドがあるのを知りました。確かに、DOMで要素を追加してから多次元配列で計算するのがいいですね。
やってみます。最後までありがとうございました。

[oikashinoa]

出来上がったら、自己解決として回答を対処方法をまとめて書き込んで下さい。
少し面倒ですが、考えをまとめるいいチャンスです。

Answer 1

多次元配列は上記のようなやり方だとメリットが少ないので、極力控える。
配列で使えたメソッドと同じようなものがDOMでたくさんあるのでそれらを使う。

DOMの様々なメソッド