目次
3.5 ボタンをクリックしたときのアニメーション効果を実装する
4.4.2 チェックボックスをクリックした後、要素を「完了」に配置します
1. 運用ノード
1.1 新しいノード
2 つのステップに分かれています
1. 要素ノードを作成します
2. 要素ノードを dom ツリーに挿入します。
最初のステップは赤ちゃんの誕生に相当し、2 番目のステップは赤ちゃんの登録に相当します。
1.1.1. 要素ノードの作成
createElement メソッドを使用して要素を作成します。options パラメータはまだ関係ありません。
var element = document.createElement(tagName[, options]);コード例:
<div class="container">
</div>
<script>
var div = document.createElement('div');
div.id = 'mydiv';
div.className = 'box';
div.innerHTML = 'hehe';
console.log(div);
</script>この時、新規にdivを作成したにも関わらず、新規に作成したノードがDOMツリーに追加されていないため、ページ上にdivが表示されないことが判明しました。
上記の説明では要素ノードのみを作成しています。
createTextNode を使用してテキスト ノードを作成する
createComment を使用してコメント ノードを作成することもできます。
createAttribute は属性ノードを作成します
主に createElement を使用できます。
1.1.2. dom ツリーへのノードの挿入
1) appendChild を使用して、指定したノードの最後の子の後にノードを挿入します。
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) insertBefore を使用して、指定したノードの前にノードを挿入します。
var insertedNode = parentNode.insertBefore(newNode, referenceNode);insertedNode 挿入されたノード (newNode)
parentNode 新しく挿入されたノードの親ノード
newNodeが使用されています。 挿入されたノード
referenceNode newNode はこのノードの前に挿入されます。
referenceNode が null の場合、newNode は子ノードの最後に挿入されます。
注:referenceNode 参照ノードはオプションのパラメータではありません
<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>
注 1: ノードが 2 回挿入された場合、最後のノードのみが有効になります (要素の移動と同等)。
<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>
注 2: ノードが挿入されると、ノード オブジェクトへの変更は DOM ツリー内のコンテンツに同期的に影響を与える可能性があります。
<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 ノードの削除
子ノードを削除するにはremoveChildを使用します
oldChild = element.removeChild(child);子は削除されるノードです
要素は子の親ノードです
、戻り値は削除されたノードです< a i=3> 削除されたノードは DOM ツリーから削除されるだけですが、まだメモリ内にあるため、いつでも DOM ツリー内の他の場所に追加できます。 子ノード上の例では、要素ノードの子ノードではないため、メソッドは例外をスローします。
2.コード例: 数字を推測します。
2.1 期待される効果
2.2 コードの実装
<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. コード例: 告白ウォール
3.1 期待される効果
3.2 ページレイアウトの作成
告白ウォール.html を作成する
<h1>表白墙</h1>
<p>输入后点击提交, 会将信息显示在表格中</p>
<span>谁: </span>
<input type="text">
<span>对谁: </span>
<input type="text">
<span>说什么: </span>
<input type="text">
<input type="button" value="提交">この時の効果はこんな感じです
3.3 スタイルを調整する
<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>この時の効果はこんな感じです
3.4 提出の実装
<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 ボタンをクリックしたときのアニメーション効果を実装する
擬似クラス セレクターを使用する必要があります。
擬似クラス セレクターには多くの種類があります。ここでの :active は、押されたボタンを選択することを意味します。
.submit:active {
background-color: #666;
}4. コード例: ToDo リスト
4.1 期待される効果
4.2 ページレイアウトの作成
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 ページスタイルの実装
<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 ページ動作の実装
4.4.1 新しい追加の実装
<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 チェックボックスをクリックした後、要素を「完了」に配置します
// 修改 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);
}
}注:
現在イベントを処理している要素を取得するには、イベント コールバック関数で this を使用します。
this を通じて現在の要素を取得できます。 .parentNode プロパティ 要素の親要素。
チェックボックスがクリックされると、最初に値が変更され、次にクリック イベントがトリガーされます。
4.4.3 削除ボタンをクリックしてタスクを削除します
// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
// 上方的部分不变...
// 6. 给删除按钮注册点击事件
button.onclick = function () {
var row = this.parentNode;
var grandParent = row.parentNode;
grandParent.removeChild(row);
}
}