【Day17】從零開始的程式大亂鬥：JavaScript－操作DOM

2023 iThome 鐵人賽

DAY 17

自我挑戰組

那些有趣的程式系列第 17 篇

15th鐵人賽

dcheng0915

2023-10-02 23:54:49

222 瀏覽

分享至

要操作DOM基本上只要兩步驟：

查詢，找到你想操作的元素

以下方式皆可使用：

document.getElementById();          // 使用 ID 查詢
document.getElementsByName();       // 使用 Name 查詢多個
document.getElementsByTagName();    // 使用 標籤名稱 查詢多個
document.getElementsByClassName();  // 使用 Class名稱 查詢多個

document.querySelector();           // 使用 CSS選擇器 查詢單個
document.querySelectorAll();        // 使用 CSS選擇器 查詢多個

操作，查詢到元素過後就能夠開始操作了

比如我們有以下結構：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript－操作DOM</title>
    </head>
    <body>
        <div class="content">操作DOM</div>
    </body>
</html>

在此結構中，有三種方式可以查詢到 <div class="content">操作DOM</div> 元素：

使用 document.getElementsByTagName('div') 直接取得 div 元素
元素具有 class="content" ，可以使用 document.getElementsByClassName('content') 取得元素
使用 document.querySelector('div.content') 取得元素，此部分是利用CSS選擇器，選擇元素為 div 且 class="content" 。

之後就可以開始操作元素了，像是：

修改元素內容

content.innerText = '成功操作DOM';

增加 class 屬性

content.classList.add('content2');

完整程式碼：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript－操作DOM</title>
    </head>
    <body>
        <div class="content">操作DOM</div>
        <script>
            var content = document.querySelector('div.content');
            content.innerText = '成功操作DOM';
            content.classList.add('content2');
        </script>
    </body>
</html>