【初心者向け 103】DOM API/ Responsive WEB Site
はじめに
こちらの講座から勉強した内容をご紹介したいと思います。
DOM API
ITスクールでは、jQueryを使用して、DOMを操作したのですが、Browerのdocument.querySelector() からも直接、DOM要素を操作することが可能です。
document.createElement: 要素を追加します。
Element.setAttribute('attributeName', 'value'): 要素に属性を追加します。
Element.textContent : 要素の中にtext入れます。
Element.insertAdjacentHTML: jQueryのappendのように、htmlの要素（実際のタグ）、text nodeを全部入れることが可能です。
Element.appendChild(子要素を追加します。）
Element.removeChild(子要素を削除します。）
scrollY
window.pageYOffset === window.scrollY;
window.pageXOffset === window.scrollX;
offsetHeight
Event
Event Capturing & Event Bubbling
親と子に同一なイベントがある場合、Event Bubblingが発生する。
https://www.geeksforgeeks.org/what-is-event-bubbling-and-event-capturing-in-javascript/
Event Capturing:子要素にeventが行う際には、親要素から子要素に探していきます。
**GrandParent-> Parent -> Child**のような流れでたどりづくことをEvent Capturingといいます。
Event Bubbling: 子要素のEvent Handlerがtriggered状態になり、その親予のEvent Handlerがtriggeredになりながら、バブルのように上を向いて各要素のEvent Handlerを呼び出すことです。
Child -> Parent -> GrandParent順Event Handlerを呼び出します。
event.target:実際にeventがあったEventHandlerがある要素
event.currentTarget:現時点で見ているEventHandlerの要素
event.stopPropagation : 親にBubblingが行うことを中止
event.stopImmediatePropagation :指定したeventのみHandlingし、他のイベントは中止
stopPropagationなどはバグの原因になるので、何かを制限したい場合、
grandparent.addEventListener('click', event => {
if (event.target !== event.currentTarget) {
return;
}
console.log(`outer: ${event.currentTarget}, ${event.target}`);
});
parent.addEventListener('click', event => {
if (event.target !== event.currentTarget) {
return;
}
console.log(`middle ${event.currentTarget}, ${event.target}`);
});
このように、制限した方が良いらしいです！
preventDefault()
passive event listener:passiveに属するEvent ListenerはブラウザーがEvent Listenerにイベントが行ったことを通知し、他のことを遂行します。ブラウザーは非同期的に自分の仕事を遂行するイメージです。
passiveにはpreventDefault()を基本設定として防いでおり、スクロールのように性能を改善することがないかぎり、使わない方や良いらいいです。
optionから{passive:false}をすることで変更自体はできます。
ex) wheel
`active event listener: activeに属するEvent Listerは、ブラウザーがEvent Listenerがイベントを処理するまで、待ってくれるようです。
ex) click
イベント移譲Event Delegation
イベント移譲とは、各子要素にハンドラを登録する代わりに、共通の親要素に対してハンドラを一括して登録する仕組みです。上のコードが事前にすべての子要素にイベントを割り当てますが、clickはactive eventlistnerですので、ブラウザーにも負担がかかるでしょう。
この場合は親要素にeventlistnerを追加し、liの要素全部ではなく、event.targetで指定された要素のみclass名を追加することが可能です。
<style>
.clicked {
background-color: blue;
}
</style>
// 子要素に一個ずつイベントを割り当てる
const lis = document.querySelectorAll('li');
lis.forEach(li => {
li.addEventListener('click', () => {
li.classList.add('selected');
});
});
// イベント移譲（親要素にイベントを追加）
const ul = document.querySelector('ul');
ul.addEventListener('click', event => {
if (event.target.tagName == 'LI') {
event.target.classList.add('selected');
});
html/css 復習
HTML
head
<!--IE-->
<meta http-equiv="X-UA-Compatibe" content="IE-edge" />
<!--SEO-->
<title>Responsive Web Site</title>
<meta name="description" content="responsive web site practice" />
<meta name="author" content="hyonhyonkor" />
<meta name="keywords" content="portfolio,포트폴리오" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!--OG (Open Graph Data)-->
<meta property="og:title" content="HyonHyon" />
<meta property="og:type" content="Website" />
<meta property="og:url" content="dist URL" />
<meta property="og:image" content="dist image" />
body
<img alt=""> : 必修！
<a title="">: iconがボタンになる場合、テキストがないので、a titleで属性を記入すれば、SEOによく、音声支援ができます。
CSS
★性能★
1.** セレクターは右から、要素を読むので、タグを2個以上指定することは良くないです。**
bemなどでclassを指定することで、少しは性能をよくすることができます。
.header img{
}
.header__img{
}
このようなBEMを活用します。
★超超超大事なコツ★
object-fit: cover; : imageが崩れている時、本来の割合を戻します。
inlineblock:hover {outline: } : inline-blockもしくはcontemtサイズによってサイズが変わるblockの場合、サイズを指定しなく、hoverにborder属性を追加する場合、中にあるborderが生成され、サイズが変わります。。
とても不自然なので、この場合はborderの外部にあるoutlineを使うこと！
max-width : responsive webには必修(1200px)！
filter: brightness(150%); gridの場合、同じ色にも少しのアレンージを入れることが可能
white-space:nowrap 文字がlineを変更することを防ぎます。
flexbox以外の左右整列
text-align:center : **inline elementを左右整列(button, input) **
margin:auto : blockを左右整列（div)
height: Zpx, line-height: Zpx : block内の文字を中央整列
`translate(-50%,-50%) : たまに使います！
Discussion