5日目TIL
HTML / CSS
HTML:担当構造/意味
CSS:文書の表示方法
Dom
JSと共に現れる
HTMLドキュメントを直接修正することもできます
ノード
タグの検索:
タグに基づいて他のタグを検索
属性の関連付け
属性の例
<h1 class='a'>abc</h1>
<script>
const h1 = document.querySelector('.a')
console.log(h1.className)
console.log(h1.classList)
console.log(h1.getAttribute('class'))
console.log(h1);
setTimeout(()=>{
h1.setAttribute('id','abc');
h1.removeAttribute('class')
console.log(h1);
},1000)
</script>
setTimeoutを使用して結果を確認した.テキストノードに関連
要素ノードの作成/追加/削除
Virtual Dom
従来のDomの概念は,性能上の問題を解決するために生まれ,その都度大きく変化する.
1)重複文によるDom更新
2)繰り返し文で文字列を更新し、最後にDomを更新する
documentFragement
メモリで操作した後、ダイナミックドメインツリーに追加
ex)createDocumentFragmentメソッドの使用
<ul id="ul">
</ul>
<script>
var element = document.getElementById('ul'); // ul이 존재한다고 가정
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer'];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
</script>評価/一級/一級関数
ex)
const a = ()=>{} 高次関数(関数をパラメータとして返す)
1.
const apply1 = f => f(1);
console.log(apply1(a=>a-1)); //0
const set = [1,2,3].map(x=>x*x) //[1,4,9]2.
const calculate = (a) => (b) => (c) =>(a+b+c)
calculate(1) //(b) => (c) =>(a+b+c)
calculate(1)(2) //(c) =>(a+b+c)
calculate(1)(2)(3) //6for of / for in
繰り返し
Symbol.iterator属性、集合よよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよよ
[Symbol.iterator]()、イテレーションを返しますgithubフィードバック
[[10,900,80]].forEach(val=>{console.log(val[1],val[2])})[[10,900,80]].forEach(([_,h,p])=>{console.log(h,p)})に感銘を与える
オブジェクトをforに巡回するたびに
not iterableエラーが発生し、arr[Symbol.iterator]();がこのように適用され、nextの方法で処理できないため、オブジェクトはforではないと感じます.Reference
この問題について(5日目TIL), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/TIL-5일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol