1.操作方式
- document.getElementById ：通過 id 查找 HTML 元素
- getElementsByTagName ：通過標籤名查找 HTML 元素
- document.getElementsByClassName ：通過類名查找 HTML 元素
- document.querySelectorAll ：通過 CSS 選擇器查找 HTML 元素
- document.forms ：通過 HTML 對象集合查找 HTML 元素
2.示例代碼
圖片及源碼的github鏈接
001.獲取和操作頁面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>001.獲取和操作頁面元素</title>
</head>
<div class="box" id="div2">這是第二個div</div>
<script type="text/javascript">
window.onload = function () {
// 獲取元素
var oDiv = document.getElementById("div1");
var oA = document.getElementById("link");
var oDiv2 = document.getElementById("div2");
// 讀取屬性
var sID = oDiv.id;
alert(sID);
// 寫屬性 第一種方式
oDiv.style.color = "red";
oA.href = "http://www.baidu.com";
oA.title = "這是去百度的連接";
oDiv2.className = "box2";
// 寫屬性 第二種方式
var sMystyle = "color";
var sValue = '30px';
oDiv.style[sMystyle] = sValue;
// 讀取元素內容
var sTr = oDiv.innerHTML;
alert(sTr);
// 寫元素內容
oDiv.innerHTML = "被修改了";
alert(oDiv.innerText);
// 寫元素內容爲標籤
oDiv.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>"
}
</script>
<style type="text/css">
.box{
font-size: 20px;
color: aqua;
}
.box2{
font-size: 40px;
color: red;
}
</style>
<body>
<div id="div1">這是一個div元素</div>
<a href="#" id="link">這是一個鏈接</a>
</body>
</html>