📒Javascript DOM #02 :)

1.操作DOM

🔵 Element.prototype.innerHTML

<ul id="fruits">
  <li class="apple">Apple</li>
</ul>

const $fruits = document.getElmentById('fruits');
$fruits.innerHTML += '<li class="banana">Banana</li>';

🔵 Element.prototype.insertAdjacentHTML(position, DOMString)

🔵 ノードの作成と追加

✏️ Document.prototype.createElement(tagName)

✏️ Document.prototype.createTextNode(text)

✏️ Node.prototype.appendChild(childNode)

🔵 Document.prototype.createDocumentFragment()

🔵 Node.prototype.insertBefore(newNode, childNode)

🔵 Node.prototype.cloneNode([deep: true| false])

🔵 Node.prototype.replaceChild(newChild, oldChild)

🔵 Node.prototype.removeChild(child)

2.調査

<input id="user" type="text" value="zooyaho">

const {attributes} = document.getElementById('user');

console.log(attributes.id.value); // user

🔵 Element.prototype.getAttribute/setAttribute

🔵 属性の存在、削除を確認

✏️ Element.prototype.hasAttribute(attributeName)

✏️ Element.prototype.removeAttribute(attributeName)

3.データ・ウェアハウスとデータセットのプロパティ

<ul class="users">
  <li id="1" data-user-id="1234" data-role="admin">Lee</li>
  <li id="2" data-user-id="0000" data-role="user">Park</li>
</ul>

const users = [...document.querySelector('.users').children];
const user = users.find(user => user.dataset.userId === '1234');
console.log(user.dataset.role); // 'admin'

4.デザイン

🔵 HTMLElement.prototype.style

🔵 クラスアクション

✏️ Element.prototype.className

✏️ Element.prototype.classList

🔵 要素に適用するCSSスタイルを参照してください

✏️ window.getComputedStyle(elment[,pseudo])

<div class="box">Box</div>

const $box = document.quetySelector('.box');
console.log(window.getComputedStyle($box));
// CSSStyleDecleration

console.log(window.getComputedStyle($box).width); // 100px