ブログ

3608 ワード
DOM wanted テキストリンク
DOMとは
DOMは文書オブジェクトモデルの略であり、HTML、XML文書のプログラミングインターフェースである
DOMはドキュメントの構造表示を提供し、プログラミング言語でDOM構造にアクセスする方法を提供し、ドキュメントの構造、スタイル、コンテンツを変更するのに役立ちます.MDN
DOMソース:ブラウザのレンダリングエンジンがHTMLを構文解析し、HTMLタグに対応するJSオブジェクトを生成します.HTMLタグが1回、JSオブジェクトが1回発生します.
DOMではMはモデル構造であり理解が容易である.DOMは、テキストファイルから作成されたWebドキュメントをブラウザが理解できるように組織し、メモリにロードする構造です.
操作DOM
JSを使用してDOMを操作し、HTMLでCRUD Element!
CRUDの便利なTodo Listで実践.

1. CREATE - createElement()
document.createElement('div');

createElementでdiv elmenetを生成しようとしました.
(elementは<>ラベルで囲まれたすべての内容を表す)
elementの作成は、すぐに画面に表示されるわけではありません.生成された要素を画面に表示するには、append()メソッドでHTML要素を追加する必要があります.
1-1. APPEND()
append()メソッドを使用すると、createElementで作成した要素をページに表示できます.
ブラウザ画面に表示するには、<body>ラベルに新しく作成したelementを追加する必要があります.
const div = document.createElement('div');
document.body.append(div);
appendでbodyラベルにdivラベルを新規作成してみます.でも画面には見えません.これはエラーではありません.作成したdivタグにはコンテンツがなく、表示可能なコンテンツがありません.開発者ツールでは、Elementタグにbodyタグを展開し、<div></div>が新たに追加されたことがわかります.

2. READ - querySelector(selector)
次にappend()法によりdivタグをbodyタグに入れた.
しかし、bodyではなくidをlistに入れたい場合は、どうすればいいですか?listでappend()メソッドが使用される.そのために<div id="list">を読むには追加しましょう<div id="list">と読むとquerySelectorです.querySelectorは、文書内の選択者のパラメータと一致する最初の要素を返します.
document.querySelector(Selectors);
const list = document.querySelector('#list');
list.append(div);

3. UPDATE - textContent('string')
更新により、空白のdiv領域に値を入力して画面に表示できます.
UpdateではtextContentで別名に値を入れましょう.
次に、例では、Todo Listを使用してlistにtodoを追加します.
const li = document.createElement('li');
const ul = document.querySelector('ul');
ul.append(li);
<li> Elementが作成され、<ul>ラベルに追加されます.

既存の3つのliが追加され、4つのliが追加されました.

しかしliには値がなく、空白のように見えますのでtextContentで値を入力しましょう.
li.textContent = '적금 넣기';

4. DELETE -remove()
li.remove();
既存のli要素はremove()メソッドで削除できます.

学習リストの深化
  • DOMとJSの違い
  • 要素とノードの違い
  • querySelectorAll()
  • classList.add()
  • remove()とremoveChild()
    • リファレンス
    https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
    https://poiemaweb.com/js-dom
    https://m.blog.naver.com/magnking/220972680805
    MySQL_ストレージエンジンの紹介
    [アルゴリズム]伯俊16466号-コンサート