DOM操作2

一、API和WebAPI

• ?API就是接口，就是通道，負責一個程序和其他軟件的溝通，本質是預先定義的函數。
• Web API是網絡應用程序接口。包含了廣泛的功能，網絡應用通過API接口，可以實現存儲服務、消息服務、計算服務等能力，利用這些能力可以進行開發出強大功能的web應用。

二、DOM對象

• ?通過DOM方式獲取的元素得到的對象
• 頁面中最頂級的對象：document
• 根元素：HTML標簽

三、總結獲取元素的方式

• ?根據id屬性的值獲取元素，返回的是一個元素對象

document.getElementById("id屬性的值")

• 根據標簽的名字獲取元素，返回的是一個偽數組，里面存儲了多個DOM對象

 document.getElementsByTagName("標簽名字")

• 根據name的值獲取元素，返回的是一個偽數組，里面存儲了多個DOM對象

document.getElementsByName("name屬性的值")

• 根據類樣式的名字來獲取元素，返回的一個偽數組，里面存儲了多個DOM對象

 document.getElementsByClassName("類樣式的名字")

• 根據選擇器獲取元素，返回的是一個元素的對象

 document.querySelector("選擇器的名字")

• 根據選擇器獲取元素，返回的是一個偽數組，里面存儲了多個DOM對象

document.querySelectorAll("選擇器的名字")

四、textcontent和innertext及其兼容性寫法

• ?設置標簽中的文本內容，使用 textcontent 屬性，谷歌火狐支持，IE8不支持
• 設置標簽中的文本內容，使用 innertext? 屬性，谷歌火狐，IE8支持，但是有些低版本的火狐瀏覽器不支持
• 兼容性代碼寫寫法：（原理：如果屬性在瀏覽器不支持，這個屬性類型是 undefined ）

 <script>//設置任何任意的標簽中間的任意文本內容function setInnerTtext(element,text){if(typeof element.textContent=="undefined"){element.innerText=text;}else{element.textContent=text;}}//獲取任意標簽中間的文本內容function getInnerTtext(element){if(typeof element.textContent=="undefined"){return element.innerText;}else{return element.textContent;}}</script>

五、innerText和innerHTML的區別

• innerText? 主要設置文本的內容的，設置標簽的內容是沒有標簽的效果的
• innerHTML 可以設置文本的內容，也可以設置標簽內容，標簽可以呈現效果
• innerText 可以獲取標簽中間的文本內容，獲取不到文本內容里包含的標簽
• innerHTML 可以獲取標簽中間的文本內容，也可以獲取文本中包含的標簽
• 所以推薦使用innerHTML

六、自定義屬性

• HTML本身沒標簽中本身沒有這個屬性，程序員自己添加的，為了儲存數據
• 獲取屬性用getAttribute("屬性名")-----如果html里寫了自定義的標簽或者已經設置

<input type="button" value="自定義" id="btn"><p new="20">獲取這個自定義屬性</p><p id="demo"></p><script>document.getElementById("btn").onclick=function(){var p=document.getElementsByTagName("p")[0];document.getElementById("demo").innerHTML=p.getAttribute("new");}</script>

• 設置屬性用setAttribute（“名字”，“值”）-----通過js設置
• 移除自定義屬性,用removeAttribute("屬性的名字")-----也可以移除不是自定義的自帶屬性

    <input type="button" value="設置" id="btn1"><input type="button" value="移除" id="btn2"><p>設置一個自定義屬性</p><p>xxxxxxxxxx</p><script>document.getElementById("btn1").onclick=function(){document.getElementsByTagName("p")[0].setAttribute("new","10");};document.getElementById("btn2").onclick=function(){document.getElementsByTagName("p")[0].removeAttribute("new");};</script>

七、直接通過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>

?