よく使用される DOM tinying_javascript スキル

序文:

html はドキュメントの DOM ツリーを構築します。このツリーは一連の Node ノードで構成されます。これは文書の構造を定義します。

ノードタイプ:

Node.ELEMENT_NODE(1); //要素ノードがより一般的に使用されます
Node.ATTRIBUTE_NODE(2); //属性ノードがより一般的に使用されます
Node.TEXT_NODE(3); //テキストノードがより一般的に使用されます
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9) //ドキュメント ノードがより一般的に使用されます
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

関連機能:

1. ノードを取得します:

document.getElementById('element');
document.getElementsByTagName('element'); 配列のようなオブジェクトを返します
document.getElementsByName('element'); 配列のようなオブジェクトを返します
document.getElementsByClassName('className') 配列のようなオブジェクトを返します。これは IE7 以前ではサポートされていません。 document.querySelectorAll('class' | 'element') 配列のようなオブジェクトを返します

2. ノードを横断する

子ノードを検索します: element.childNodes 配列のようなオブジェクトを返します

最初の子ノードを見つけます: element.firstChild
最後の子ノードを見つけます: element.lastChild
親要素を見つけます: element.parentNode
前の兄弟要素を検索します: element.previousSibling
次の兄弟要素を検索します: element.nextSibling

3. ノード情報を取得します

要素または属性ノードのラベル名を取得します: elementNode.nodeName

テキスト ノードのコンテンツを取得します: textNode.nodeValue;
要素ノードのコンテンツを取得および設定します (HTML タグが含まれる場合があります): elementNode.innerHTML
要素ノードのプレーンテキストコンテンツを取得および設定します: element.innerText(IE) element.textContent(FF)
属性ノードの値を取得します: attrNode.getAttribute(AttrName);
属性ノードの値を設定します: attrNode.setAttribute(AttrName,AttrValue);
ノードのタイプを取得します:node.nodeType;
要素ノード: 1; 属性ノード: 2; テキストノード: 3; ドキュメントノード: 9; コメントノード: 8;

4. オペレーションノード


要素ノードの作成: document.createElement('element');
テキスト ノードを作成します: document.createTextNode('text');

属性ノードの作成: document.createAttribute('attribute');

ノードの削除:node.remove();
子ノードを削除します:parentNode.removeChild(childNode); ノードの挿入:parentNode.appendChild(childNode) //親ノードの末尾に挿入

parentNode.insertBefore(newNode,existingNode) //既存のノードの前に挿入します。 クローンノード: Node.cloneNode([true]) //trueを渡すとディープコピーを意味します

ノードを置換:parentNode.replaceChild(newNode,oldNode);


関連拡張:


1. DOM の処理において IE と他のブラウザーの間に互換性がないため、いくつかの単純なカプセル化処理が必要です。

2. DOM 要素のスタイルを操作する

 
//=================
function getElementChildren(element) {
   var children = [],
   oldChildNodes = element.childNodes;
   for(var i=0, len=oldChildNodes.length; i<len; i+=1) {
     if(oldChildNodes[i].nodeType == 1) {
        children.push(oldChildNodes[i]);
     }
   }
 return children;
}
 
//==================
function getElementNext(element) {
   var next = element.nextSibling || null;
     if(next) {
       if(next.nodeType == 1) {
          return next;
       } else {
          return arguments.callee(next);
       }
     } else {
     throw new Error("下一个兄弟元素不存在！");
     }
}
 
//======================
function getElementPrev(element) {
   var prev = element.previousSibling || null;
   if(prev) {
     if(prev.nodeType == 1) {
       return prev;
     } else {
       return arguments.callee(prev);
     }
   } else {
     throw new Error("上一个兄弟元素不存在！");
   }
}
 

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。