[TOC] ### 基本概念 1、文檔：一個網頁可以稱為文檔 2、節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等） ? 3、元素：網頁中的標簽 ? 4、屬性：標簽的屬性 ***** ### 事件三要素 1、事件源: 被觸發的對象 ? 2、事件: 用戶的操作、例如：鼠標點擊，鼠標經過，鼠標離開 ? 3、事件處理程序: 事件觸發后要執行的代碼(函數形式) ***** ### 獲取元素的方法（6種） #### **a.根據id獲取,返回的是id** ``` <input value = "我是input框" id = "btn"> var btn=document.getElementById(“btn”); ``` #### **b.根據標簽名獲取元素，返回值是集合（偽數組） 動態獲取** ``` <p>哈哈,我又變帥了</p> <p>哈哈,我又變帥了</p> <p>哈哈,我又變帥了</p> <p>哈哈,我又變帥了</p> <p>哈哈,我又變帥了</p> var pObjs = document.getElementsByTagName("p");/*數組*/ ``` #### **c.根據name名獲取元素。** 返回值是集合（偽數組） （于input框中使用） ``` <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="name1"/><br/> <input type="text" value="您好" name="name3"/><br/> <input type="text" value="您好" name="name1"/><br/> <input type="text" value="您好" name="name1"/><br/> <script> var inputs = document.getElementsName("name1");/*數組*/ </script> ``` #### **d.根據類名獲取元素** 獲取所有帶有cls類的元素 ``` <p class="cls">這是另一個p</p> <span class="cls">這是第一個span</span><br/> <span>這是第二個span</span><br/> <div class="cls">這是第一個div</div> <div>這是第二個div</div> <script > var objs = document.getElementsByClassName("cls"); </script> ``` #### **e.根據id獲取 ** 返回值是id本身 ``` <input type="button" value="顯示效果" id="btn"/> var btnObj = document.querySelector("#btn"); ``` **注意 記得加上#** #### **f.根據類名獲取元素** **注意：要加 . ** 返回值是個數組 ``` <p class="cls">這是一個p</p> <span>這是一個span</span> <span class="cls">這是一個span</span> var objs = document.querySelectorAll(".cls");//是個偽數組 ``` 附： 獲取body元素的方法：document.body ###用戶常見的事件 點擊事件(onclick) 鼠標經過（onmouseover） 鼠標離開（onmouseout） 焦點事件（onfocus） 失去焦點事件（onblur） ####innerText和innerHTML的區別 ``` <style> div{ width: 300px; height: 200px; border: 2px dotted red; } </style> <input type="button" value="顯示效果" id="btn"/> <input type="button" value="顯示效果獲取" id="btn2"/> <div id="dv"> 這是div <p>這是一個p</p> </div> <script> my$("btn").onclick=function () { //my$("dv").innerText="哈哈";//設置文本 //my$("dv").innerText="<p>這是一個p</p>";//設置html標簽的代碼 //my$("dv").innerHTML="哈哈"; //my$("dv").innerHTML="<p>這是一個p</p>";//設置Html標簽的 }; //獲取 my$("btn2").onclick=function () { //可以獲取標簽中的文本內容 //console.log(my$("dv").innerText); console.log(my$("dv").innerHTML); }; </script> ``` **總結** 若直接設置純文本 innerText 和 innerHTML是一樣的，不過在帶標簽的情況下，innerText會把標簽當成字符串，而innerHTML則不會 若設置的內容里面有標簽，推薦使用innerHTML 若設置的是純文本，不帶標簽的推薦使用innerText **不管是設置還是獲取，只要想獲取純文本內容使用innerText，如果想要文本和標簽使用innerHTML** ### 自定義屬性 getAttribute()、setAttribute()、removeAttribute() 操作的是標簽的行內屬性，不存在瀏覽器兼容性問題，稱為標準方法。 * getAttribute() 獲取標簽行內屬性 * setAttribute() 設置標簽行內屬性 * removeAttribute() 移除標簽行內屬性 * 設置自定義屬性:setAttribute("屬性的名字","屬性的值") 獲取自定義屬性:getAttribute("屬性的名字") 移除屬性：removeAttribute("屬性的名字") ``` <style> ul{ list-style: none; cursor: pointer; } </style> <ul id="uu"> <li>小明的成績</li> <li>小麗的成績</li> <li>小花的成績</li> <li>小李的成績</li> <li>喬峰的成績</li> </ul> <script src="publick.js"></script> var list = my$("uu").getElementsByTagName("li"); //循環遍歷 for(var i = 0; i < list.length; i++){ //先為每個li添加自定義屬性 list[i].setAttribute("score",(i+1)*10); //點擊每個li標簽,顯示對應的自定義屬性值 list[i].onclick = function () { alert(this.getAttribute("score")); } } ``` **移除屬性 的例子** ``` <style> div{ width: 200px; height: 100px; background-color: pink; } .cls{ background-color: green; } </style> <input type="button" value="移除自定義屬性" id="btn"> <div id="dv" score="10" class="cls"></div> <script src="publick.js"></script> <script> //點擊按鈕移除元素的自定義屬性 my$("btn").onclick = function () { my$("dv").removeAttribute("score");//審查元素能看到這個score自定義屬性沒有了 //也可以移除元素的自帶的屬性 my$("dv").removeAttribute("class"); } </script> ```