小さな画像をクリックして大きな画像を表示する効果を実現するための js アイデアとサンプル コード_javascript スキル

DOM: JavaScriptを使用してHTMLノードを操作することです。

知識ポイント:

HTML を DOM ツリーに変換する

HTML を見ると、DOM ツリーを描画します。

ノードの作成、ノードの追加、ノードの削除

varnodeObj = document.createElement("ノード名") //要素ノードの作成

ドキュメント.createTextNode("Text"); //テキストノードを作成します

親ノード.appendChild(子ノード) //子ノードを親ノードに追加します

親ノード.removeChild(子ノード); ;

//ノード

document.getElementById("id 番号");

document.getElementsByTagName("html タグ名")[0];
親node.getElementsByTagName("htmlタグ名")[0];

//子要素のノードを取得

親node.childNodes

Parent node.firstChild

Parent node.lastChild

//ノード属性

nodeType 1 要素 ノード 2 属性 ノード 3 テキスト ノード

nodeName 要素 ノードによって使用されます、ラベル名の大文字の文字列を返します

nodeValue テキスト ノードによって使用され、テキストを返すか設定します

//兄弟ノードを取得します

Current node.nextSiblings


ノードの属性を設定します
Node.setAttribute(属性名, 値);

Node.getAttribute(属性名); p. setAttrubute("style","color:red;font-size:20px;");

//

ノードを設定または取得できます。 🎜>

テキストを設定します


テキスト node.nodeValue=text;
ケース: 小さい画像をクリックすると、大きな画像が表示されます



コードをコピー

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

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。