DOM操作2
一、API和WebAPI
- ?API就是接口，就是通道，負(fù)責(zé)一個程序和其他軟件的溝通，本質(zhì)是預(yù)先定義的函數(shù)。
- Web API是網(wǎng)絡(luò)應(yīng)用程序接口。包含了廣泛的功能，網(wǎng)絡(luò)應(yīng)用通過API接口，可以實現(xiàn)存儲服務(wù)、消息服務(wù)、計算服務(wù)等能力，利用這些能力可以進(jìn)行開發(fā)出強大功能的web應(yīng)用。
二、DOM對象
- ?通過DOM方式獲取的元素得到的對象
- 頁面中最頂級的對象：document
- 根元素：HTML標(biāo)簽
三、總結(jié)獲取元素的方式
-
?根據(jù)id屬性的值獲取元素，返回的是一個元素對象
-
根據(jù)標(biāo)簽的名字獲取元素，返回的是一個偽數(shù)組，里面存儲了多個DOM對象
-
根據(jù)name的值獲取元素，返回的是一個偽數(shù)組，里面存儲了多個DOM對象
-
根據(jù)類樣式的名字來獲取元素，返回的一個偽數(shù)組，里面存儲了多個DOM對象
-
根據(jù)選擇器獲取元素，返回的是一個元素的對象
-
根據(jù)選擇器獲取元素，返回的是一個偽數(shù)組，里面存儲了多個DOM對象
四、textcontent和innertext及其兼容性寫法
- ?設(shè)置標(biāo)簽中的文本內(nèi)容，使用 textcontent 屬性，谷歌火狐支持，IE8不支持
- 設(shè)置標(biāo)簽中的文本內(nèi)容，使用 innertext? 屬性，谷歌火狐，IE8支持，但是有些低版本的火狐瀏覽器不支持
- 兼容性代碼寫寫法：（原理：如果屬性在瀏覽器不支持，這個屬性類型是 undefined ）
五、innerText和innerHTML的區(qū)別
- innerText? 主要設(shè)置文本的內(nèi)容的，設(shè)置標(biāo)簽的內(nèi)容是沒有標(biāo)簽的效果的
- innerHTML 可以設(shè)置文本的內(nèi)容，也可以設(shè)置標(biāo)簽內(nèi)容，標(biāo)簽可以呈現(xiàn)效果
- innerText 可以獲取標(biāo)簽中間的文本內(nèi)容，獲取不到文本內(nèi)容里包含的標(biāo)簽
- innerHTML 可以獲取標(biāo)簽中間的文本內(nèi)容，也可以獲取文本中包含的標(biāo)簽
- 所以推薦使用innerHTML
六、自定義屬性
- HTML本身沒標(biāo)簽中本身沒有這個屬性，程序員自己添加的，為了儲存數(shù)據(jù)
- 獲取屬性用getAttribute("屬性名")-----如果html里寫了自定義的標(biāo)簽或者已經(jīng)設(shè)置
- 設(shè)置屬性用setAttribute（“名字”，“值”）-----通過js設(shè)置
- 移除自定義屬性,用removeAttribute("屬性的名字")-----也可以移除不是自定義的自帶屬性
七、直接通過document獲取元素
<script>//1.獲取body console.log(document.body);//返回body標(biāo)簽(元素)//2.獲取title console.log(document.title);//返回標(biāo)簽中的值,即標(biāo)題//3.獲取html console.log(document.documentElement);//返回html標(biāo)簽(元素)</script>八、案例
<!-- 例1:點擊按鈕禁用文本框 --><input type="text" value="" id="txt"><input type="button" value="禁止使用文本框" id="btn"><script>document.getElementById("btn").onclick=function(){document.getElementById("txt").disabled=true;};</script> <!-- 例2:點擊按鈕修改列表背景顏色 --><input type="button" value="背景顏色" id="btn"><ul id="uu"><li>要拿執(zhí)著</li><li>讓我不低頭</li><li>更精彩的活</li><li>將命運打破</li></ul><script>document.getElementById("btn").onclick=function(){var liobj=document.getElementById("uu").getElementsByTagName("li");for(var i=0;i<liobj.length;i++){liobj[i].style.backgroundColor="yellow";}};</script> <!-- 例3:阻止超鏈接跳轉(zhuǎn) --><a href="http://www.baidu.com" id="ak">百度</a><script>document.getElementById("ak").onclick=function(){return false;}</script> <!-- 例4:點擊小圖切換大圖 --><a href="big.png" id="ak"><img src="small.png" alt=""></a><br><img src="" alt="" id="big"><script>document.getElementById("ak").onclick=function(){document.getElementById("big").src=this.href;return false;};</script> <!-- 例5:列表隔行變色 --><input type="button" value="隔行變色" id="btn"><ul id="uu"><li>要拿執(zhí)著</li><li>讓我不低頭</li><li>更精彩的活</li><li>將命運打破</li></ul><script>document.getElementById("btn").onclick=function(){var liobj=document.getElementById("uu").getElementsByTagName("li");for(var i=0;i<liobj.length;i++){// if(i%2==0){// liobj[i].style.backgroundColor="yellow";// }else{// liobj[i].style.backgroundColor="red";// } liobj[i].style.backgroundColor=i%2==0?"yellow":"red";}};</script> <!-- 例6:列表高亮顯示,排他功能 --><ul id="uu"><li>要拿執(zhí)著</li><li>讓我不低頭</li><li>更精彩的活</li><li>將命運打破</li></ul><script>//獲取所有的li標(biāo)簽var liobj=document.getElementById("uu").getElementsByTagName("li");for(var i=0;i<liobj.length;i++){//為li標(biāo)簽注冊鼠標(biāo)進(jìn)入事件 liobj[i].onmousemove=function(){this.style.backgroundColor="yellow";}//為li標(biāo)簽注冊鼠標(biāo)離開事件 liobj[i].onmouseout=function(){this.style.backgroundColor="";}}</script> <!-- 例7: 根據(jù)name屬性值獲取元素 --><input type="button" value="顯示效果" id="btn"><br><input type="text" value="你好" name="name1"><br><input type="text" value="你好" name="name2"><br><input type="text" value="你好" name="name3"><br><input type="text" value="你好" name="name1"><br><input type="text" value="你好" name="name3"><br><input type="text" value="你好" name="name2"><br><input type="text" value="你好" name="name1"><script>document.getElementById("btn").onclick=function(){var inputs=document.getElementsByName("name1");for(var i=0;i<inputs.length;i++){inputs[i].value="我哈兒美好";}}</script> <!-- 例8:根據(jù)類樣式的名字獲取元素 --><div class="cls">第一個div</div><div>第二個div</div><span>第一個span</span><br><span class="cls">第二個span</span><br><input type="button" value="顯示效果" id="btn"><script>document.getElementById("btn").onclick=function(){var clsobj=document.getElementsByClassName("cls");for(var i=0;i<clsobj.length;i++){clsobj[i].style.backgroundColor="yellow";}};</script> <!-- 例9:其他的獲取元素的方法 --><div class="dv">第一個div</div><div>第二個div</div><span>第一個span</span><br><span id="sp">第二個span</span><br><input type="button" value="顯示效果" id="btn"><script>document.getElementById("btn").onclick=function(){document.querySelector(".dv").style.backgroundColor="yellow";var spobj=document.querySelectorAll("#sp");for(var i=0;i<spobj.length;i++){spobj[i].style.backgroundColor="pink";}};</script> <!-- 例10:div高亮顯示 --><style> #dv{ width: 200px; height: 200px; background: rgb(161, 131, 131); border: 10px solid rgb(161, 131, 131); } </style> <div id="dv"></div><script>document.getElementById("dv").onmouseover=function(){this.style.border="10px solid red";}document.getElementById("dv").onmouseout=function(){this.style.border="";}</script> <!-- 例11:模擬搜索框 --><input type="text" id="txt" value="請輸入關(guān)鍵字" style="color: gray"><script>document.getElementById("txt").onfocus=function(){if(this.value=="請輸入關(guān)鍵字"){this.value="";this.style.color="black";}};document.getElementById("txt").onblur=function(){if(this.value.length==0){this.value="請輸入關(guān)鍵字";this.style.color="gray";}}</script> <!-- 例13:驗證文本框密碼長度 --><input type="text" value="" id="txt"><script>document.getElementById("txt").onblur=function( ){if(this.value.length>6&&this.value.length<10){this.style.backgroundColor="red";}else{this.style.backgroundColor="blue";}};</script>
?
轉(zhuǎn)載于:https://www.cnblogs.com/EricZLin/p/8966884.html
總結(jié)
- 上一篇： 浦发东航联名卡白金卡免年费吗？不激活收年
- 下一篇： 出现Press ENTER or typ