DOM(Document Object Model)

33769 ワード
JavaScript テキストリンク
WebページはDOM形式で作成され、すべての要素がオブジェクトとして使用できます.Webページのすべてのコンテンツはオブジェクトで構成されているため、JavaScriptを使用して制御できます.
<html>
	<h3>닐스</h3> //자바스크립트 조작으로 인해 h3 태그는 보이지 않게 된다.
</html>
document.queryselector("h3").style.visibility='hidden'
上のコードを見て、JavaScriptでページを制御します.このようにウェブページを修正するのではなくJavaScriptコードを使用するのがDOMモードです.
documentは、Webドキュメント自体を表すDOMオブジェクトの1つです.Webドキュメント自体にアクセスすると常にルートオブジェクトのオブジェクトになります.

DOMツリー


WebドキュメントをDOMと表示する場合は、ツリー形式で表示します.htmlの要素をノードとブランチで表します.また、DOMはすべてのhtml要素をオブジェクトと見なします.したがって、すべてのノードを親ノードと子ノードに分割します.このとき、DOMツリーはhtml要素以外の要素内のすべての内容(画像、テキストなど)をノードとして表す.
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>DOM 알아보기</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>DOM이란?</h1>
    <p><strong>Document Object Model</strong>의 줄임말입니다.</p>
</body>
</html>

上のhtmlコードをDOMツリーとして表す例です.クリーンアップ後、DOMツリーは次のようになります.
  • webドキュメントのタグは要素ノードで表されます.
  • タグに含まれるテキストは、その要素のサブノードとして表される.(テキストノード)
  • タグの属性は、要素ノードのサブノードとして表される.(attributeノード)
  • 注釈は注釈ノードで表される.
    • 上部のルートノードは、すべてのノードの開始ノードであるため、ルートノードと呼ばれます.特定のノードでは、親ノードは上部ノード、下部ノードはサブノードです.WebドキュメントをDOMツリーで表示すると、JavaScriptに必要な要素にアクセスする方法を簡単に考えることができます.

    DOM Elementへのアクセス


    JavaScriptでhtmlドキュメントを操作する場合は、JavaScriptを使用してhtml要素にアクセスする必要があります.これをDOM要素へのアクセスと呼びます.

    DOM Elementへのアクセス方法


    cssはセレクタの概念を持っている.html要素のスタイルを選択および変更する場合は、cssセレクタを使用します.同様に、要素にアクセスする場合、JavaScriptも同様にアクセスします.選択者を使用してアクセスする方法はいくつかあります.

  • 選択者としてDOM要素にアクセスするid
    getElementbyid()関数を使用すると、JavaScriptの要素のidを使用してアクセスできます.
    <div id="container">
	<h1 id="heading">에디오피아 게뎁</h1>
	<div id="prod-img">
</div>
    document.getElementbyid("heading")
//<h1 id="heading">에디오피아 게뎁</h1>을 출력
    要素のidを使用して、要素にアクセスして制御および変更できます.

  • クラス値でDOM要素にアクセス
    getElementsbyClassName()関数を使用すると、要素のクラス値を使用してアクセスできます.
    この関数はclassとしてアクセスされるため、クラスを持つすべての要素にアクセスできます.つまり、複数のアクセスが可能です.したがって、この値はHTML Collectionというデータ形式で出力されます.
    •     <p>
    2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 
    게뎁 농장은 <span class="accent">SCAA 인증</span>을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.
    </p>
        document.getElementsByClassName("accent")
    //HTMLCollection(2) htmlcollection이라는 자료형식으로 출력, htmlcollection은
    //배열과 비슷하다고 생각하면 됩니다.

  • タグ名でDOM要素にアクセス
    getElementsByTagName()関数では、idやクラスセレクタではなくタグ自体にアクセスできます.タグ名でアクセスされるため、複数のタグ要素にアクセスできます.
    <h2 class="bright">Information</h2>
<p>2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 
게뎁 농장은 <span class="accent">SCAA 인증</span>을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
<h2>Flavor Note</h2>
<p class="bright">은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
    document.getElementsByTagName("h2")
//HTMLCollection(2) 마찬가지로 HTMLCollection 자료구조로 출력한다.

  • DOM要素へのアクセス方法
    querySelector()関数は、すべての選択者が要素にアクセスできる関数です.これは、ラベル名、id、classがすべての選択者に使用できることを意味します.
    querySelector All()関数は、複数の選択者のタグがある場合、その選択者を持つすべての要素にアクセスできる関数です.
    idを使用する場合は#、クラスを使用する場合は名前の前です.貼ればいいラベル名はそのままです.
    document.queryselector("#heading")
//<h1 id="heading">에디오피아 게뎁</h1> 출력

document.queryselectorAll(".accent")
//NodeList(2) queryselectorAll 함수로 접근할 경우 HTMLCollection이 아닌
//NodeList라는 형태의 자료구조를 출력한다. 마찬가지로 배열과 비슷한 방식이다.

    • getElementById関数とquerySelector関数の違い


    getElementByid、getElementsByClass、getElementsByTagNameなどの関数は、関数の名前のように要素ノードにのみアクセスできます.ただし、queryselector関数は、要素ノードおよび要素ノードに含まれるテキストノードおよび属性ノードにアクセスできます.

    Elementのタグ属性にアクセスして変更する


    次に、DOM要素ではなく、要素のプロパティノードにアクセスする方法について説明します.
    getAttribute()関数、setAttribute()関数-HTMLのタグ属性を取得または変更するための関数
    この2つの関数は、入力(get)属性と入力(set)属性の変更(set)に使用されます.
    <div id="prod-img">
		<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
