Javascript DOM 期末考試題

Web開發中，動態操作DOM是非常常見的需求，因此熟練掌握Javascript DOM相關知識是非常必要的。下面是一份Javascript DOM期末考試題，希望可以幫助大家鞏固知識點。

Part 1: JS操作DOM對象

1. 使用JS獲取頁面元素，分別使用id，class和標簽名三種方式獲取id="test"的元素，將獲取結果輸出到控制臺。

document.getElementById("test");
document.getElementsByClassName("test")[0];
document.getElementsByTagName("div")[0].getElementsByClassName("test")[0];

2. 使用JS創建一個 ul 元素，然后在 ul 元素中創建 3 個 li 元素，分別包含文本內容"Javascript"、"HTML"、"CSS"，將 ul 元素添加到頁面中 id="container" 的 div 中。

const ul = document.createElement("ul");
const li1 = document.createElement("li");
li1.textContent = "Javascript";
const li2 = document.createElement("li");
li2.textContent = "HTML";
const li3 = document.createElement("li");
li3.textContent = "CSS";
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
const container = document.getElementById("container");
container.appendChild(ul);

3. 使用JS修改 id="test" 的元素的文本內容為"Hello World"。

const test = document.getElementById("test");
test.textContent = "Hello World";

Part 2: JS操作DOM事件

1. 使用JS為 id="btn" 的按鈕添加click事件，當點擊按鈕時，alert輸出"Hello World"。

const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
alert("Hello World");
});

2. 使用JS為 id="test" 的元素添加mouseover事件和mouseout事件，當鼠標移入元素時，背景色變成紅色，當鼠標移出元素時，背景色變成白色。

const test = document.getElementById("test");
test.addEventListener("mouseover", function() {
test.style.backgroundColor = "red";
});
test.addEventListener("mouseout", function() {
test.style.backgroundColor = "white";
});

Part 3: JS操作DOM樣式

1. 使用JS為 id="test" 的元素添加一條樣式，將其字體顏色設置為紅色。

const test = document.getElementById("test");
test.style.color = "red";

2. 使用JS為 id="test" 的元素添加多條樣式，將其字體顏色設置為紅色，背景色設置為白色。

const test = document.getElementById("test");
test.style.color = "red";
test.style.backgroundColor = "white";