javascript操作要素のよくある方法のまとめ

本論文の実例は、Javascript操作要素の一般的な方法を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
要素の取得方法1
内蔵するオブジェクトdocument上のgetElement ByIdを使用して、ページ上にid属性の要素が設定されていることを取得し、これをhtmlオブジェクトとして取得し、変数に割り当てます。

<script type="text/javascript">
  var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">    div  </div>

上記の語句は、javascriptを元素の上に書いたら、エラーが発生します。ページの上から下へロードして実行したため、javascriptがページで要素div 1を取得した時、要素div 1はまだロードされていません。解決方法は2つあります。
第一の方法：javascriptをページの一番下に置く。

....
<div id="div1">    div  </div>
....
<script type="text/javascript">
  var oDiv = document.getElementById('div1');
</script>
</body>

第二の方法：javascript文をwindow.onloadトリガの関数の中に置いて、元素の語句を取得してページでロードし終わってから実行します。間違いがないです。

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('div1');
  }
</script>
....
<div id="div1">    div  </div>

要素の取得方法2
内蔵オブジェクトdocument上のgetElements ByTagName法を使用してページ上のラベルを取得できます。取得したのは選択セットで、配列ではありませんが、下付きでセット内のラベル要素を選択できます。

<script type="text/javascript">
  window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    // aLi.style.backgroundColor = 'gold'; //   ！        li
    alert(aLi.length);
    aLi[0].style.backgroundColor = 'gold';
  }
</script>
....
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

操作要素の属性
取得したページ要素は、ページ要素の属性を操作できます。属性の操作には、属性の読み書きが含まれます。
属性の操作方法
1、「.」操作
2、「[]」操作
属性の書き方
1、htmlの属性はjsの中の属性の書き方と同じです。
2、「クラス」属性は「クラスName」と書きます。
3、「style」属性の中の属性は、横棒をラクダの形に変えています。例えば、「font-size」を「style.fontSize」に変えます。
属性を「.」で操作:

<script type="text/javascript">
  window.onload = function(){
    var oInput = document.getElementById('input1');
    var oA = document.getElementById('link1');
    //      
    var sValue = oInput.value;
    var sType = oInput.type;
    var sName = oInput.name;
    var sLinks = oA.href;
    //  (  )  
    oA.style.color = 'red';
    oA.style.fontSize = sValue;
  }
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="link1">    </a>

属性を「[]」で操作します。

<script type="text/javascript">
  window.onload = function(){
    var oInput1 = document.getElementById('input1');
    var oInput2 = document.getElementById('input2');
    var oA = document.getElementById('link1');
    //     
    var sVal1 = oInput1.value;
    var sVal2 = oInput2.value;
    //  (  )  
    // oA.style.val1 = val2;    
    oA.style[sVal1] = sVal2;    
  }
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="link1">    </a>

innerHTML
inners HTMLはラベルの小包の内容を読み込みまたは書き込むことができます。

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('div1');
    //  
    var sTxt = oDiv.innerHTML;
    alert(sTxt);
    //  
    oDiv.innerHTML = '<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" >    <a/>';
  }
</script>
......
<div id="div1">    div  </div>

興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容は当駅のテーマを調べられます。「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術のまとめ」、「JavaScript事件に関する操作と技巧大全書」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScriptエラーとデバッグテクニックのまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。