Defcos-TEL-day 6-DOM、マネージャ、マネージャ

目次

ヒント

DOM TREEとLANDERING

ウィジェット

発電機

感受点

クラスのヒント

説明前のヒント
html cssの方法を学びますか?
事例を暗記したほうがいい.
codepen.io
サイトでcss構造を参照してください!
後で知りたいのは.
css idとclassの違い=>
もしidが複数あったら?
cssセレクタのタイプについて説明します.

domとは?

dom
document object model
domはどうして生まれたの?
jsの誕生とともに登場
htmlドキュメントとインタラクティブ
初期にアクセスできるラベルは多くありません.
標準シナリオは1998年に登場し、ほとんどのブラウザに適用するには長い時間がかかります.
htmlドキュメントを直接修正することもできます.

ドーム

プロトタイプオブジェクトによって定義
最適ノードから=>サブノードへ
ドームツリーで要素を見つけるにはどうすればいいですか?
dom treeループはpreOrder(前列ループ)からなる.
だから順番にliラベル

   list1 list2 list3

もしあったら.
リストt 1 list 3 list 3に対応するliに移動します.
レンダリングdomツリー

1.ブラウザがhtmlを読み取りグループ化し、ドームツリーを整理する
2-3. 次にスタイルシートをグループ化し、スタイルルールを作成してリンクします.
4.そしてランダーツリーを完成します.
5.そして実際の画面を描く
htmlを読み取り、分割=ドームツリー
css=>cssomツリー
=レンダリング後出力
プロセス

domの選択(操作方法)

jsを使用してdomを検索する
getElementByID
dom treeでidを使用して要素ノードを検索し、最初に見つかった要素を返します.
getElementByClassName
dom treeで要素ノードをclassとして検索し、一致するxまたは要素を返します.
getElementBytagName
dom treeでエレメントノードが一致するxまたはエレメントをタグで検索する
querySelector
dom treeで、CSSセレクタ構文を使用して要素ノードを検索します.最初に見つかった要素を返します.
querySelectorAll
dom treeでcssセレクタ構文を使用して要素ノードを検索します.一致するすべての要素を返します.
最も使いやすい方法
window.[id]
idを持つ要素はwindowオブジェクトで見つけることができます.複数の場合はリストに戻ります

ナビゲーションdom

parentNode
選択した要素ノードの親ノードを読み込みます.ドキュメントの親ノードはnullです.
firstElementNode
選択した要素ノードのサブ要素ノードの1つ目がロードされます.ない場合はnullを返します.
children
選択した要素ノードのサブ要素ノードを読み込みます.ない場合は、空の配列を返します.
nextElementSibling
選択した要素ノードの次の兄弟要素ノードを読み込み、ない場合nullを返します.
previousElementSibling
選択したエレメントノードの前の兄弟エレメントノードを読み込みます.ない場合はnullを返します.

操作DOM

クラスアクセス
選択した要素ノードで、classNameとclassListを使用して要素のclassプロパティをロードおよび変更できます.
hasArrtibte
選択した要素ノードに属性があるかどうかを確認できます.
getAttribute
選択した要素ノードから属性の値を返します.ない場合はnullを返します.
setAtriibute
選択した要素ノードで属性を定義します.
removeAttribute
選択した要素ノードから属性を削除します.
textContent
選択した要素ノードからテキストノードにアクセスおよび変更できます.
innerHTml
選択した要素ノード内のhtmlを変更します.xssリスクがあります.
createElement
要素ノードを作成できます.
appendChild
選択した要素ノードの最後のサブ要素として追加します.
removechild
選択したエレメント・セクションのサブノードから該当するエレメントを削除します.

バーチャルドーム?

複数のdomオブジェクトを一度に変更した場合?
domのレンダリングプロセスを考慮すると、
domを操作するたびにレイアウトとレンダリングが行われます.
ブラウザをレンダリングするのに時間がかかります
開発者はこれを一つ一つ最適化することはできません
したがって、仮想ドームを使用して変更した部分だけを変更します.
仮想ドームを使用した最適化

バーチャルドームの誤解

ウイルスdomはdomより速いですか?
reactはdomより速く迷信で、
アプリケーションの作成を支援し、ほとんどの使用例に簡単にアクセスできます.

jsの関数

いちじかんすう
関数は値で表すことができます
組合せ性と抽象化のツールとして使用されます.
log(f1())
高次関数
関数を値として扱う関数
パラメータとして実行される関数の受信

apply1

times

//함수를 f(함수)로 인자를 받아 사용한다.
const add2 = a =>a+2;
log(apply1(add2)); //3

const times = (f,n) => {
let i =-1
while(++i<n) f(i);
}
times(log,3);

//함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)
const addMaker = a =>b => a+b;
const add 10 =addMaker(10);
log(add10); // b=>a+b
log(add10(5));//15
log(add10(10));//20

関数プログラミングではリストの順序が重要です
es 6の出現に伴い,リスト順序が変化する=>言語上の大きな発展
どんなルールとリストツアーがありますか?
for(let i=0; i活動場所を表す
for(const a of list)に変更
jsでの巡回方法

const arr = [1,2,3];
let iter1 = arr[Symbol.lterator]();
iter.next();
for (const a of arr) log(a);

const set= new Set([1,2,3]); 
for (const a of set) log(a)
set[0] 으로 접근안댐

const map =new Map([['a',1]. ['b',2], ['a',3]]);
for(const a of map) log(a);
map[0]으로 접근안댐

for .. of文はキーとマッピングする方法ではありません.
それはどうですか.

Symbol.iterator

es 6に追加されました.
オブジェクトのキーとして使用できます.
arr[symbol.iteraror]

アプレット/アプレットプロトコル

変換可能
ウィジェットのシンボルを返します.値は

、メソッドはiterator()

イテレーション
::{value,done}オブジェクトのnext()の値

を返します.

ウィジェットプロトコル
かわいいために.of,展開演算子等とともに動作する約定

ex)

const arr = [1,2,3];
let iter1 = arr[Symbol.lterator](); //이터레이터를 리턴
iter.next();//1이 나온다 next()를 리턴한다.
//아래 for문을 돌리면 2,3이나온다
iter.next();//2가 나온다.
//아래 for문을 돌리면 3이나온다
iter.next();//3이고, 
//아래 for문을 돌리면 아무값도 출력 안된다.
for (const a of arr) log(a);

따라서 arr은 이터러블/이터레이터 프로토콜이다.

set 도 동일
map은 ["a",1]이 출력

const map =new Map([['a',1]. ['b',2], ['a',3]]);
for(const a of map.keys()) log(a); //.keys()를 하면 key가 뽑힌다.
for(const a of map.values()) log(a); //.keys()를 하면 values가 뽑힌다.
for(const a of map.entries()) log(a); //.entries()를 하면 다뽑힌다.

カスタムかわいいを実施するとともに、
このかわいいものをもっと正確に理解してみましょう.

const iterable={
    [Symbol.iterator](){
        let i = 3;
        return{
            next(){
                return i == 0 ? {done: true } : {value: i--,done:false};
            },
            [Symbol.interaor](){return this;}
        }
    }
};
let iterator = iterable[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
for (const a of iterable) console.log(a);

arr2=[1,2,3];
let iter2=arr2[Symbol.iterator]();
iter2.next();
console.log(iter2[Symbol.iterator]()==iter2);
for (const a of arr2) console.log(a);

for(const a of document.querySelectorAll('*'));
console.log(a);//모든 문서
const all = document.querySelectorAll('*');
console.log(all);//이터러블 형태로 나옴
let iter3 = all[Symbol.iterator]();
log(iter3.next());
log(iter3.next());//value값이 나옴

はつでんき

はつでんき

イテレーションとイテレーションの関数の作成
ジェニー・レイトはかわいい関数です!
jsは任意の値であり、反復可能であればループできます.
ジェナレイトは文章を価値のあるものにし、それを通じて巡回することができます.
すなわち,いずれの状態や値も巡回できる.
=>多形性が高い.
ex)

function *gen(){
    yield 1;
    if(false) yield 2;
    yield 3;
    return 100;
};

let iter=gen();
 console.log(iter[Symbol.iterartor] == iter);//false
 console.log(iter.next());//{ value: 1, done: false }
 console.log(iter.next());//{ value: 3, done: false }
 console.log(iter.next());//{ value: 100, done: true }
 console.log(iter.next());//{ value: undefined, done: true }
 for (const a of gen()){
    console.log(a);
};//1 3

に感銘を与える

今日はDOMツリーの生成、定義、レンダリングの手順を学びました.
勉強を通して早めに勉強できる内容でしたが、もう一度聞いて、明確に整理しました.
勉強を始めたばかりのコンセプト小編と小編は、初めてなので慣れる必要があると思います.でもこれらはすべて面白い内容で、講師もうまく説明してくれたので、翌日が楽しみです!
勉強している私たちは骨が折れるように見えます...メンターはマネージャーと相談して進捗を緩和したという.ちょっと大変でしたが、安心するとともに、ついていけないというお詫びも感じました…もっと努力して恩返しするしかない
明日も頑張ります!