Einführung in die JavaScript-Grundlagen 05

In zwei Schritte unterteilt
1. Elementknoten erstellen
2. Elementknoten in den Dom-Baum einfügen.
Der erste Schritt entspricht der Geburt eines Babys, der zweite Schritt der Registrierung des Babys.

1.1.1. Elementknoten erstellen

Verwenden Sie die Methode „createElement“, um ein Element zu erstellen. Der Optionsparameter ist noch nicht betroffen.

var element = document.createElement(tagName[, options]);

Codebeispiel:

<div class="container">
</div>
<script>
  var div = document.createElement('div');
  div.id = 'mydiv';
  div.className = 'box';
div.innerHTML = 'hehe';
  console.log(div);
</script>

Zu diesem Zeitpunkt wurde festgestellt, dass, obwohl ein neues Div erstellt wurde, das Div nicht auf der Seite angezeigt wurde. Dies liegt daran, dass der neu erstellte Knoten nicht zum DOM-Baum hinzugefügt wurde.

Die obige Einführung erstellt nur Elementknoten. Sie können auch Folgendes verwenden:
        createTextNode, um Textknoten zu erstellen
        createComment, um Kommentarknoten zu erstellen
        createAttribute erstellt Attributknoten
Wir können hauptsächlich createElement verwenden.

1.1.2. Knoten in den Dom-Baum einfügen

1) Verwenden Sie appendChild, um den Knoten nach dem letzten untergeordneten Knoten des angegebenen Knotens einzufügen

element.appendChild(aChild)

<div class="container">
</div>
<script>
  var div = document.createElement('div');
  div.id = 'mydiv';
  div.className = 'box';
  div.innerHTML = 'hehe';
  var container = document.querySelector('.container');
  container.appendChild(div);
</script>

2) Verwenden Sie insertBefore, um den Knoten vor dem angegebenen Knoten einzufügen.

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode Der eingefügte Knoten (newNode)
parentNode Der übergeordnete Knoten des neu eingefügten Knotens
newNode wird verwendet. Eingefügter Knoten
referenceNode newNode wird vor diesem Knoten eingefügt
Wenn referenceNode null ist, wird newNode am Ende des untergeordneten Knotens eingefügt.
Hinweis: Der Referenzknoten „referenceNode“ ist kein optionaler Parameter

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  container.insertBefore(newDiv, container.children[0]);
</script>

Hinweis 1: Wenn ein Knoten zweimal eingefügt wird, wird nur der letzte wirksam (entspricht dem Verschieben des Elements).

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  // 此处的 children 里有 4 个元素
  container.insertBefore(newDiv, container.children[0]);
  // 此处的 children 里有 5 个元素(上面新插了一个), 0 号元素是 新节点,
  // 1 号元素是 11, 2号节点是 22, 所以是插入到 22 之前.
  container.insertBefore(newDiv, container.children[2]);
</script>

Hinweis 2: Sobald ein Knoten eingefügt ist, können sich Änderungen am Knotenobjekt synchron auf den Inhalt im DOM-Baum auswirken.

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  container.insertBefore(newDiv, container.children[0]);
  // 插入完毕后再次修改 newDiv 的内容
  newDiv.innerHTML = '我是新节点2';
</script>

1.2 Knoten löschen

Verwenden Sie „removeChild“, um untergeordnete Knoten zu löschen

oldChild = element.removeChild(child);

Kind ist der zu löschende Knoten
Element ist der übergeordnete Knoten des Kindes
und der Rückgabewert ist der gelöschte Knoten< a i=3> Der gelöschte Knoten wird nur aus dem DOM-Baum gelöscht, befindet sich jedoch weiterhin im Speicher und kann jederzeit an anderen Stellen im DOM-Baum hinzugefügt werden. Wenn der untergeordnete Knoten Im obigen Beispiel handelt es sich nicht um einen untergeordneten Knoten des Elementknotens. Die Methode löst eine Ausnahme aus.

2.Codebeispiel: Erraten Sie die Zahl

2.1 Erwartete Auswirkungen

2.2 Code-Implementierung

<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数：<span id="count">0</span>
<br>
结果：<span id="result"></span>
<script>
  var inputE = document.querySelector("#number");
  var countE = document.querySelector("#count");
  var resultE = document.querySelector("#result");
  var btn = document.querySelector("#button");
  var resetBtn = document.querySelector("#reset");
  // 随机生成一个 1-100 的数字
  var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数
  var count = 0;
  // on: 当
  // click: 点击
  // 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数
  btn.onclick = function() {
    count++;
    countE.innerText = count;
    var userGuess = parseInt(inputE.value);
    if (userGuess == guessNumber) {
      resultE.innerText = "猜对了";
      resultE.style = "color: gray;";
   } else if (userGuess < guessNumber) {
      resultE.innerText = "猜小了";
      resultE.style = "color: blue;";
   } else {
      resultE.innerText = "猜大了";
      resultE.style = "color: red;";
   }
 };
  resetBtn.onclick = function() {
    guessNumber = Math.floor(Math.random() * 100) + 1
    count = 0;
    countE.innerText = count;
    resultE.innerText = "";
    inputE.value = "";
 }
</script>

3. Codebeispiel: Geständniswand

3.1 Erwartete Auswirkungen

3.2 Seitenlayout erstellen

Erstellen Sie eine Beichtwand.html

<h1>表白墙</h1>
<p>输入后点击提交, 会将信息显示在表格中</p>
<span>谁: </span>
<input type="text">
<span>对谁: </span>
<input type="text">
<span>说什么: </span>
<input type="text">
<input type="button" value="提交">

