1.DOM：文檔對(duì)象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。
2.DOM的一些常用的屬性
2.1 通過ID獲取元素
（1）語法：
document.getElementById("id");
（2）作用：id就向一個(gè)人的身份證，我們可以通過尋找標(biāo)簽的id來尋找標(biāo)簽，然后進(jìn)行相應(yīng)的操作。
（3）注意：不要忘記寫document！
2.2 innerHTML屬性
（1）語法：
Obgect.innerHTML="Hello World"
（2）作用：主要是對(duì)標(biāo)簽內(nèi)的內(nèi)容進(jìn)行獲取或替換
（3）例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一種基于對(duì)象、事件驅(qū)動(dòng)的簡單腳本語言，嵌入在HTML文檔中，由瀏覽器負(fù)責(zé)解釋和執(zhí)行，在網(wǎng)頁上產(chǎn)生動(dòng)態(tài)的顯示效果并實(shí)現(xiàn)與用戶交互功能。</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原標(biāo)題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標(biāo)簽內(nèi)容
mychar.innerHTML="Hello World!";
document.write("修改后的標(biāo)題:"+mychar.innerHTML); //輸出修改后h2標(biāo)簽內(nèi)容
</script>
</body>
</html>
（4）注意：Object是獲取的元素對(duì)象，如通過document.getElementById("ID")獲取的元素。
2.3 改變HTML樣式
（1）語法：
Object.style.property
（2）作用：用于修改HTML樣式
（3）例子：
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使網(wǎng)頁顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
mychar.style.width="300px";
</script>
</body>
（4）注意：property有很多的樣式，比如color，height等等都可以用這個(gè)方法去修改,在一個(gè)就是不要忘記屬性后面都要加分號(hào)”“。
2.4 顯示和隱藏（display屬性）
（1）語法：
Object.style.display=value
（2）作用：網(wǎng)頁中常看到顯示和隱藏，就是用display屬性來實(shí)現(xiàn)的
（3）例子：
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
（4）注意：value的值為none和block，其中none為不顯示內(nèi)容，而block為顯示內(nèi)容
2.5 className屬性
（1）語法：
Object.className=classname
（2）作用：1.獲取元素的class屬性；2.為網(wǎng)頁中的某一個(gè)元素指定一個(gè)css樣式來改變改元素的外觀
（3）例子：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網(wǎng)頁顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網(wǎng)頁顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
