DOM前世の生

DOMバージョンw3c DOM ， （ ） ， DOM 。DOM 0レベル DOM W3C ， IE Netscape 。DOM 1級1998 10 ，w3c DOM 1.0 。 。 -DOM Core（ ）： XML ， ， 、 、 。 -DOM HTML： HTML 、 、 HTML 、 。DOM 2級2000 1 ，w3c DOM ， ， DOM 2 。2003 1 ，w3c DOM HTML ， HTML 4.01 XHTML 1.0 、 。 DOM2.0 。 DOM 2.0 Core： ， 。 DOM 2.0 HTML： HTML ， 。 DOM 2.0 Event： ， 。 DOM 2.0 Style： css 。 DOM 2.0 Traversal and DOM 2.0 Range： DOM， 。 DOM 2.0 Views： 。 DOM 2.0 。 ie 。DOM 3級2014 4 ，w3c DOM3.0 。 DOM 3.0 Core： 。 。 DOM 3.0 Load and Save： XML DOM DOM XML 。 DOM 3.0 Validation： ， 。DOM 4級2015 11 ，w3c DOM4.0 。 DOM 。前世はすでに追憶になっていますが、やはり今生のDOMに関心を持っています.先端開発者にとってよく使われているDOM APIです.
概念的にMDNでは、文書オブジェクトモデル(DOM)はHTMLとXMLドキュメントのプログラミングインターフェースであると説明されている.これは、文書(構造ツリー)に構造的な表現を提供し、文書の構造、スタイル、内容を変更するために、構造ツリーにアクセスできる方法を定義しています.DOMは、文書を構造化されたノードグループとし、属性と方法を含むオブジェクトとして表現する形式を提供する.本質的には、ウェブページとスクリプトまたはプログラミング言語を接続しています.
ちょっと言いにくいですが、これも作文を書いて字数をそろえるのではありません.つまり、DOMはJavaScriptがウェブページを操作するインターフェースであり、全て「ドキュメントオブジェクトモデル」と呼ばれています.その役割は、ウェブページをJavaScriptオブジェクトに変換することで、スクリプトを使って各種の操作(例えば、ページの内容を添削して調べること)ができます.厳密に言えば、DOMはJavaScriptに属さないが、DOMを操作するのはJavaScriptにとって最も一般的な任務であり、JavaScriptも最もDOM操作の言語である.
DOMとNODEノードの類似度が高く、NODE APIでよく使われるのは以下のいくつかのタイプです.ノード作成型APIです.ページ修正型API;ノードクエリ型API.ノード関係型API.兄弟関係型API;サブ関係API;元素属性タイプAPI;元素スタイルAPI.時間を作ってからNODE APIを並べてもいいです.馬鹿で分かりにくいからです.それからもう一つのブログを書いて、アイデアを比較してみます.この文章は主にDOM APIの元素選択のタイプとDOM添削のAPIのよくある状況を記録しています.
DOM APIが要素を取得する方法:
ID

document.getElementById('myElement'); // IE5.5+
document.querySelector('#myElement'); // IE8+

CSSクラスes

document.getElementsByClassName('myElement'); // IE9+
document.querySelectorAll('.myElement');  // IE8+

HTMLタグ名

document.getElementsByTagName('div'); // IE5.5+
document.querySelectorAll('div'); // IE8+

HTML属性

document.querySelectorAll('[data-foo-bar="someval"]'); // IE8+

疑似クラス

      id=myForm   from         :invalid      ：

document.querySelectorAll('#myForm :invalid'); // IE8+

サブ要素

      id="myParent" ，                ：

document.getElementById('myParent').childNodes;
document.getElementById('myParent').children;// IE 9+

          ng-click         :

document.querySelector('#myParent > [ng-click]');// IE8+

後代元素

       id="myParent"，              ：

document.querySelectorAll('#myParent A'); // IE8+

要素を削除

      div         “ignore” class   :

document.querySelectorAll('DIV:not(.ignore)'); // IE9+

複数選択

          div , a   script   ：

document.querySelectorAll('DIV, A, SCRIPT'); // IE8+

以下はDOM APIの添削調査です.
要素を作成

document.createElement('div');

要素の前/後に要素を挿入する

      id=1   div        id=1.1    div   ：
document.getElementById('1')
    .insertAdjacentHTML('afterend', '
');

       id=1   div        id=0.9    div   ：
document.getElementById('1')
    .insertAdjacentHTML('beforebegin', '
');

作为子元素插入

       parent                   div   :
document.getElementById('parent')
    .insertAdjacentHTML('afterbegin', '
');

                 div   ：
document.getElementById('parent')
    .insertAdjacentHTML('beforeend', '
');

移动元素

       #orphan     parent            :
document.getElementById('parent')
    .appendChild(document.getElementById('orphan'));

       #orphan     parent         :
document.getElementById('parent')
    .insertBefore(document.getElementById('orphan'), document.getElementById('c1'));

要素を削除

document.getElementById('foobar')
    .parentNode.removeChild(document.getElementById('foobar'));

CSSクラスを追加/削除します.

    id="foo"     bold  CSS Class：
document.getElementById('foo').className += 'bold';
  DOM    ：


            Class   ：
document.getElementById('foo').className =
    document.getElementById('foo').className.replace(/^bold$/, '');

添加/删除/修改元素属性

      div       role="button"           button：
document.getElementById('foo').setAttribute('role', 'button');

       role    :
document.getElementById('foo').removeAttribute('role');

添加/修改内容

// IE 5.5+
document.getElementById('div').innerHTML = 'Goodbye!';

// IE 5.5+ but NOT Firefox
document.getElementById('div').innerText = 'GoodBye!';

// IE 9+
document.getElementById('div').textContent = 'Goodbye!';

スタイルの追加と変更

document.getElementById('div').style.fontWeight = 'bold';

やや長い…ブラウザのサポート制限を考慮しないと、'document.querySelectorAll'と'document.getElementById'を関数として定義することができますが、コードは少し簡素化されますか?でも、初心者として、APIを何度もノックしてから、スペルバグが出る確率を減らすことができます.毎日キーボードを打って、生活は本当に楽しいです.残念ですが、最近腰君がいなくなりました.どこに逃げましたか?