DOM（文檔對象模型）和CSS（層疊樣式表）是網頁開發中的兩個重要概念。在進行網頁開發時，我們需要通過DOM來操作網頁的HTML元素結構，而CSS則用于美化網頁風格和布局。本篇文章就來介紹一下如何通過DOM和CSS來操作網頁元素。

首先，我們來了解一下DOM是什么。DOM是一種描述文檔的模型，在JavaScript中以對象的方式呈現，可以通過它來對HTML文檔進行操作。常見的操作包括獲取元素、添加元素、刪除元素、修改元素樣式等。下面是一些示例代碼：

//獲取元素
var element = document.getElementById("myElement");
//添加元素
var newElement = document.createElement("div");
newElement.innerHTML = "Hello World!";
document.body.appendChild(newElement);
//刪除元素
var removeElement = document.getElementById("elementToRemove");
removeElement.parentNode.removeChild(removeElement);
//修改元素樣式
var styleElement = document.getElementById("styleElement");
styleElement.style.backgroundColor = "red";

接下來，我們來學習一下如何使用CSS來對網頁元素進行樣式的設置。CSS主要用于網頁的美化和布局，其語法規則和屬性值非常多。我們只介紹一些常見的樣式屬性，如下：

/* 修改文字樣式 */
p {
font-size: 20px;
color: #333;
font-weight: bold;
}
/* 修改背景顏色 */
body {
background-color: #f1f1f1;
}
/* 修改邊框屬性 */
img {
border: 1px solid #ccc;
}
/* 修改元素大小 */
div {
width: 200px;
height: 100px;
}

通過DOM和CSS的相互組合，我們可以非常靈活地對網頁進行排版和美化，制作出漂亮且有效果的網頁。當然，前提是我們需要熟悉DOM和CSS的基本操作和語法規則，才能更好地運用它們來開發網頁。