一、DOM簡介
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。
可以將每個HTML標籤都做爲一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的文本框、層等元素進行編程控制。
選擇器：
document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('tagname')
實例演示一、修改單個標籤中的文本內容。
<div id="n1">
<p>hello aaaaaa</p>
</div>
<script type="text/javascript">
<!-- 通過標籤ID獲取到標籤對象 -->
var name1 = document.getElementById('n1');
<!-- 修改標籤文本內容爲'tuchao' -->
name1.innerText = 'tuchao';
</script>實例演示二、通過標籤name修改多個標籤的內容
<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>
<script type="text/javascript">
<!-- 通過標籤name獲取到標籤對象 -->
var name2 = document.getElementsByName('n2');
<!-- 當獲取到多個同name標籤時，則通過序號來區別，name2[0]表示第一個，name2[1]則表示第二個 -->
name2[0].innerText = 'tuchao';
name2[1].innerText = 'tuchao';
</script> 頁面效果：
實例演示三、通過標籤tag修改多個標籤的內容
<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>
<script type="text/javascript">
<!-- 通過標籤tag獲取到標籤對象 -->
var name3 = document.getElementsByTagName('div');
<!-- 對該對象進行循環，逐一取出每個對象進行修改 -->
for (var item in name3){
name3[item].innerText = 'elephant'
}
</script>頁面效果：
常用函數：
創建標籤
document.createElement('a')
獲取或者修改樣式
obj.className
獲取或設置屬性
setattribute(key,val) getattribute(key)
獲取或修改樣式中的屬性
obj.style.屬性
提交表單
document.geElementById('form_id').submit()
實例演示四、在標籤中加入內容
<div id="n1">
<p>hello aaaaaa</p>
</div>
<script type="text/javascript">
<!-- 創建一個a標籤 -->
var tag = document.createElement("a");
<!-- 給創建的標籤賦予鏈接 -->
tag.href = '
<!-- 給標籤設置文本字符 -->
tag.innerText = '點希望';
var id1 = document.getElementById('n1');
<!-- 給id1對象添加標籤 -->
id1.appendChild(tag);
</script>頁面效果：
實例演示五、標籤替換
<div id="n1">
<p>hello aaaaaa</p>
</div>
<script type="text/javascript">
<!-- 創建標籤對象 -->
var tag = "<a href='http://www.baidu.com'>百度一下</a>"
var id1 = document.getElementById('n1');
<!-- 替換標籤 -->
id1.innerHTML = tag;
</script>頁面效果會顯示原id="n1"的div標籤消失了，替換成了自定義的超鏈接標籤。
實例演示六、修改標籤的Class
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
<title>js_st1</title>
<style type="text/css">
.hide {display: none;}
.n22 {color:red;}
</style>
</head>
<body>
<div class="n22" name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>
<script type="text/javascript">
var id2 = document.getElementsByName('n2');
<!-- 將原樣式n22替換爲hide樣式 -->
id2[0].className = 'hide'
</script>
</body>
</html>此時第一個div在頁面中將不會顯示了
實例演示七、修改標籤的name值
<div id="n3" name="dog"> </div>
<script type="text/javascript">
<!-- 通過id獲取到標籤對象 -->
var id3 = document.getElementById('n3');
<!-- 使用log打印原name值 -->
console.log(id3.getAttribute('name'));
<!-- 修改標籤的name值爲'cow' -->
id3.setAttribute('name','cow');
console.log(id3.getAttribute('name'));
</script>頁面效果：
實例演示八、修改標籤樣式
<div style="width:500px; height:300px; border:solid black 1px" id="n3" name="dog"> </div>
<script type="text/javascript">
var id3 = document.getElementById('n3');
<!-- 獲取該標籤的寬度 -->
var w = id3.style.width;
console.log(w);
<!-- 修改樣式 -->
id3.style.width = '200px'
</script>頁面效果：修改前
頁面效果：修改後
常用事件：
實例演示九、創建按鈕點擊事件
<form id="F1" action='https://www.baidu.com/s?' method="GET">
<!-- 這裏的wd是傳給後端程序的value -->
<input type='text' name='wd' />
<!-- 定義點擊事件，對應Foo()函數 -->
<input type='button' value='按鈕提交' onclick='Foo();' />
</form>
<script type="text/javascript">
<!-- 定義點擊函數內容，提交'F1'對象表單 -->
function Foo (){
document.getElementById('F1').submit()
}
</script>常用方法：
定義一個函數每隔一定的時間自動執行一次，括號中左邊寫執行的函數名逗號分割，右邊寫間隔的時長單位爲毫秒。
setInterval('Foo()',20)
用於停止setInterval的循環執行，這個函數括號中接受的參數爲setInterval函數返回的值。
clearInterval(interval)
定義一個函數間隔一定的時間自動執行，與setInterval函數不同的是這個方法只讓函數執行一次。
setTimeout('Go()',10000)
用於取消setTimeout函數的執行，函數接受的參數是setTimeout函數返回的值。
clearTimeout()
搜索框實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
<title>搜索框實例</title>
<style type="text/css">
.gray{color: gray;
height: 30px;
width: 220px;
}
.black{
color: black;
height: 30px;
width: 220px;
}
</style>
</head>
<body>
<input type='text' class='gray' id='tip' value='請輸入關鍵詞' onfocus='Enter();' onblur='Leave();' />
<script type="text/javascript">
function Enter(){
var id = document.getElementById('tip');
id.className = 'black'
if(id.value=='請輸入關鍵詞' || id.value.trim()==''){
id.value = ''
}
}
function Leave(){
var id = document.getElementById('tip');
if(id.value=='請輸入關鍵詞' || id.value.trim()==''){
id.value='請輸入關鍵詞'
id.className='gray'
}else{
id.className='black'
}
}
</script>
</body>
</html>跑馬燈實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
<title>跑馬燈 哈哈和進度條 </title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
function Go(){
<!-- 獲取title文本內容 -->
var content = document.title;
<!-- 獲取內容的第一個字符 -->
var firstChar = content.charAt(0)
<!-- 獲取title的第二個至最後一個字符 -->
var sub = content.substring(1,content.length)
document.title = sub + firstChar;
}
setInterval('Go()',1000);
</script>
</body>
</html>進度條實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
<title>跑馬燈 哈哈和進度條 </title>
<style type="text/css">
</style>
</head>
<body>
<div style="width:1000px;background-color:gray">
<div id='jindu' style="width:10%;background-color:red;height:20px;"></div>
</div>
<div>
<input type='button' value='點擊停止' onclick='Stop();' />
</div>
<script type="text/javascript">
pro = 10
function Foo(){
var id = document.getElementById('jindu');
pro = pro + 1;
if(pro > 100){
clearInterval(interval)
}else{
id.style.width = pro+'%';
}
}
interval = setInterval('Foo()',20)
<!-- 定義停止函數，用於停止進度條 -->
function Stop(){
clearInterval(interval)
}
</script>
</body>
</html>