js_dom_api

序文

多くの学生は、彼らがjsの操作を使用する場合、しばしば無力、本論文では一般的な方法をまとめたように、jQueryのDOMを操作するために使用されている操作DOM JS誰もが読めるのはは！実際には、の話JSオペレーティングDOM、私は記事の前に長い、長い時間を持っているJS jQueryの実装の属性に関連する操作DOMのJS一般的な方法の大部分を包含し、が、非常に体系的ではないが。APIは、システム今日は総括すると言うことはできません！

ノードAPIを探します

document.getElementById：複数の結果、最初のリターンがある場合は、大文字と小文字を区別し、ID要素を探します。

document.getElementsByClassName：HTMLCollectionを返すために、スペースで区切られたクラス名の複数のクラス名に基づいて要素を見つけます。IE9 +（包括的）は互換性に注意してください。さらに、だけでなく、ドキュメント、のgetElementsByClassNameメソッドは、他の要素をサポートしています。

document.getElementsByTagNameは：ラベルに応じて要素を見つけ、すべてのラベルは*クエリはHTMLCollectionを返すことを示しています。

document.getElementsByName：よる要素のname属性の検索はのNodeListを返します。

document.querySelector：のみ最初のを返す、試合の結果よりも、IE8 +（包括的）、単一ノードを返します。

document.querySelectorAll：NodeListの、IE8 +（包括的）を返します。

document.forms：現在のページを取得し、すべてのフォーム、HTMLCollectionを返します。

ノード作成用API

要素を作成するのcreateElement：

var elem = document.createElement("div"); elem.id = 'haorooms'; elem.style = 'color: red'; elem.innerHTML = '我是新创建的haorooms测试节点'; document.body.appendChild(elem);

要素ドキュメントオブジェクトの一部ではありませんが作成したcreateElementのは、それだけで、このようなHTMLドキュメントに追加するなどのappendChildかのinsertBeforeメソッドを呼び出すには、HTMLドキュメントに追加していない、それを作成しました。

テキストノードを作成しますCREATETEXTNODE：

var node = document.createTextNode("我是文本节点"); document.body.appendChild(node);

ノードのクローンを作成するにcloneNode：

node.cloneNode（真/偽）、それはレプリ要素かどうかを示すブールパラメータを受け取ります。

var from = document.getElementById("test"); var clone = from.cloneNode(true); clone.id = "test2"; document.body.appendChild(clone);

イベントがある場合を除き、ノードのクローンを作成するには、イベントのクローンを作成しません。

この方法で結合、=のaddEventListenerとnode.onclickとxxxのは、どのように結合コピーされません。

createDocumentFragment

この方法は、非常に多くの操作DOMのパフォーマンスを向上させることができ、それを使用し、主に一時的なストレージノードに使用される軽量な文書を表す文書フラグメントであるドキュメント・を、作成するために使用されます。

ノードAPIの変更

1、のappendChild

構文：

parent.appendChild(child);

2、のinsertBefore

parentNode.insertBefore(newNode, refNode);

3、insertAdjacentHTML

//js谷歌浏览器，火狐浏览器，IE8+
el.insertAdjacentHTML('beforebegin', htmlString);

insertAdjacentHTMLについて、APIを使用するには、この比較的簡単に、コンクリートが確認できます。https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

<!-- beforebegin -->
<p>
  <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend -->

4、Element.insertAdjacentElement（）

上記と同様の使用と、

targetElement.insertAdjacentElement(position, element);

5、のremoveChild

removeChildのは、指定された子ノードを削除するために使用され、子ノード、構文を返します。

var deletedChild = parent.removeChild(node);

deletedChild点は、それがまだメモリ内に存在し、ノードへの参照を削除し、次の工程であってもよいです。ノードは、その子ノードを削除していない場合に加えて、エラーが報告されています。削除したノードは、通常、その削除されます。

function removeNode(node) { if(!node) return; if(node.parentNode) node.parentNode.removeChild(node); }

6、のreplaceChild

