DOM操作2
一、API和WebAPI
- ?API就是接口，就是通道，負責一個程序和其他軟件的溝通，本質是預先定義的函數。
- Web API是網絡應用程序接口。包含了廣泛的功能，網絡應用通過API接口，可以實現存儲服務、消息服務、計算服務等能力，利用這些能力可以進行開發出強大功能的web應用。
二、DOM對象
- ?通過DOM方式獲取的元素得到的對象
- 頁面中最頂級的對象：document
- 根元素：HTML標簽
三、總結獲取元素的方式
-
?根據id屬性的值獲取元素，返回的是一個元素對象
-
根據標簽的名字獲取元素，返回的是一個偽數組，里面存儲了多個DOM對象
-
根據name的值獲取元素，返回的是一個偽數組，里面存儲了多個DOM對象
-
根據類樣式的名字來獲取元素，返回的一個偽數組，里面存儲了多個DOM對象
-
根據選擇器獲取元素，返回的是一個元素的對象
-
根據選擇器獲取元素，返回的是一個偽數組，里面存儲了多個DOM對象
四、textcontent和innertext及其兼容性寫法
- ?設置標簽中的文本內容，使用 textcontent 屬性，谷歌火狐支持，IE8不支持
- 設置標簽中的文本內容，使用 innertext? 屬性，谷歌火狐，IE8支持，但是有些低版本的火狐瀏覽器不支持
- 兼容性代碼寫寫法：（原理：如果屬性在瀏覽器不支持，這個屬性類型是 undefined ）
五、innerText和innerHTML的區別
- innerText? 主要設置文本的內容的，設置標簽的內容是沒有標簽的效果的
- innerHTML 可以設置文本的內容，也可以設置標簽內容，標簽可以呈現效果
- innerText 可以獲取標簽中間的文本內容，獲取不到文本內容里包含的標簽
- innerHTML 可以獲取標簽中間的文本內容，也可以獲取文本中包含的標簽
- 所以推薦使用innerHTML
六、自定義屬性
- HTML本身沒標簽中本身沒有這個屬性，程序員自己添加的，為了儲存數據
- 獲取屬性用getAttribute("屬性名")-----如果html里寫了自定義的標簽或者已經設置
- 設置屬性用setAttribute（“名字”，“值”）-----通過js設置
- 移除自定義屬性,用removeAttribute("屬性的名字")-----也可以移除不是自定義的自帶屬性
七、直接通過document獲取元素
<script>//1.獲取body console.log(document.body);//返回body標簽(元素)//2.獲取title console.log(document.title);//返回標簽中的值,即標題//3.獲取html console.log(document.documentElement);//返回html標簽(元素)</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>要拿執著</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:阻止超鏈接跳轉 --><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>要拿執著</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>要拿執著</li><li>讓我不低頭</li><li>更精彩的活</li><li>將命運打破</li></ul><script>//獲取所有的li標簽var liobj=document.getElementById("uu").getElementsByTagName("li");for(var i=0;i<liobj.length;i++){//為li標簽注冊鼠標進入事件 liobj[i].onmousemove=function(){this.style.backgroundColor="yellow";}//為li標簽注冊鼠標離開事件 liobj[i].onmouseout=function(){this.style.backgroundColor="";}}</script> <!-- 例7: 根據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:根據類樣式的名字獲取元素 --><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="請輸入關鍵字" style="color: gray"><script>document.getElementById("txt").onfocus=function(){if(this.value=="請輸入關鍵字"){this.value="";this.style.color="black";}};document.getElementById("txt").onblur=function(){if(this.value.length==0){this.value="請輸入關鍵字";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>
?
轉載于:https://www.cnblogs.com/EricZLin/p/8966884.html
總結
- 上一篇： 浦发东航联名卡白金卡免年费吗？不激活收年
- 下一篇： 农行世界杯信用卡额度多少？怎样查询额度？