JavaScript——DOM操作——Window.document對(duì)象詳解
一、找到元素:
docunment.getElementById("id");根據(jù)id找,最多找一個(gè);
var a =docunment.getElementById("id");將找到的元素放在變量中;
docunment.getElementsByName("name");根據(jù)name找,找出來(lái)的是數(shù)組;
docunment.getElementsByTagName("name");根據(jù)標(biāo)簽名找,找出來(lái)的是數(shù)組;
docunment.getElementsByClassName("name") 根據(jù)classname找,找出來(lái)的是數(shù)組;
二、操作內(nèi)容:
1. 非表單元素:
(1)獲取內(nèi)容:
alert(a.innerHTML);標(biāo)簽里的html代碼和文字都獲取了,標(biāo)簽里面的所有內(nèi)容。
如:body中有這么一個(gè)div:
<div id="me"><b>試試吧</b></div>
在script中用innerHTML獲取div中的內(nèi)容:
var a= document.getElementById("me");
alert(a.innerHTML);
結(jié)果如下圖:
alert(a.innerText);只取里面的文字
alert(a.outerHTML);包括標(biāo)簽本身的內(nèi)容(簡(jiǎn)單了解)
(2)設(shè)置內(nèi)容:
a.innerHTML = "<font color=red >hello world </font>";
如果用設(shè)置內(nèi)容代碼結(jié)果如下,div中的內(nèi)容被替換了:
a.innerText會(huì)將賦的東西原樣呈現(xiàn)
清空內(nèi)容:賦值個(gè)空字符串
2. 表單元素:
(1)獲取內(nèi)容,有兩種獲取方式:
var t = document.f1.t1; form表單ID為f1里面的ID為t1的input;
var t = document.getElementById("id"); 直接用ID獲取。
alert(t.value); 獲取input中的value值;
alert(t.innerHTML); 獲取<textarea> 這里的值 </textarea>;
(2)設(shè)置內(nèi)容: t.value="內(nèi)容改變";
3. 一個(gè)小知識(shí)點(diǎn):
<a onclick ="return false">轉(zhuǎn)向百度</a> ;加了return flase則不會(huì)跳轉(zhuǎn),默認(rèn)是return true會(huì)跳轉(zhuǎn)。按鈕也一樣,如果按鈕中設(shè)置return flase 則不會(huì)進(jìn)行提交,利用這個(gè)可以對(duì)提交跳轉(zhuǎn)進(jìn)行控制。
三、操作屬性
首先利用元素的ID找到該元素,存于一個(gè)變量中:
var a = document.getElementById("id");
然后可以對(duì)該元素的屬性進(jìn)行操作:
a.setAttribute("屬性名","屬性值"); 設(shè)置一個(gè)屬性,添加或更改都可以;
a.getAttribute("屬性名");獲取屬性的值;
a.removeAttribute("屬性名");移除一個(gè)屬性。
例子1:做一個(gè)問(wèn)題,如果輸入的答案正確則彈出正確,錯(cuò)誤彈出錯(cuò)誤;
這里在text里面寫(xiě)了一個(gè)daan屬性,里面存了答案的值,點(diǎn)擊檢查答案的時(shí)候cheak輸入的內(nèi)容和答案是否一樣:
Body中代碼:
<form>中華民國(guó)成立于哪一年?<input type="text" daan="1912年" value="" id="t1" name="t1" /><input type="button" onclick="check()" id="t2" name="t2" value="檢查答案" /></form>
JS中的代碼:
function check() { var a=document.getElementById("t1"); var a1=a.value; var a2=a.getAttribute("daan"); if(a1==a2) { alert("恭喜你答對(duì)了!"); } else { alert("笨蛋!"); } }
回答正確時(shí)的結(jié)果:
例子2: 同意按鈕,倒計(jì)時(shí)10秒,同意按鈕變?yōu)榭商峤坏模@里用了操作屬性:disabled,來(lái)改變按鈕的狀態(tài),當(dāng)disabled=”disabled”時(shí)按鈕不可用。
body中的代碼:
<form><input type="submit" id="b1" name="b1" value="同意(10)" disabled="disabled" /></form>
JS中的代碼:
var n=10; var a= document.getElementById("b1"); function bian() { n--; if(n==0) { a.removeAttribute("disabled"); a.value="同意"; return; } else { a.value= "同意("+n+")"; window.setTimeout("bian()",1000); } } window.setTimeout("bian()",1000);
運(yùn)行的結(jié)果:
四、操作樣式
首先利用元素的ID找到該元素,存于一個(gè)變量中:
var a = document.getElementById("id");
然后可以對(duì)該元素的屬性進(jìn)行操作:
a. ; 操作此ID樣式的屬性。
樣式為CSS中的樣式,所有的樣式都可以用代碼進(jìn)行操作。
document.body.style.backgroundColor="顏色"; 整個(gè)窗口的背景色。
操作樣式的class:a.className="樣式表中的classname" 操作一批樣式
例子1:展示圖片的自動(dòng)和手動(dòng)切換;
Body中的代碼,做一個(gè)有背景圖片的div和兩側(cè)的控制對(duì)象:
<div id="tuijian" style=" background-image:url(imges/tj1.jpg);"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div></div>
樣式表中的代碼:
<style type="text/css"> *{ margin:0px auto; padding:0px; font-family:"微軟雅黑"; } #tuijian { width:760px; height:350px; background-repeat:no-repeat; } .pages { top:200px; background-color:#000; background-position:center; background-repeat:no-repeat; opacity: 0.4; width: 30px; height:60px; } #p1 { background-image:url(imges/prev.png); float:left; margin:150px 0px 0px 10px; } #p2 { background-image:url(imges/next.png); float:right; margin:150px 10px 0px 0px; } </style>
JS中的代碼,這里主要是每隔3秒中調(diào)用一下huan()函數(shù),來(lái)將背景圖片的樣式修改,在點(diǎn)擊左右切換的時(shí)候變?yōu)槭謩?dòng)切換,自動(dòng)切換停止:
<script language="javascript"> var jpg =new Array(); jpg[0]="url(imges/tj1.jpg)"; jpg[1]="url(imges/tj2.jpg)"; jpg[2]="url(imges/tj3.jpg)"; var tjimg = document.getElementById("tuijian"); var xb=0; var n=0; function huan() { xb++; if(xb == jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; if(n==0) { var id = window.setTimeout("huan()",3000); } } function dodo(m) { n=1; xb = xb+m; if(xb < 0) { xb = jpg.length-1; } else if(xb >= jpg.length) { xb = 0; } tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000);</script>
效果如下圖:
五、相關(guān)元素操作:
var a = document.getElementById("id");找到a;
var b = a.nextSibling,找a的下一個(gè)同輩元素,注意包含空格;
var b = a.previousSibling,找a的上一個(gè)同輩元素,注意包含空格;
var b = a.parentNode,找a的上一級(jí)父級(jí)元素;
var b = a.childNodes,找出來(lái)的是數(shù)組,找a的下一級(jí)子元素;
var b = a.firstChild,第一個(gè)子元素,lastChild最后一個(gè),childNodes[n]找第幾個(gè);
alert(nodes[i] instanceof Text); 判斷是不是文本,是返回true,不是返回flase,用if判斷它的值是不是false,可以去除空格。
六、元素的創(chuàng)建、添加、刪除:
var a = document.getElementById("id");找到a;
var obj = document.createElement("標(biāo)簽名");創(chuàng)建一個(gè)元素
obj.innerHTML = "hello world";添加的時(shí)候首先需要?jiǎng)?chuàng)建出一個(gè)元素。
a.appendChild(obj);向a中添加一個(gè)子元素。
a.removeChild(obj);刪除一個(gè)子元素。
列表中a.selectedIndex:選中的是第幾個(gè);
//a.options[a.selectIndex]按下標(biāo)取出第幾個(gè)option對(duì)象
七、字符串的操作:
var s = new String(); 或var s ="aaaa";
var s = "hello world";
alert(s.toLowerCase());轉(zhuǎn)小寫(xiě) toUpperCase() 轉(zhuǎn)大寫(xiě)
alert(s.substring(3,8));從第三個(gè)位置截取到第八個(gè)位置
alert(s.substr(3,8));從第三個(gè)位置開(kāi)始截取,截取八個(gè)字符長(zhǎng)度,不寫(xiě)后面的數(shù)字是截到最后.
s.split('');將字符換按照指定的字符拆開(kāi),放入數(shù)組,自動(dòng)排序
s.length是屬性
s.indexOf("world");world在字符串中第一次出現(xiàn)的位置,沒(méi)有返回-1
s.lastIndexOf("o");o在字符串中最后一次出現(xiàn)的位置
八、日期時(shí)間的操作
var d = new Date();當(dāng)前時(shí)間
d.setFullYear(2015,11,6);/*在想要設(shè)置的月份上減1設(shè)置*/
d.getFullYear:取年份;
d.getMonth():取月份,取出來(lái)的少1;
d.getDate():取天;
d.getDay():取星期幾
d.getHours():取小時(shí);
d.getMinutes():取分鐘;d.getSeconds():取秒
d.setFullYear():設(shè)置年份,設(shè)置月份的時(shí)候注意-1。
九、數(shù)學(xué)函數(shù)的操作
Math.ceil();大于當(dāng)前小數(shù)的最小整數(shù)
Math.floor();小魚(yú)當(dāng)前小數(shù)的最大整數(shù)
Math.sqrt();開(kāi)平方
Math.round();四舍五入
Math.random();隨機(jī)數(shù),0-1之間
十、小知識(shí)點(diǎn)
外面雙引號(hào),里面的雙引號(hào)改為單引號(hào);
在div里面行高設(shè)置時(shí),無(wú)論設(shè)置多么高,所占用的行默認(rèn)在中間位置(div上下區(qū)域內(nèi)中間——【默認(rèn)】垂直居中)。
文本框取出來(lái)的值是字符串,需要用parseint()轉(zhuǎn)化為數(shù)字
s.match(reg); s代表一個(gè)字符串,reg代表一個(gè)字符串,兩者進(jìn)行匹配,如果兩個(gè)字符串不匹配,返回一個(gè)null。
以上這篇JavaScript——DOM操作——Window.document對(duì)象詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- js基礎(chǔ)之DOM中document對(duì)象的常用屬性方法詳解
- JavaScript中document對(duì)象使用詳解
- JavaScript基礎(chǔ)語(yǔ)法、dom操作樹(shù)及document對(duì)象
- 淺析JS中document對(duì)象的一些重要屬性
- js禁止document element對(duì)象選中文本實(shí)現(xiàn)代碼
- JavaScript的document對(duì)象和window對(duì)象詳解
- javascript代碼在ie8里報(bào)錯(cuò) document.getElementById(...) 為空或不是對(duì)象的解決方法
- JavaScript document 對(duì)象常用方法
相關(guān)文章
使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試實(shí)例詳解
這篇文章主要介紹了使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試,結(jié)合實(shí)例形式詳細(xì)分析了使用 Jest 和 Supertest 進(jìn)行接口端點(diǎn)測(cè)試具體原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-04-04在js代碼拼接dom對(duì)象到頁(yè)面上的模板總結(jié)
今天小編就為大家分享一篇關(guān)于在js代碼拼接dom對(duì)象到頁(yè)面上的模板總結(jié),小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-10-10有關(guān)suggest快速刪除后仍然出現(xiàn)下拉列表的bug問(wèn)題
寫(xiě)suggest的時(shí)候,有時(shí)我們快速刪除輸入框的文字后,但是suggest下拉列表還有出現(xiàn),導(dǎo)致的原因是因?yàn)閍jax異步請(qǐng)求造成的,下面通過(guò)本文給大家分享下解決方法,感興趣的朋友一起看看2016-12-12使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表
這篇文章主要介紹了使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表,個(gè)人感覺(jué)還不錯(cuò),需要的朋友可以參考下2014-02-02javascript 無(wú)提示關(guān)閉窗口腳本
在IE7、IE8中,使用JavaScript提供的close()方法都可以關(guān)閉當(dāng)前窗口或標(biāo)簽,但都提示討厭的對(duì)話框,找了下代碼,終于可以無(wú)提示直接關(guān)閉了。2009-08-08javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12