[Achievement Goal]

CRUD - Create , Read , Update and Delete

CRUDを使用してhtmlを操作できます.

appendとprependの違いを理解します.

appendとappendChildの違いを理解します.

classList、setAttributeを使用して属性を生成できます.

1. CRUD

Create、Read、Update、Delete.
コンソールではなくWeb上でJavaScriptを使用するためにcrudを自由に使用する必要があります.
Create - createElement
Read - querySelector , querySelectorAll
Update - textContent , id , classList, setAttribute
Delete - remove , removeChild, innerHTML = '' , textContent = ''
Append - appendChild

create

createElementはdomで新しいタグを作成するために使用されます.
使用方法:document.createElement(「div」)/divラベルを作成します.
しかし、生成されてもWebで見ることはできません.
生成された状態だけを想像してみてください.
このように宙に浮いたラベルをウェブサイトに接続するのがappend機能です.

append

appendは実際のWebに接続された属性の1つであり,Webの実現位置,特徴に応じて使用種類を分けることができる.
append()-選択した要素を末尾に送信
prepend()-選択した要素を第1部に送信
次はappendとprependの例です.

  <div id = 'container'>
    <header id = 'header'>
      <h1>첫번째 자식</h1>
      <nav>head-1</nav>
      <nav>head-2</nav>
      <nav>head-3</nav>
    </header>
    <section id = 'section'>
      <h1>두번째 자식</h1>
      <ul>
        <li>section-1</li>
        <li>section-2</li>
        <li>section-3</li>
      </ul>
    </section>
    <footer id = 'footer'>
      <h1>세번째 자식</h1>
      <p>footer-1</p>
    </footer>
  </div>

footerのfooter-1の下にfooter-2というサブアイテムを追加したいです.
その時はどうすればいいですか.
まず考えなければならないのは、
必要なdom要素をすべて変数に含め、入力する内容を指定します.

const footer = document.querySelector('#footer')
const footerP = footer.children[1]; //footer-1

const addP = document.createElement('p');
addP.textContent = 'footer-2';

ここまでは変数を宣言している様子なのでappend処理して接続します.

footer.appendChild(addP) 
document.createElement('p'); 

ここで考慮すべきはfooter-1のpラベルの後ろにあるはずです.
親フッターに基づいてappendChildを使用して作成します.
アントンはfooterp(footer-1)の後ろにいます.
ラベルをfooterpに入れてもWebで見ることができますが、ラベルが正しくないことがわかります.
なるべく親基準で追加しましょう!

ではprependを使うとどうなりますか?

標準のfooterpの上に来ます.
もし基準がfooterだったら?

footerラベルの前に表示されます!
ではappendとappendChildの違いは何でしょうか.
テキスト要素をappendChildに入れるとエラーが発生しますが、appendは直接テキスト要素をパラメータに入れることができます.
appendChildを使用してテキストを挿入する場合は、上記の例addPを使用します.textcontent=footer-2を入れると代入する必要がありますが、「append」(footer-2)を直接使用して不要なコードを減らすことができます.

const addP = document.createElement('p');
footer.append('footer-2')

また、1ノードしか追加できないappendChildよりも、
スプレッドシート演算子(...)をサポートします.複数のノードを選択し、ラベルと組み合わせることができるという利点があります.

read

querySelector、querySelector Allは、id、class、tagを持つdom要素を読み込む役割を果たします.
シェイプ:
document.querySelector('#id')
document.querySelector('.class')
document.querySelector('div')
document.querySelectorAll('p') ..
2つの相違がある場合、querySelector All()はパラメータのすべての値を選択します.
したがって,特に反復文,配列などの選択に有用である.
document.querySelector All(「p」)[0]/pラベルから0番目のインデックスを選択します.

//querySelectorAll
const nav = document.querySelectorAll('nav')
for(let i = 0; i <nav.length;i++){
  nav[i].addEventListener('click',function(){
    if(nav[i].style.color = 'black'){
      nav[i].style.color = 'pink'
    }
  })
}

これにより、navのクエリーセレクタを選択するたびに、フォントの色がピンクに変わります.

参照、id選択domにはgetElementById(「id」)もあります.
使えますが、最近はあまり使われていないので、主にクエリーセレクタとして使われているようです.
理由はわかりませんが大勢について行きましょうー!

update

さっきcreateElementで作成したaddpに戻りましょう.

const addP = document.createElement('p');
addP.textContent = 'footer-2'
footer.appendChild(addP)

退屈なpラベルにクラス名を指定する

addP.classList.add('addP')

classの名前はよく書けています.
id、name、disabledなどの他のプロパティを追加することもできます.

addP.setAttribute('id','addP')
addP.setAttribute('name','addP')

delete

domから値を削除する場合はremoveメソッドを使用します.
innerHTML=""削除する方法もありますが、ハッカーが出てくると答えが出なくなります…?安全上の問題があるのでremove/removeChildの使用を強くお勧めします!勉強する
さっき作成したクラス名addpを削除します.

addP.classList.remove('addP')

classが消えているのが見えます.
ではremoveChildとは何でしょうか.
removeChildとは、サブエレメントを直接指定して削除し、Web上に表示する場合はremoveと同じですが、実際のメモリはクリアされず、空に浮いている状態です.
したがって、removeChildとして削除し、appendまたはprependを使用して他のノードに貼り付けると、データが再び表示されます!