[JS] 46. オペレーションノード

例オペレーションノード

//html
    <section id="s12">
        <h1>12. 노드 조작하기 </h1>
        
        <section class="form-section">
            <h1>회원 등록 폼</h1>
            <form class="form">
                <fieldset class="fieldset-none">
                    <legend class="d-none">회원정보</legend>
                    <div class="">
                        <label>이름:</label>
                        <input type="text" name="uname" class="input mt-2" autocomplete="off" required>
                    </div>
                    <div class="mt-3">
                        <input class="btn btn-strong" name="btn-reg" type="submit" value="등록">
                        <a class="btn" href="">취소</a>
                    </div>
                </fieldset>
            </form>
        </section>
        <section class="list-section">
            <header class="section-header">
                <h1>회원목록</h1>
                <a class="btn ml-auto btn-del-all" href="">일괄삭제</a>
                <a class="btn btn-del-first" href="">첫항목 삭제하기</a>
            </header>
            <ul class="list empty">
                
            </ul>

        </section>
    </section> 

inputに識別子として名前を付けます.

JSで変数を指定します.

//js
window.addEventListener("load", function(){
    var section = document.querySelector("#s12");    
    var formSection = section.querySelector(".form-section");
    var listSection = section.querySelector(".list-section");
    
    var unameInput = formSection.querySelector("input[name=uname]");
    var regButton = formSection.querySelector("input[name='btn-reg']");
    var listUl = listSection.querySelector(".list");

項に何もない場合、pusedo-classを使用して空を表します.

(修正前)

(修正後)

/* css */
.list .item,
.list.empty::before{
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125)
}

.list.empty::before{
    display: block;
    content: '목록이 비어 있습니다.';
    text-align: center;
    height: 20px;
}

::beforeというpsuedo-classは、選択したエンティティの最初のサブアイテムを生成します.

::before注意 https://developer.mozilla.org/en-US/docs/Web/CSS/::before

1.ノードを直接作成し、リストに追加します。

続いて

の親の子供です.

  regButton.onclick = function(e){
  	  e.preventDefault();
      
      var li = document.createElement("li"); //노드를 만든다.
      var text = document.createTextNode(unameInput.value);
      li.appendChild(text);
      li.classList.add("item"); // li에 item을 추가한다.
      listUl.appendChild(li);
      //listUl > li > text 순으로 부모-자식 관계가 됐다.
  };

エントリを追加すると、空のステータスがクリアされます.

このコードを追加させてください.

      if(listUl.children.length > 0)
	  	listUl.classList.remove("empty");
      //목록에 item이 추가됐을때, empty를 제거한다.

2.テキスト・オブジェクトの作成と追加方法

      var text = document.createTextNode(unameInput.value);
      li.appendChild(text);

これに代わる.

      li.innerText = unameInput.value;
      li.textContent = unameInput.value;

これを使いましょう.

3.テキスト・オブジェクトを生成および追加する新しい方法を置き換える

        var li = document.createElement("li");
        li.append(unameInput.value);
        li.classList.add("item");
        
        listUl.append(li);
        // append는 text가 들어가면 알아서 textNode를 만들고 element 객체가 들어가면 appendChild 역할을 한다.
        
        if(listUl.children.length > 0)
        	listUl.classList.remove("empty");

4.シンボルオブジェクトとテキストオブジェクトを一度に作成し、リストに追加します。

innerUl.innerHTML +='<li class="item">'+unameInput.value+'</li>';
//어떤 태그든 전부 creat해준다.

追加する必要はありません.

しかし+=なので累積的な問題があります...(書かないで)
+=ではなく=ラーメンが使えます.

5.<li>の装飾を一番前に追加します。

に追加されたコンテンツを1位にしましょう.

        if(listUl.children.length == 0)
            //비어있다면
           listUl.append(li);
        else
           //그렇지 않다면
           // 1번 방법
           listUl.insertBefore(li, listUl.firstElementChild);
           // 2번 방법
           listUl.firstElementChild.before(li); // firstElementChild 앞으로 li를 넣는다.

は「誰」がいないのでinsertBeforeは使えません.だから私はそれを条件文に書きます.

6.要素を追加する新しいAPI

""の中から位置を選んで書きます.
次に、挿入するオブジェクトを書き出します.

既存のコードを次のコードに変換します.

        listUl.insertAdjacentElement("afterbegin", li);
        // listUl의 afterbegin에 li 객체를 넣는다.

は最近、以下の方法をより多く使用している.

        var html = '<li class="item">'+unameInput.value+'</li>';
        listUl.insertAdjacentHTML("afterbegin", html);  

オブジェクト列を挿入するには、insertAdjacentElement
文字列を挿入するには、AdjacentHTMLを挿入します.