Zu diesem Zeitpunkt sieht der Effekt so aus

3.3 Stil anpassen

<div class="container">
  <h1>表白墙</h1>
  <p>输入后点击提交, 会将信息显示在表格中</p>
  <div class="row">
    <span>谁: </span>
    <input class="edit" type="text">
  </div>
  <div class="row">
    <span>对谁: </span>
比特就业课
     <input class="edit" type="text">
  </div>
  <div class="row">
    <span>说什么: </span>
    <input class="edit" type="text">
  </div>
  <div class="row">
    <input type="button" value="提交" class="submit">
  </div>
</div>
<style>
 * {
    margin: 0;
    padding: 0;
 }
  .container {
    width: 400px;
    margin: 0 auto;
 }
  h1 {
    text-align: center;
    padding: 20px 0;
 }
  p {
    color: #666;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
 }
  .row {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
 }
  span {
    width: 100px;
    line-height: 40px;
 }
  .edit {
    width: 200px;
    height: 30px;
 }
  .submit {
    width: 304px;
    height: 40px;
    color: white;
    background-color: orange;
    border: none;
 }

</style>

Zu diesem Zeitpunkt sieht der Effekt so aus

3.4 Übermittlung umsetzen

<script>
    //给点击按钮注册点击事件：
    var submit = document.querySelector('.submit');
    submit.onclick = function() {
        //获取到编辑框中的内容：
        var edit = document.querySelectorAll('.edit');
        var from = edit[0].value;
        var to = edit[1].value;
        var message = edit[2].value;
        console.log(from + "," + to + "," + message);
        if(from == "" || to == "" || message == "")
            return;
        //构造html元素：
        var row = document.createElement('div');
        row.className = 'row';
        row.innerHTML = from + '对' + to + '说：' + message;
        //把构造好的元素添加进去：
        var container = document.querySelector('.container');
        container.appendChild(row);
        //清理之前输入框中的内容：
        for(var i = 0; i < 3; ++i) {
            edit[i].value = ''; 
        }
    }
</script>

3.5 Implementieren Sie den Animationseffekt beim Klicken auf die Schaltfläche

Sie müssen einen Pseudoklassenselektor verwenden.
Es gibt viele Arten von Pseudoklassenselektoren. :aktiv bedeutet hier die Auswahl der gedrückten Schaltfläche

.submit:active {
  background-color: #666;
}

4. Codebeispiel: To-do-Liste

4.1 Erwartete Auswirkungen

4.2 Seitenlayout erstellen

Erstellen Sie to-do.html

<div class="nav">
  <input type="text">
  <button>新建任务</button>
</div>
<div class="container">
  <div class="todo">
    <h3>未完成</h3>
    <div class="row">
      <input type="checkbox">
      <span>吃饭</span>
      <button>删除</button>
    </div>
  </div>
  <div class="done">
    <h3>已完成</h3>
  </div>
</div>

4.3 Seitenstil implementieren

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 800px;
            margin: 0 auto;
            display: flex;
        }
        .todo,
        .done {
            width: 50%;
            height: 100%;
        }
        .container h3 {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #333;
            color: #fff;
        }
        .nav {
            width: 800px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        .nav input {
            width: 600px;
            height: 50px;
        }
        .nav button {
            width: 190px;
            height: 50px;
            border: none;
            background-color: orange;
            color: #fff;
            margin-left: 5px;
        }
        .row {
            height: 50px;
            display: flex;
            align-items: center;
        }
        .row input {
            margin: 0 10px;
        }
        .row span {
            width: 300px;
        }
        .row button {
            width: 50px;
            height: 40px;
        }
    </style>

4.4 Seitenverhalten implementieren

4.4.1 Neue Ergänzungen implementieren

<script>
    //实现新增任务：
    var addTaskButton = document.querySelector('.nav button');
    addTaskButton.onclick = function() {
        //1.获取到任务内容的输入框：
        var input = document.querySelector('.nav input');
        //2.获取到输入框的内容：
        var taskContent = input.value;
        //3.根据内容新增一个元素结点：
        var row = document.createElement('div');
        row.className = 'row';
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        var span = document.createElement('span');
        span.innerHTML = taskContent;
        var button = document.createElement('button');
        button.innerHTML = '删除';
        row.appendChild(checkbox);
        row.appendChild(span);
        row.appendChild(button);
        //4.把新结点插入到todo中
        var todo = document.querySelector('.todo');
        todo.appendChild(row);
    }
</script>

4.4.2 Nachdem Sie auf das Kontrollkästchen geklickt haben, platzieren Sie das Element in „Abgeschlossen“.

// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
// 上方的部分不变...
 
  // 5. 给 checkbox 注册点击事件
  checkbox.onclick = function () {
    //
    var row = this.parentNode;
    // 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
    if (this.checked) {
      var target = document.querySelector('.done');
   } else {
      var target = document.querySelector('.todo');
   }
    target.appendChild(row);
 }
}

Hinweis:
Verwenden Sie dies in der Ereignisrückruffunktion, um das Element abzurufen, das das Ereignis gerade verarbeitet.
Sie können das aktuelle Element über this abrufen .parentNode-Eigenschaft Das übergeordnete Element des Elements.
Wenn auf das Kontrollkästchen geklickt wird, wird zuerst der Wert geändert und dann das Klickereignis ausgelöst.

4.4.3 Klicken Sie auf die Schaltfläche „Löschen“, um die Aufgabe zu löschen

// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
// 上方的部分不变...
  // 6. 给删除按钮注册点击事件
  button.onclick = function () {
    var row = this.parentNode;
    var grandParent = row.parentNode;
    grandParent.removeChild(row);
 }
}