DOM要素の追加・削除・変更について。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- IMPORT CSS -->
<link rel="stylesheet" href="reset.min.css">
<style>
.addBtn {
padding: 5px 15px;
font-size: 20px;
}
.item {
width: 300px;
padding: 10px;
margin-top: 10px;
border: 1px dashed #555;
}
.item li {
line-height: 30px;
}
.item li:nth-child(even) {
background-color: #EEE;
}
</style>
</head>
<body>
<button class="addBtn">+</button>
<ul class="item">
<li>
LI1
<!-- href="javascript:;" タグをクリックしてページにジャンプしないようにする。>
<a href="javascript:;" class="deleteBtn"> </a>
</li>
<li>LI2</li>
</ul>
</body>
</html>
1.document.createElement([タグ名]): 動的にDOM要素を作成します。
let addBtn = document.querySelector('.addBtn'),
item = document.querySelector('.item'),
count = 2;
addBtn.onclick = function () {
//1.LIを動的に作成する
let newLi = document.createElement('li');
//newLi.style.xxx=xxx newLi.className=xxx ... 新しく作成された要素はオブジェクトであり、思う存分操作することができる。
newLi.innerHTML = `LI${++count}`;
console.log(newLi);
};
2.[container].appendChild([element]);指定したコンテナの末尾に動的に要素を挿入します。
let addBtn = document.querySelector('.addBtn'),
item = document.querySelector('.item'),
count = 2;
addBtn.onclick = function () {
//1.LIを動的に作成する
let newLi = document.createElement('li');
//newLi.style.xxx=xxx newLi.className=xxx ... 新しく作成された要素はオブジェクトであり、思う存分操作することができる。
newLi.innerHTML = `LI${++count}`;
// appendChild 指定したコンテナの末尾に追加する
item.appendChild(newLi);
};
3.[コンテナ].insertBefore([新しい要素], [元のページの要素]): 指定されたコンテナ内の元のページの要素の前に、新しく作成された要素を配置します。
let addBtn = document.querySelector('.addBtn'),
item = document.querySelector('.item'),
count = 2;
addBtn.onclick = function () {
let newLi = document.createElement('li');
newLi.innerHTML = `LI${++count}`;
// 2.作成されたLIを指定されたコンテナに追加する
// insertBefore 指定された要素の先頭に追加する
let first = item.firstElementChild;
item.insertBefore(newLi, first);
};
4.[container].removeChild([element]); 指定されたコンテナ内の要素を削除します。
let addBtn = document.querySelector('.addBtn'),
item = document.querySelector('.item'),
count = 2;
addBtn.onclick = function () {
// 1.LIを動的に作成する
let newLi = document.createElement('li');
// newLi.style.xxx=xxx newLi.className=xxx ...
//新しく作成された要素はオブジェクトであり、思う存分操作することができる。
newLi.innerHTML = `LI${++count}`;
// appendChild 指定したコンテナの末尾に追加する
item.appendChild(newLi);
};
/*
* 削除ボタンをクリックして要素を削除する
*/
let deleteBtn = document.querySelector('.deleteBtn');
deleteBtn.onclick = function () {
// 削除ボタンの親要素を取得する
let parent = deleteBtn.parentNode;
// コンテナから取り除く
item.removeChild(parent);
};
5.document.createTextNode (); テキストノードの作成
要素のカスタム属性の設定
1.各要素は、ヒープメモリにカスタムプロパティを設定することができますオブジェクトです
2.各要素はタグでもあり、そのDOM構造を新しいカスタム属性の構造に操作することができます; element.setAttribute('xxx', 'xxx')
この2つの方式は原理が異なり、一方はヒープ・メモリを操作し、一方はDOM構造体を操作します。
item['tanakasan'] = ' ;
console.dir(item.tanakasan);
item.setAttribute('teacher', 'LiSi');
console.dir(item.getAttribute('zhansan'));
console.log(item.tanakasan); //=>'
console.log(item.getAttribute('tanakasan')); //=>null
console.log(item.teacher); //=>undefined
console.log(item.getAttribute('teacher')); //=>'
