js DOMモデル操作_javascriptスキル

DOM模型中的节点：元素节点、文本节点、属性节点
例：私のdotnet小屋
（1）a是元素节点
（2）“私のdotnet小屋”是文本节点
（3）href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性

属性	类型	说明
nodeName	String	节点名称，根据节点的类型而定义
nodeValue	String	节点的值，根据节点的类型而定义
nodeType	Number	节点类型，1为元素节点，2为属性节点，3为文本节点
firstChild	Node	指向childNodes列表的第一个节点
lastChild	Node	指向childNodes列表的最后一个节点
childNodes	NodeList	所有子节点列表，childNodes[i]可以访问第i+1个节点
parentNode	Node	指向节点的父节点，如果已是根节点，则返回null
previousSibling	Node	指向前一个兄弟节点，如果已是第一个节点，则返回null
nextSibling	Node	指向后一个兄弟节点，如果已是最后一个节点，返回null
Attributes	NameNodeMap	包含一个元素特性的Attr对象，仅用于元素节点
className	String	节点的CSS类
innerHTML	String	某个标记之间的所有内容，包括代码本身

DOM ノードのメソッド
(1) アクセスノード:
[タグ名別]
document.getElementsByTagName(sTagName) メソッド: 同じタグ名を含む要素ノードのリストを返します
[タグID別]
document.getElementById(sElementId)メソッド：指定した値のIDを持つ要素ノードを返す
[前のノードにアクセス] IE、FireFox対応
(カスタマイズ)

コードをコピー コードは次のとおりです:

function prevSib(oNode){
var oTempFirstNode =oNode.parentNode .firstChild;
//最初のノードであるかどうかを判断し、そうであれば null を返します
if(oNode==oTempFirstNode)
var oTempNode=oNode.previousSibling ;
//要素ノードが見つかるまで前の兄弟ノードを 1 つずつ検索します
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling; >//三項演算記号、要素ノードの場合はノード自体を返し、それ以外の場合は null を返します
return (oTempNode.nodeType==1)?:oTempNode:null
}


[次のノードにアクセス] IE および FireFox と互換性があります

(カスタマイズ)

コードをコピー コードは次のとおりです

function nextSib(oNode){

var oTempLastNode=oNode.parentNode.lastChild;
//最後のノードであるかどうかを判断し、そうであれば null を返します
if(oNode==oTempLastNode)
return null ;
var oTempNode=oNode.nextSibling;
//要素ノードが見つかるまで次の兄弟ノードを 1 つずつ検索します
while(oTempNode.nodeType !=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//三項演算子、要素ノードの場合はノード自体を返し、それ以外の場合は null を返します
return(oTempNode. nodeType==1)?oTempNode:null;
}


(2) ノードに子ノードがあるかどうかを判断します:

NodeObject.hasChildNodes() メソッド: childNodes に 1 つ以上が含まれる場合ノード、true を返します
(3) ノード属性の設定 :
eleNode.getAttribute(attrNode) メソッド: eleNode 要素の attrNode 属性を返します
eleNode.setAttribute(attrNode,sNewValue) メソッド: の値を設定しますeleNode 要素の attrNode 属性を sNewValue
に設定 (4) ノードの作成:
document.createElement(eleNode) メソッド: 要素ノードの作成 eleNode
document.createTextNode(textNode) メソッド: テキスト ノードの作成textNode
document.createDocumentFragment() メソッド: ドキュメント フラグメント ノードを作成します
( 5) ノードを追加します:
eleNode.appendChild(textNode) メソッド: textNode ノードを childNodes の末尾に追加します
(6)ノードの削除:
oNode.parentNode.removeChild(oNode) メソッド: childNodes から削除 oNode ノード
(7) ノードの置換:
oNode.parentNode.replaceChild(oNewNode,oOldNode) メソッド: oOldNode ノードを置き換えます。 childNodes with oNewNode ノード
(8) 特定のノードの前にノードを挿入します:
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode) メソッド: childNodes の oTargetNode ノードの前に oNewNode ノードを挿入します
(9) 後にノードを挿入します特定のノード:
(カスタム) oTargetNode.parentNode.insertAfter( oNewNode, oTargetNode) メソッド: childNodes の oTargetNode ノードの後に​​ oNewNode ノードを挿入します

コードをコピー コードは次のとおりです。

function insertAfter(oNewNode,oTargetNode){

var oParentNode=oTargetNode.parentNode;
if(oParentNode.lastChild== oTargetNode)
oParentNode.appendChild(oNewNode);
else
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling)