00

DOM(document object model)

構造化されたドキュメントを表すオブジェクト向けモデルで、プログラミング言語がドキュメントの構造、スタイル、コンテンツを変更できるインタフェースです.

≪イベント｜Events｜ldap≫

WebブラウザがHTML要素を教えるイベントの発生を指し、JavaScriptはこれに反応して特定の操作を実行することができます.

01

Documentオブジェクトは、Webページを表します.Webページに存在するHTML要素にアクセスしたいときはぜひ!!Documentオブジェクトから開始する必要があります.

DOM

DOMはプログラミング言語から独立している.主にjavascriptを使用しますが、DOMの実装は任意の言語で実現できます.

요소.onclick = function() {} // 마우스 클릭 이벤트와 연결될 이벤트 핸들러

document.getElementsByTagName();  // 태그 이름 선택
document.getElementById();   // 아이디 선택
document.getElementsByClassName();   //클래스 선택
document.getElementsByName();  // name 속성값 선택
document.querySelectorAll(); // 해당 선택자로 선택되는 요소를 모두 선택
document.querySelector(); // 해당 선택자로 선택되는 요소를 1개 선택

Idを除いて、残りはすべて要素にsを加えます.

DOM要素のスタイルの変更

var car = document.getElementById('car');
car.style.color = 'red';

DOM要素の内容の変更

var car = document.getElementById('car');
car.innerHTML = 'bus';

ノード

ノード:DOMに情報を格納する階層単位
ノードツリー:ノードの集合、ノード間の関係
ノードツリー内の各ノードは、互いに階層関係を確立します.

JavaScriptでは、HTML DOMを使用してノードツリー内のすべてのノードにアクセスできます.
注意:https://ryangx2.tistory.com/67

ノードの値にアクセスして名前を変更

var car = document.childNodes[0];
document.write(car.nodeName); 

car.firstChild.nodeValue = 'taxi';
document.write(car.nodeType);

nodeName:HTML、DIVなど
FirstChild:サブノードの最初の
LastChild:サブノードの最後の
nextSibling:次の兄弟ノード
previous Sibling:前の兄弟ノード
parentNode:親ノード
childNodes:サブノードリスト
nodeType: https://hianna.tistory.com/412

≪イベント｜Events｜ldap≫

イベント:Webブラウザから通知されたHTML要素にイベントが発生しました
ブラウザはイベントを検出し、ユーザーとWebページの相互作用を可能にします.
≪イベント・ハンドラ|Event Handler|ldap≫:イベントが発生したときに処理を担当する関数.
指定したイベントが発生した場合、Webブラウザはその要素に登録されたイベントハンドラを実行します.

window.onload(イベントハンドラ)

Webページを開くときに実行されるコード

window.onload = function() {

}

<button onclick="this.innerHTML = '와웅'">클릭 ㄱ </button>

htmlではbuttonラベルにonclickプロパティを付与できます.
注意:https://itworldyo.tistory.com/101

addEventListener(イベントハンドラ)

var car = document.getElementyById('car');

funciton vehicle() {
  alert('탈것');
} 

car.addEventListener('click', vehicle);

ターゲットオブジェクト.addEventListener(イベント名、実行するイベントハンドラ、イベント伝播方式)

classList.toggle

Element.classList.toggle

var car = document.getElementById('car');

function carcar() {
  this.classList.toggle('on');
}

切り替え:スイッチを消すように、0と1の動作を繰り返すことを意味します.
つまり、既存の値が0の場合は1、既存の値が1の場合は0に変換されます.
したがって、切り替え方法は、クラスが存在する場合にクラスを削除し、クラスが存在しない場合にクラスを追加する方法です.(cssファイルのクラス)
https://hianna.tistory.com/469
https://jayprogram.tistory.com/30

html onclickプロパティとともに

//마우스클릭이벤트예시
<p onclick="changeText(this)">여길클릭하세요!</p>

<script>
  functionchangeText(element){
  	element.innerHTML="내용이바뀌었습니다!";
}
</script>

02ページ作成

ナビゲーションバー

e.preventDefault(); // 특정 기능 정지 메서드
var car = document.querySelector(vehicle.getAttribute('href')); // 특정 태그가 가지고 있는 속성의 속성값을 가지고 온다.
window.scrollTo({
	'behavior': 'smooth', //부드럽게 이동
  	'top': car.offsetTop // 특정 영역의 위에서 좌표값
});

getAttribute注記:https://www.codingfactory.net/10283
ナビゲーションバーの場合、href=「#id値」でgetAttributeで#id値を取得し、querySelectorを使用してオブジェクトを検索して変数に割り当て、オフセットポイントを指定するとその位置に移動します.
querySelector Allを使用して複数のNaverをマウントする場合は、for文を使用してonclickプロパティを指定できます.

画像スライド(setInterval()、animate()

setInterval():コードを一定時間ごとに繰り返し実行する
animate({}):選択した要素にアニメーションを適用する

setInterval(function() {}, 3000);
var a = setInterval(function() {}. 3000);

3000 msごとに1つの関数を繰り返し実行し、変数を割り当てるかどうかにかかわらず、先に実行します.
変数を指定するとintervalidが受信されます.次は2つの参照リンクです.
https://mjmjmj98.tistory.com/40
https://www.daleseo.com/js-timer/
https://offbyone.tistory.com/241
https://developer.mozilla.org/en-US/docs/Web/API/setInterval#return_value

タブボタン(classList.add()、classList。remove(), xxx.forEach)

classList.add(), classList.remove()

カッコ内のcssプロパティを追加します.

car.classList.add('active');

forEach(function() {});

選択した複数のタグに対して、それぞれ特定のコードを実行します.

document.querySelectorAll('div').forEach(function(e) {
  e.classList.add('hidden');
});  

スライド2

要素の選択

xxx.previousElementSibling:前の要素を選択します.
xxx.nextElementSibling:次の要素を選択
xxx.parentElement()parentElement()parentElement()parentElement()parentElement()parentElement
xxx.firstElementChild():最初のサブエレメントを選択
xxx.LastElementChild():最後のサブエレメントを選択
childNodes
http://daplus.net/javascript-%EC%9E%90%EC%8B%9D-%EB%85%B8%EB%93%9C%EB%A5%BC-%EC%96%BB%EB%8A%94-%EA%B0%80%EC%9E%A5-%EC%A2%8B%EC%9D%80-%EB%B0%A9%EB%B2%95/
https://developer.mozilla.org/ko/docs/Web/API/Node/childNodes

firstChild vs. firstElementChild

The difference between this property and firstChild, is that firstChild returns the first child node as an element node, a text node or a comment node (depending on which one's first), while firstElementChild returns the first child node as an element node (ignores text and comment nodes).
In the example below, you can see that firstChild returns the comment node and firstElementChild returns the element child i.e <li> A </li>firstChildはcommentノードを返し、firstElementChildは<li>A</li>を返す.

const ul = document.querySelector( 'ul' );

console.log( ul.firstElementChild );
console.log( ul.firstChild );


<ul><!--This is a comment node-->
        <li> A </li>
        <li> B </li>
        <li> C </li>
    </ul>

https://stackoverflow.com/questions/51280481/what-is-the-difference-between-firstchild-and-firstelementchild

04

window.innerWidth

注意:https://sometimes-n.tistory.com/22

createTextNode

appendChildはノードオブジェクトしか受信できないので、テキストを追加するには、createTextNodeを使用して値を直接取得して入れるのではなく、テキストノードを作成する必要があります.

  var car = document.getElementById('car').value;
  
  var li = document.createElement('li');
  li.className = "li-class";
  li.appendChild(document.createTextNode(car));
  li.appendChild(document.createTextNode("car is good"));

https://webruden.tistory.com/634
https://homzzang.com/b/js-1180

classList.contains()

function fun(e) {
	if (e.target.classList.contains('car')) {
    	var li = e.target.parentElement;
        a.removeChild(li);
    }
}

e.target:イベントが発生したターゲットオブジェクト
https://developer.mozilla.org/ko/docs/Web/API/Event/target
a.removeChild(li):aのサブノードからliに対応するノードを削除する
https://devjhs.tistory.com/184

insertBefore()

特定の場所の前にノードを挿入
親ノード.InsertBefore(挿入するノード、基点ノード);
https://powerku.tistory.com/114
https://webruden.tistory.com/633

transform = 'scale(n)'

이미지.style.stransform = 'scale(n)':n倍の画像サイズ変更