別のノード、ノードの構文を置き換えるために使用REPLACECHILD：

parent.replaceChild(newChild, oldChild);

APIノードの関係

1.親API

parentNode：のparentNode各ノードは親要素を示すプロパティを持っています。要素の親ノードが要素、ドキュメント、またはドキュメント・あってもよいです。

parentElement：れていない場合、nullが返され、のparentNode、親ノードとの間の差は、要素の要素でなければならない、要素ノードの親要素を返します。

2、APIの子の関係

子供：リアルタイムHTMLCollectionへの復帰は、子ノードは、Element、IE9は、次のブラウザをサポートしていないのです。

childNodes：リアルタイムのNodeListを返し、要素の子ノードのリストを表し、子ノードに注意を払うなどのテキストノード、コメント・ノードを含むことができ;

firstChild：いいえ戻りヌルfirstElementChildあり、これに対応して、存在しない、最初の子ノードを返します。

lastChildは：最後の子を返し、ノーリターンのnullはlastElementChildがあり、それに対応した、ありません。

3、兄弟のタイプAPI

ノードの前のノードを、または存在しない場合はnull：例えば、previousSibling。ノードがテキストノードやコメントノードは、それに対処することが予想と一致しないで取得することが可能であることに注意してください。

ノードのいずれか後に、及び存在する場合はnullではない：nextSibling。それに対処すること、ノードが期待できないとして、テキストノードで取得することが可能であることに注意してください。

previousElementSibling：要素ノードを返す前に、ノードは、以下のブラウザはIE9をサポートしていませんのでご注意、事前要素でなければなりません。

nextElementSiblingは：要素ノードを返した後、ノードは、以下のブラウザはIE9をサポートしていませんのでご注意、要素でなければなりません。

要素プロパティの型のAPI

1、setAttributeメソッドは、要素のプロパティに提供しました：

element.setAttribute(name, value);

名前は属性名である場合、値は特性値です。要素が作成され、割り当てられます。この機能は含まれていない場合。

2、のgetAttribute

getAttributeは、指定された属性名の対応する特性値を返し、そうでない場合、nullが返されます。

var value = element.getAttribute("id");

3、hasAttribute

var result = element.hasAttribute(name); var foo = document.getElementById("foo"); if (foo.hasAttribute("bar")) { // do something }

4、データセット

次のように使用され、プロパティのデータ - 取得HTMLの開始：

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div> let el = document.querySelector('#user'); // el.id == 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateOfBirth === '' el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. // 'someDataAttr' in el.dataset === false el.dataset.someDataAttr = 'mydata'; // 'someDataAttr' in el.dataset === true

スタイル関連のAPI

1、直接スタイルの要素を変更するには

elem.style.color = 'red'; elem.style.setProperty('font-size', '16px'); elem.style.removeProperty('color');

2、動的にスタイルルールを追加

var style = document.createElement('style'); style.innerHTML = 'body{color:red} #top:hover{color: white;}'; document.head.appendChild(style);

3、CLASSLISTはスタイルクラスを取得します。

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo"); div.classList.add("anotherclass"); // if visible is set remove it, otherwise add it div.classList.toggle("visible"); // add/remove visible, depending on test conditional, i less than 10 div.classList.toggle("visible", i < 10 ); alert(div.classList.contains("foo")); // add or remove multiple classes div.classList.add("foo", "bar", "baz"); div.classList.remove("foo", "bar", "baz"); // add or remove multiple classes using spread syntax let cls = ["foo", "bar"]; div.classList.add(...cls); div.classList.remove(...cls); // replace class "foo" with class "bar" div.classList.replace("foo", "bar");

4、window.getComputedStyleが

のみelement.sytle.xxxを通じてインラインスタイルを取得、援助window.getComputedStyleがIE8は、以前は、このメソッドをサポートしていない、要素に適用されるすべてのスタイルを取得することができます。

var style = window.getComputedStyle(element[, pseudoElt]);

概要JS一般的に使用されるオペレーティングDOM（操作API JS DOM）