DOM/js_061602_DOM.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    DOM
    <!--h1 a element-->
    <!--href attrubite-->
    <!--text-->

    <H1>a heading</H1>
    <a href="">link text</a>

    <script>
        const myH1 = document.querySelector('h1');
        console.log(myH1);
        myH1.textContent = 'hello';


        //練習一 a tag 文字
        // text Link Text => linkA
        const myA = document.querySelector('a');
        console.log(myA);
        myA.textContent = 'linkA';


        //練習二 button 文字
        // text => myBtnOK
        const myBtn = document.querySelector('button');
        let string = myBtn.textContent; // get dom text(text做讀取)
        console.log('string',string);
        console.log(myBtn);
        myBtn.textContent = 'myBtnOk'; //set dom text (set做寫入)


        //練習三 p 文字
        // text => pOK
        const myP = document.querySelector('p');
        console.log(myP); //變數
        console.log('myP'); //字串
        myP.textContent = 'pOK';


        //練習四 div 文字
        // text => divOK
        const myDiv = document.querySelector('div');
        console.log(myDiv); //變數
        myDiv.textContent = 'divOK';


        //w3cschool文件 有括弧就是方法,沒括號就是屬性(可以讓我們自己改變屬性),像object裡的變數,我們可針對這些object裡的變數做set & text
        //右邊的東西等於左邊

    </script>


</body>
</html>