DOM程式設計

一、DOM簡介

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充标志語言的标準程式設計接口。

可以将每個HTML标簽都做為一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的文本框、層等元素進行程式設計控制。

選擇器：

document.getElementById('id')

document.getElementsByName('name')

document.getElementsByTagName('tagname')

執行個體示範一、修改單個标簽中的文本内容。

<code><</code><code>p</code><code>>hello aaaaaa</</code><code>p</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code>var name1 = document.getElementById('n1');</code>

<code>name1.innerText = 'tuchao';</code>

<code></</code><code>script</code><code>></code>

執行個體示範二、通過标簽name修改多個标簽的内容

<code><</code><code>div</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>heheheheeeeeee</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code><</code><code>div</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>bbabababbabab</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code>var name2 = document.getElementsByName('n2');</code>

<code>name2[0].innerText = 'tuchao';</code>

<code>name2[1].innerText = 'tuchao';</code>

頁面效果：

執行個體示範三、通過标簽tag修改多個标簽的内容

<code>var name3 = document.getElementsByTagName('div');</code>

<code> </code><code>name3[item].innerText = 'elephant'</code>

常用函數：

建立标簽

document.createElement('a')

擷取或者修改樣式

obj.className

擷取或設定屬性

setattribute(key,val) getattribute(key)

擷取或修改樣式中的屬性

obj.style.屬性

送出表單

document.geElementById('form_id').submit()

執行個體示範四、在标簽中加入内容

<code>var tag = document.createElement("a");</code>

<code>tag.innerText = '點希望';</code>

<code>var id1 = document.getElementById('n1');</code>

<code>id1.appendChild(tag);</code>

執行個體示範五、标簽替換

<code>var tag = "<</code><code>a</code> <code>href</code><code>=</code><code>'http://www.baidu.com'</code><code>>百度一下</</code><code>a</code><code>>"</code>

<code>id1.innerHTML = tag;</code>

頁面效果會顯示原id="n1"的div标簽消失了，替換成了自定義的超連結标簽。

執行個體示範六、修改标簽的Class

<code> </code><code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>charset</code><code>=</code><code>"UTF-8"</code> <code>content</code><code>=</code><code>"text/html"</code><code>></code>

<code> </code><code><</code><code>title</code><code>>js_st1</</code><code>title</code><code>></code>

<code> </code><code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>

<code> </code><code>.hide {display: none;}</code>

<code> </code><code>.n22 {color:red;}</code>

<code> </code><code></</code><code>style</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"n22"</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>heheheheeeeeee</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code> </code><code><</code><code>div</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>bbabababbabab</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code>var id2 = document.getElementsByName('n2');</code>

<code>id2[0].className = 'hide'</code>

<code></</code><code>script</code><code>> </code>

此時第一個div在頁面中将不會顯示了

執行個體示範七、修改标簽的name值

<code>var id3 = document.getElementById('n3');</code>

<code>console.log(id3.getAttribute('name'));</code>

<code>id3.setAttribute('name','cow');</code>

執行個體示範八、修改标簽樣式

<code><</code><code>div</code> <code>style</code><code>=</code><code>"width:500px; height:300px; border:solid black 1px"</code> <code>id</code><code>=</code><code>"n3"</code> <code>name</code><code>=</code><code>"dog"</code><code>> </</code><code>div</code><code>></code>

<code>var w = id3.style.width;</code>

<code>console.log(w);</code>

<code>id3.style.width = '200px'</code>

頁面效果：修改前

頁面效果：修改後

常用事件：

執行個體示範九、建立按鈕點選事件

<code><</code><code>form</code> <code>id</code><code>=</code><code>"F1"</code> <code>action</code><code>=</code><code>'https://www.baidu.com/s?'</code> <code>method</code><code>=</code><code>"GET"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>'text'</code> <code>name</code><code>=</code><code>'wd'</code> <code>/></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>'button'</code> <code>value</code><code>=</code><code>'按鈕送出'</code> <code>onclick</code><code>=</code><code>'Foo();'</code> <code>/></code>

<code>function Foo (){</code>

<code> </code><code>document.getElementById('F1').submit()</code>

常用方法：

定義一個函數每隔一定的時間自動執行一次，括号中左邊寫執行的函數名逗号分割，右邊寫間隔的時長機關為毫秒。

setInterval('Foo()',20)

用于停止setInterval的循環執行，這個函數括号中接受的參數為setInterval函數傳回的值。

clearInterval(interval)

定義一個函數間隔一定的時間自動執行，與setInterval函數不同的是這個方法隻讓函數執行一次。

setTimeout('Go()',10000)

用于取消setTimeout函數的執行，函數接受的參數是setTimeout函數傳回的值。

clearTimeout()

搜尋框執行個體

<code> </code><code><</code><code>title</code><code>>搜尋框執行個體</</code><code>title</code><code>></code>

<code> </code><code>.gray{color: gray;</code>

<code> </code><code>height: 30px;</code>

<code> </code><code>width: 220px;</code>

<code> </code><code>.black{</code>

<code> </code><code>color: black;</code>

<code> </code><code>height: 30px;</code>

<code> </code><code>width: 220px;</code>

<code><</code><code>input</code> <code>type</code><code>=</code><code>'text'</code> <code>class</code><code>=</code><code>'gray'</code> <code>id</code><code>=</code><code>'tip'</code> <code>value</code><code>=</code><code>'請輸入關鍵詞'</code> <code>onfocus</code><code>=</code><code>'Enter();'</code> <code>onblur</code><code>=</code><code>'Leave();'</code> <code>/></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>function Enter(){</code>

<code> </code><code>var id = document.getElementById('tip');</code>

<code> </code><code>id.className = 'black'</code>

<code> </code><code>if(id.value=='請輸入關鍵詞' || id.value.trim()==''){</code>

<code> </code><code>id.value = ''</code>

<code> </code><code>function Leave(){</code>

<code> </code><code>id.value='請輸入關鍵詞'</code>

<code> </code><code>id.className='gray'</code>

<code> </code><code>id.className='black'</code>

<code> </code><code></</code><code>script</code><code>></code>

跑馬燈執行個體

<code> </code><code><</code><code>title</code><code>>跑馬燈&nbsp;&nbsp;哈哈和進度條&nbsp;&nbsp;</</code><code>title</code><code>></code>

<code> </code><code>function Go(){</code>

<code> </code><code>var content = document.title;</code>

<code> </code><code>var firstChar = content.charAt(0)</code>

<code> </code><code>var sub = content.substring(1,content.length)</code>

<code> </code><code>document.title = sub + firstChar;</code>

<code>setInterval('Go()',1000);</code>

進度條執行個體

<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"width:1000px;background-color:gray"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>'jindu'</code> <code>style</code><code>=</code><code>"width:10%;background-color:red;height:20px;"</code><code>></</code><code>div</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>'button'</code> <code>value</code><code>=</code><code>'點選停止'</code> <code>onclick</code><code>=</code><code>'Stop();'</code> <code>/></code>

<code>function Foo(){</code>

<code> </code><code>var id = document.getElementById('jindu');</code>

<code> </code><code>clearInterval(interval)</code>

<code> </code><code>id.style.width = pro+'%';</code>

<code>interval = setInterval('Foo()',20)</code>

<code>function Stop(){</code>

<code> </code><code>clearInterval(interval)</code>

本文轉自qw87112 51CTO部落格，原文連結:http://blog.51cto.com/tchuairen/1742721

DOM程式設計

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條