</div>
    document.queryselector("#prod-img > img").getAttribute("src")
// "images/coffee-pink.jpg" 지정한 element의 속성값을 가져와 출력한다. 
// > 은 자식 선택자로 해당 노드의 자식노드를 가리킬때 사용한다.
document.queryselector("#prod-img > img").setAttribute("src","images/coffee-blue.jpg")
//src의 속성을 images/coffee-blue.jpg로 변경한다.

    DOMでのイベントの処理


    JavaScriptにはhtmlページ上のイベントを処理する2つの方法があります.
  • htmlタグにイベントプロセッサ
    • を接続する.
        <body>
    	<div id="container">
    		<img id="pic" src="images/girl.png" alt="" onclick="changePic()">
    	</div>
    	<script>		
    		var pic = document.querySelector('#pic');
    		function changePic() {			
    			pic.src = "images/boy.png";
    		}
    	</script>
    </body>
    イベントをhtmlに直接接続します.これはイベントをhtmlに直接リンクする方法であるため、変更するたびにhtmlページを変更する必要があります.今はほとんど使わない方法です.
    イベントプロセッサを
  • DOM要素
    • に接続する
        <body>
    	<div id="container">
    		<img id="pic" src="images/girl.png" alt="">
    	</div>
    	<script>		
        var pic = document.querySelector('#pic');
        pic.onclick = changePic;
        
    		function changePic() {			
    			pic.src = "images/boy.png";
    		}
    	</script>
    </body>
    html以外のJavaScriptのDOM要素にアクセスしてイベントを処理します.JavaScriptでのみ処理され、htmlタグと混同されない利点があります.しかし,この方法の欠点は,1つのイベントハンドラを1つの要素にしか接続できないことである.今はほとんど使わない方法です.

  • addEventListener()関数の使用
    これは、htmlページに直接触れることなく、DOM要素にアクセスする際に複数のイベントを一度に処理する方法です.addEventListener関数は、イベントが発生した要素にイベントプロセッサを接続する関数です.ドキュメントオブジェクト、ウィンドウオブジェクト、およびWebドキュメント内の特定の要素.
    •     <body>
    	<div id="container">
    		<img id="pic" src="images/girl.png" alt="">
    	</div>

    	<script src="js/domevent3.js"></script>
    </body>
        const pic = document.querySelector('#pic');
    pic.addEventListener("mouseover", changePic, false);  // mouseover 이벤트 발생하면 changePic 함수 실행
    pic.addEventListener("mouseover", changeStyle, false);// mouseover 이벤트 발생하면 changeStyle 함수 실행
    pic.addEventListener("mouseout", originPic, false); // mouseout 이벤트 발생하면 originPic 함수 실행
    pic.addEventListener("mouseout", originStyle, false); // mouseout 이벤트 발생하면 originStyle 함수 실행

    function changePic() {			
      pic.src = "images/boy.png";
    }
    function originPic() {
      pic.src = "images/girl.png";
    }
    function changeStyle() {
      pic.style.border = "1px solid #222";
    }
    function originStyle() {
      pic.style.border = "none";
    }

    //이처럼 여러 이벤트핸들러 사용이 가능하며, 하나의 이벤트에 여러 처리를 하는것이 가능합니다.

    DOMに要素を追加


    既存の要素の変更と操作に加えて、新しい要素を追加することもできます.
    elementを追加する場合は、タグだけでなく、テキストノードと属性ノードも追加します.タグとテキストノード、およびプロパティノードは相互に関連付けられている必要があります.

  • createElement()関数
    新しい要素を作成します.

  • createTextNode()関数
    テキストを追加すると、新しいテキストノードが作成されます.

  • appendChild()関数
    特定のノードを別のノードのサブノードに追加するための関数です.

  • createAttribute()関数
    アトリビュートノードを作成します.

  • setAttributeNode()関数
    アトリビュートノードをelementノードに接続します.
    • <p class="accent">주문이 완료되었습니다.</p> <!--이 태그를 추가해봅니다.-->
    const newP = document.createElement("p") // element p 생성
const newText = document.createTextNode("주문이 완료되었습니다.") //텍스트 노드를 생성
newP.appendChild(newText) //newP에 텍스트노드 newText노드를 연결

const newAttr = document.createAttribute("class") //class 속성 노드를 생성
newAttr.value= "accent" // 클래스에 accent 클래스값을 설정

newP.setAttributeNode(newAttr) // element newP에 속성노드를 연결
// 위의 html 태그를 똑같이 생성 완료
// 속성 설정시 setAttribute() 함수도 이용 가능하다.
// setAttribute("class", "accent")

    ノード順序の変更と削除


    エレメント間の位置を変更したり、既存のエレメントを削除したりすることもできます.

  • haschildNodes()関数
    特定のノードにサブノードの関数があるかどうかを決定します.ブール値を返します.

  • childNodesプロパティ
    サブノードがある場合は、特定のノードのサブノードのプロパティにアクセスできます.この属性を
    すべての要素、改行ノード、テキストノードをサブノードと見なします.

  • サブプロパティ
    特定のノードにアクセスできるサブノードのプロパティ.このプロパティはelementノードにのみアクセスします.

  • InsertBefore()関数
    サブノードを追加すると、常に最後に新しいサブノードが追加されます.でもこの関数は
    標準のサブノードとして、そのサブノードよりも優先するように設定します.

  • removeChild()関数
    DOMから特定のノードを削除します.この時点でノードは自分自身を削除できません.削除するノードの親ノードからのみ削除できます.したがって、ノードを削除するには、そのノードの親ノードでこの関数を使用する必要があります.
    • linuxはCプログラムのアセンブリコードを表示します(読めます)
    JavaScript入門2日目