今日は2019年6月25日、それ以外の何物でもあり、彼の頭を見て記事を書いて、JavaScriptの知識の数をいっぱい!
ここでは、最初の章では、次のとおりです。
JavaScriptのといえば、それは何ですか?バックエンドのスクリプト言語?フロントエンドのプログラミング言語?またはWebブラウザプログラミング言語で実行されていますか?私は、それはそれを考えられている感じ!私はそれが今、サイトに近いと言うことができます!
これは、サイトが彼自身のアイデア、自分のコンピューティングパワーと運用効率を持って、私たちにHTML、CSSプラス振る舞いを与えることです!
今日、私は、JavaScriptのDOMモデルの内部についてお話したいと思います:
DOMモデルは、「ドキュメントオブジェクトモデル」(ドキュメントオブジェクトモデル)のコンセプトと呼ばれている。(例えば、コンテンツを追加または削除するなど)スクリプトでさまざまな操作を行うことができますJavaScriptオブジェクトへのWebページ、。
DOMモデルと呼ばれるノード(ノード)の最小構成単位。ノードの様々なタイプで文書のツリー構造(DOMツリー)。各ノードは、葉のドキュメントツリーとして見ることができます。
次に、我々は、ノード属性から起動します。
図1に示すように、nodeType
プロパティは、ノードの種類を表す整数値を返します。
図2に示すように、nodeName
プロパティは、ノードの名前を返します。
図3は、nodeValue
プロパティは、テキストノード自体、読み書きプロパティの現在の値を表す文字列を返します。
図4に示すように、textContent
プロパティは、現在のノードとそのすべての子孫ノードのテキストコンテンツを返します。
図5は、baseURI
プロパティは、現在のページの絶対パスを表す文字列を返します。このプロパティに基づいて、ブラウザは、ページ上の相対URLパスを計算します。この属性は読み取り専用です。
図6は、ownerDocument
プロパティは、現在のノードの最上位レベルの文書オブジェクト配置され、その戻りdocument
オブジェクト。
7、nextSibling
プロパティは、すぐに現在のノードの最初の兄弟ノードの後ろに戻ります。何の兄弟ノードが存在しない場合は、現在のノードが返された後null
。
図8に示すように、previousSibling
前の現在のノード、最寄りの兄弟ノードへの復帰の属性。何の兄弟がない場合は先に返され、現在のノードのノードnull
。
図9に示すように、parentNode
プロパティは、現在のノードの親を返します。Node要素(エレメント)、文書ノード(文書)、文書フラグメントのノード(ドキュメント・):ノードに対して、その親ノードは3種類のみであってもよいです。
10は、firstChild
プロパティは、現在のノードに子がない場合、それが返され、現在のノードの最初の子を返しますnull
。
図11は、childNodes
プロパティは、オブジェクト(の同様の配列を返しNodeList
、現在のノードのすべての子ノードのメンバーを含むセット)。
図12に示すように、isConnected
プロパティは、文書の現在のノードかどうかを示すブール値を返します。
最後のノードは、私たちの方法です。
図1に示すように、appendChild
この方法は、最後の子ノードとして、現在のノードが挿入されるパラメータとしてノードオブジェクトを受け付けます。戻り値はドキュメントに子ノードです。
例えば:var p = document.createElement('p');
document.body.appendChild(p);
図2に示すように、hasChildNodes
この方法は、現在のノードが子を有するかどうかを示すブール値を返します。
3、cloneNode
ノードをクローニングするための方法。これは、パラメータのクローンながらノードかどうかを示すブール値として受け入れます。その戻り値は、クローン化された新しいノードです。
例えば:var cloneUL = document.querySelector('ul').cloneNode(true);
図4に示すように、
insertBefore
ノードのための方法は、親ノード(内部の指定された位置に挿入されているinsertBefore
方法は、最初のパラメータは、挿入するノードであり、2つのパラメータをとりnewNode
、第2のパラメータはの親ノードであるparentNode
内部ノードの子referenceNode
。newNode
に挿入されreferenceNode
、この子ノードの前に。戻り値は、新しいノードが挿入されていますnewNode
。)。
図5は、removeChild
現在のノードから子を除去するために、パラメータとして子ノードを受け付けます。戻り値は、削除する子ノードです。
6、replaceChild
現在のノードの子を置き換えるために、新しいノードのための方法。
ほとんど右に!まあ、一日それを呼び出します!