【面接必須】javascript操作DOM元素

前言
時間が経つのは本当に早いです.いつの間にか年末になりました.この一年は自分の仕事に満足していますか?評価基準は何ですか?もちろん馬雲の二つの基準です.お金は届きましたか?さっぱりしていますか?答えが全部ノなら、転職するつもりですか?
年後の転職ラッシュに対応するために、これからは基礎をもう一度通過します.ネットで収集した面接問題から始めて、できるだけ全面的に先端の基礎知識をカバーします.年後の面接のためにウォーミングアップします.私も面接の経験がないですが、基礎をしっかり固めているのは間違いないです.だから面倒をいとわずに繰り返して働いています.簡単な基礎の面接問題を集めて、関連の先端知識を抽出して、分析して記録しています.まあいいです.早く働けば、今から年を重ねても、少しは収穫があるはずです.
また、原生jsに対する私の考えも最近生まれました.IE 6、7、8の淘汰に伴い、ES 5の普及は、ES 5の基準で全面的に開発されました.この流れから見れば、jQueryは没落しそうです.それは主に低いバージョンのIEの互換性のある処理をすることです.私はjQueryの重大な依存者ですが、いつかjQueryが本当に消えたら、コードも書けなくなります.心配ですので、これからは原生jsを大切にします.jqを使わないところは大丈夫です.今回の基礎知識を総括するにつれて、私も原生jsをよく復習して、未来のために早く計画を立てるつもりです.
本題
面接問題といえば、一番怖いのは何ですか?私が一番怖いのは問題が一つしかないです.短いほど難しいです.例えば、jsでDOM元素を操作する方法です.
この問題は簡単ですか?実はそうではないです.DOM操作は要素の作成、検索、追加、移動、コピー、削除を含み、各操作はまた多くの問題を拡張することができる.いつもjqや他のフレームを使っていると、生の書き方はとっくに忘れてしまうかもしれません.ですから、私はこの問題を文章で説明したいです.
新しい要素を作成
document.creat Elementは、要素を作成し、新規要素の参照を返します.パラメータはラベルの名前です.jqでは、このように要素を作成することができます.

var node = $('<div>');
var node2 = $('<span id="s"></span>');

原生を使っている私達は必ず要素のラベル名称を伝えなければなりません.jqのように柔軟に使えません.例えば:

var node = document.createElement('div');

新しい要素を追加
DOMツリーに新しい元素を追加する方法は二つあります.それぞれはapendChild(newElement)とinsertBefore(newElement、beforeWhichElement)です.
apendChildはある要素にサブノードを追加し、bodyに要素を追加すると、末尾に追加されます.

var node = document.createElement('div');
node.innerHTML = '      ';
document.body.appendChild(node);

insertBeforeも一つの要素にサブノードを追加しますが、どのサブノードの前に追加するかを指定できます.二つ目のパラメータを指定しないと最後にデフォルトで追加されます.つまり、apendChild効果と同じです.使用方法は以下の通りです.

var node = document.createElement('div');
node.innerHTML = '      ';
var list = document.getElementById('list');
var item1 = document.getElementById('item1');
list.insertBefore(node,item1);

リストのサブ要素アイテムアイテムアイテム1の前に新しく作成した要素nodeを挿入します.生jsは、jqのprependのように、ヘッドからサブノードを追加する方法がない.
要素を移動
移動元素のDOMツリーにおける位置は、やはり一般的な需要である.要素の移動を完了するには新しい方法が必要ではないですか?それとも上のapendChildとinsertBeforeを使用しますか?ただ操作の要素は新しく作成したのではなく、既存のノードから移動が必要なものを選択します.例えば、2つの要素の位置を交換します.

var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
list.insertBefore(item2,item1);// item2   item1  

アプリを使うのも同じです.例えば:

var item3 = document.getElementById('item3');
var s = document.getElementById('some');
item3.appendChild(s);// id some      item3 

要素をコピー
要素のコピーはcloneNode(clone ChildNodes)法を使用しており、パラメータはbollanタイプで、子要素をクローンするかどうかを表しています.jqのcloneメソッドと異なる場合、元の要素にバインディングされたイベントモニターをクローンできません.使用方法は以下の通りです.

var s = document.getElementById('some');
var sclone = s.cloneNode(true);

要素を削除
removeChild(element)法を使用して要素を削除します.父要素を先に見つけて、そのサブ要素を削除します.

var list = document.getElementById('list');
var item1 = document.getElementById('item1');
list.removeChild(item1);

要素を検索
要素の内容を検索するのは少し多いです.jqは強力なセレクタを提供し、これもその核心の一つである.jqを離れても、元のjsを利用してあなたの必要な元素を選択する方法が分かります.getElementByIdは多くなく、getElements ByTagName(tagName)は、該当する要素の配列を返します.この他に、どのような要素が他の要素にアクセスできるかを知る必要があります.要約すると、主に以下のポインタが含まれます.

parent Node:親ノード

を指す.

childNodes:すべてのサブノードを指し、1つの配列

です.

previous Sibling:前の兄弟ノード

を指す.

nextSibling:次の兄弟ノード

を指す.

firstChild:第一のサブノード

を指す.

lastChild:最後のサブノード

を指す.
以下のように使います.

var item2 = document.getElementById('item2');
var parentNode = item2.parentNode;
var childNodes = item2.childNodes;
var previousSibling = item2.previousSibling;
var nextSibling = item2.nextSibling;
var firstChild = item2.firstChild;
var lastChild = item2.lastChild;

console.log(parentNode,childNodes,previousSibling,nextSibling,firstChild,lastChild);

これはjqのセレクタよりも遥かに悪いと思うかもしれません.いいニュースを教えてください.今はもっと強いものが使えます.それはquerySelectorとquerySelectorAllです.この二つの方法はES 5に新しく追加されました.彼らの役割はjqの選択器のように、cssスタイルのような説明を使って必要な元素を選ぶことができます.たとえば:

document.querySelector('#list');//  id list   
document.querySelectorAll('.green');//  class green   ，       

両者の違いは分かります.querySelectorは一つの要素だけを返します.複数にマッチすると一番目の要素に戻ります.また、querySelectorAllは、すべての整合要素配列を返します.この二つの原生のjs方法がありますが、jQueryの没落は遠くないと思いますか?
終了
本编の记录はこれで终わります.これからはDOMの操作を闻くと、対応できます.原生のコードを自分で叩いてみないと忘れてしまいます.ただ、本編では触れていないのが、DOM操作のブラウザ互換性です.正直に言うと、この知識は私も実際に会ったことがありません.全部jqのお世話になりました.だから本編は浅い段階のものしか記録していません.