Web API DOMスタイルコントロール

DOMスタイルコントロール

上の画像は、
スタイルをJavaScriptで、
設定しています。

JavaScriptは、
DOMを直接操作出来ないので、
documentインターフェイスで作成した、
エレメントP1で操作します。

P1.style.color = 'red';により、
テキスト文を赤い文字にし、
P1.style.textAlign= 'center'; により、
テキスト文を中央に配置しています。

もう一つは、
document.querySelector('p')
インターフェイスで選択した、
エレメントP２を操作しています。
上と同じように、
テキスト文を赤い文字にし、
中央に配置しています。

コードは下の様になります。
赤色が、
スタイルをコントロールするため、
追加した箇所になります。


  <section>
    <p>DOM</p>
  </section>

  <script>

    const S = document.querySelector('section');    
    const P1 = document.createElement('p'); 
    P1.textContent = 'Hello World';
  
    P1.style.color = 'red';
    P1.style.textAlign= 'center'; 
   
    S.appendChild(P1);
  
    const T = document.createTextNode('--text文');
    const P2 = document.querySelector('p');
    P2.appendChild(T); 

    P2.style.color = 'Blue';
    P2.style.textAlign= 'center';

  </script>

DOM削除

上の画像は、
インターフェイスにより、
テキスト分の要素を削除した画像です。

document.querySelector('p')の
インターフェイスで選択したP2を、
remove()メソッドで削除しています。

下がコードになります。
赤い色が追加した箇所です。


  <section>
    <p>DOM</p>
  </section>

  <script>

    const S = document.querySelector('section');    
    const P1 = document.createElement('p'); 
    P1.textContent = 'Hello World';
    P1.style.color = 'red';
    P1.style.textAlign= 'center';  
    S.appendChild(P1);
  
    const T = document.createTextNode('--text文');
    const P2 = document.querySelector('p');
    P2.appendChild(T); 
    P2.style.color = 'Blue';
    P2.style.textAlign= 'center';
 
    P2.remove();

  </script>


以上です。