JavaScriptの高度なDOMドキュメント、簡単なカプセル化と呼び出し、動的スタイルの追加と削除(6)_基礎知識

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html に戻ってここの記事を読むと、間違いなくより深い理解が得られるでしょう。ここでは概念的なものをほとんど紹介しないので、初心者にとっては少し難しいかもしれない以下の例を見てください。

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

CSS デモ

私は美人、特に背の高い美人が好きです ;




このドキュメントの DOM 表現は次のとおりです:

この図は HTML ドキュメントのツリーを表しています。

すべての DOM ツリー構造は、さまざまなタイプの Node オブジェクトで表されます。firstChild、lastChild、nextSibling、previousSibling、および ParentNode プロパティは、ノード

、appendChild のツリーを横断する方法を提供します。 , RemoveChild、replaceChildh、insertBefore などのメソッドを使用すると、ドキュメントにノードを追加したり、ドキュメントからノードを削除したりできます。 理解できなくても大丈夫です。次に、たくさんの例を使って理解してもらいます。

1. まずCSSで美化したリストを作成します コードをコピーします

コードは次のとおりです: body{ margin:0px; } #container{font-family:tahoma;font-サイズ:14px ;ボーダー:ソリッド 1px #99ffcc; 幅:200px;高さ:140px; } #container ul{list-style:none;padding:1px 0px 0px;}

#container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}

#container ul li a{background-color:gray;text-decoration:none;display:block;ボーダー左:ソリッド 10px 赤;マージン:0px; パディング:5px 0px 5px 10px;}
#container ul li a:hover{background-color:red; color:#000000; }
> ;


2.

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

• ;/a>
• MyBlog
;a href="#" >スポーツ
• ニュース
;li>コンタン

3.次の図が表示されるはずです:

4. 上の図に従って要素の総数を取得します




コードをコピーします

コードは次のとおりです。 >document.table.txt.value = "element:" count;
function elementTotal(e)
{

if(e.nodeType == 1) count ; var Children = e.childNodes ;

for(var i = 0;i
elementTotal(children[i]));

注: 要素の数を取得するには、 を追加できます。5.テキストはすべて大文字です

コードをコピー


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


Tools.ModifyElement = function edit(e){
if(e .nodeType == 3)
e.data = e.data.toUpperCase();
else
{
for(var i = e .firstChild;i!=null;i=i.nextSibling)
modify(i)
}

;
注: uppercase

効果:

6. リストを並べ替えます

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

Tools.documentSort = function(e){
var textArray = [];
if(typeof e == "string") e = document.getElementById(e); (var x = e.firstChild; x!= null;x=x.nextSibling)
if(x.nodeType == 1) textArray.push(x)
textArray.sort(function(n,m); ){
var s = n.firstChild.firstChild.data;
if(s>t) return -1; ;t) return 1;
else return
});


注:並べ替えボタン>

効果:

7. リスト項目 (子ノード) を動的に挿入します

コードをコピーします コードは次のとおりです。 Tools.insertElement = function(n,e){

if(typeof n == "string") n = document.getElementById(n); 🎜>var li = document.createElement(e);

var a = document.createElement("a");
a.setAttribute("href","#"); .createTextNode( "HotBlog");
a.appendChild(txt);
varparent = n.parentNode(li,n);
};


注: Insert button> を追加できます。 ;

効果:

8. JavaScript クラスを使用してドキュメントを動的に作成します
1. スタイル シート

コードをコピーします

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

.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//ここの写真 .toolcontent{background-color:#ffffff; border:solid 1px #99ff00; font:tahoma 12px; color:#000000;} 2. javascript class

コードをコピー

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

function Tooltip() { this.tooltip = document.createElement("div"); this.tooltip.style.position = "absolute"; this.tooltip.className = "tooltip"; content = document.createElement( "div");

this.content.style.position = "relative";

this.content.className = "toolcontent";
}
Tooltip.prototype.show = function(text,x,y)
{
this.content.innerHTML = text;
this.tooltip.style.left = x "px";
this.tooltip.style.top = y "px";
this.tooltip.style.visibility = "visible";
if(this.tooltip.parentNode != ドキュメント。 body)
document .body.appendChild(this.tooltip);
Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";}; >var t = 新しいツールチップ ();
関数 Hide()
{
t.hide();
}
関数 show()
{
t.show ("hello ",300 ,0);
}
function init()
{
document.operator.show.onclick = 表示;
document.operator.hide.onclick = 隠す;
}


注: 上記を使用するには、次の手順も実行する必要があります: 1. 本体に onload=init();2 を追加します:




効果: (表示されているものを非表示にする)

9. スタイルを動的に追加および削除します

1. スタイル シート




コードをコピーします

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

.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc;幅:200px;高さ:140px;float:left;}
.container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;}
.container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}
.container ul li a{背景色:グレー;テキスト装飾:なし;表示:ブロック;ボーダー左:実線の 10 ピクセルの赤;マージン:0 ピクセル;パディング:5px 0px 5px 10px;}
.container ul li a:hover{background-color:red;色:#ffffff; }

2、ツール関数数（動态追加、删除样式）

复制代 代码次のように:

var CSSclass = {};
CSSclass.is = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
var クラス = e.className;
if(!classes) は false を返します。
if(classes == c) は true を返します。
return e.className.search("\b" c "\b*") != -1;
};
CSSclass.add = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
if(CSSclass.is(e,c))return;
//if(e.className) c="" c;
e.className = c;
};
CSSclass.remove = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
//e.id = e.id.replace(new RegExp("\b" e.id "\b\s*","g"),"");
e.className = e.className.replace(new RegExp("\b" c "\b\s*","g"),"");
};

3、体内に如下元素を添加

复制代代码如下:

• ホーム


• MyBlog


• スポーツ


• ニュース


• コンテンツ

アニメーション追加样式
アニメーション态删除样式

效果：

は样式の子

は样式の後に追加されました。

小结：Dom文档操作、内部これには、大家が提示していない非常に多くの詳細なイベントが含まれています。问题可以给我留言!)