ホームページ > 記事 > ウェブフロントエンド > JJavaScript学習実践事例（開発でよく使う）_JavaScriptスキル
JJavaScript学習実践事例（開発でよく使う）_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 17:52:13954ブラウズ
要素のテキスト コンテンツをループするカスタム関数
この関数を使用すると、任意の要素のテキスト コンテンツを取得できます。
テキスト コンテンツをループします。要素の
コードをコピー コードは次のとおりです。
ほとんどの場合、隣接するテキストではなく DOM 要素を走査する必要があります。Node
そのため、previousSibling、nextSibling、firstChild、lastChild、parentNode を置き換えるいくつかの関数を独自に定義できます。 ;
<--
var obj=document.getElementById('test');
document.write("次の兄弟ノードを返すには nextSibling div 要素、①ノードの種類: " obj .nextSibling.nodeType "②ノード名:" obj.nextSibling.nodeName "
");
document.write("カスタム next 関数を使用して次の兄弟を返しますdiv要素の要素、①ノードタイプ:" next(obj).nodeType "②ノード名:" next(obj).nodeName "
");
document.write("の最初の子ノードを使用しますfirstChild によって返される div 要素、① ノード タイプ: " obj.firstChild.nodeType "② ノード名: " obj.firstChild.nodeName "
");
document.write("使用して返される最初の div 要素カスタム first 関数の子要素、① ノードの種類: " first(obj).nodeType " ② ノード名: " first(obj).nodeName "
");
document.write("の最後のものを使用しますlastChild によって返される div 要素 子ノード、① ノードタイプ: " obj.lastChild.nodeType " ② ノード名: " obj.lastChild.nodeName "
");
document.write("div によって返されます)カスタム last 関数 要素の最後の子要素、①ノードタイプ: " last(obj).nodeType " ② ノード名: " last(obj).nodeName "
");
//--> ;
フォーム オブジェクトを取得する複数の方法🎜>
コードをコピー
コードは次のとおりです:
document.write('Test' (i 1) '
');
}
var o=document.getElementsByName("sel[]");//グローバル変数
//すべて選択
関数 selall(){
for(var i=0;io[i].checked="true";
}
}
//何も選択しません
function namesalll(){
for(var i=0;io[i].checked="";
}
}
//反転
関数 invert(){
for(var i=0;iif(o[i].checked==true ){
o [i].checked="";
}else{
o[i].checked=true;
}
}
// -->
すべて選択 )">すべてのチェックを外します
反転
マウスを上に移動すると、サブ列リストが表示されます
コードをコピー
');
}
var o=document.getElementsByName("sel[]");//グローバル変数
//すべて選択
関数 selall(){
for(var i=0;i
}
}
//何も選択しません
function namesalll(){
for(var i=0;i
}
}
//反転
関数 invert(){
for(var i=0;i
o [i].checked="";
}else{
o[i].checked=true;
}
}
// -->
すべて選択 )">すべてのチェックを外します
反転
マウスを上に移動すると、サブ列リストが表示されます
コードをコピー
コードは次のとおりです:
显示隐藏菜单
li{
リストスタイル:なし;
}
#menu ul li{
float:left;
幅:75ピクセル;
高さ:30px;
text-align:center;
}
#submenu{
clear:both;
}
#submenu ul li{
background:#888;
幅:236px;
}
#submenu ul li a{
color:#fff;
テキスト装飾:なし;
}
.highlight{
background:#888;
}
- メニュー 1
- メニュー 2
- メニュー 3