第七課:js的DOM操作
阿新 • • 發佈:2018-12-15
這節課我們來學js的DOM操作
先來說下啥事DOM,就是Document Object Model,文件物件模型
DOM操作就是用來操作html裡的各個標籤的,看演示
//這節課講dom操作 //1 獲取html的某個標籤 //1.1 根據標籤名 /** * document.getElementsByTagName(tagName) * @type {Node} * @Param tagName 標籤名 * @return 所有名為tagName的標籤的陣列 */var body = document.getElementsByTagName("body")[0]; //1.2 根據id /** * document.getElementById(id) * @Param id 標籤的id屬性 * @return id為引數的標籤,由於html裡的標籤的id是不允許重複的,所以可以獲得唯一的標籤物件 */ // var element = document.getElementById(""); //1.3 根據name獲取標籤 /** * document.getElementsByName(name) * @Paramname 標籤的name屬性 * @return name為引數的所有標籤,由於html裡的標籤的name屬性是可重複的,所以返回的是標籤物件陣列 */ // document.getElementsByName("") //1.4 根據class樣式獲取標籤 //2 建立標籤 /** * document.createElement(elementName) * @Param elementName 標籤名 * @return 建立標籤名對應的標籤物件並返回 */ var aElement = document.createElement("a"); //3 操作標籤 //3.1 給標籤新增子標籤 /** * element.appendChild(childElement) * * element是標籤物件 * childElement是子標籤 * appendChild()方法可以讓childElement成為element的子標籤且追加在最後面 */ body.appendChild(aElement); //3.2 給標籤刪除子標籤 /** * element.removeChild(childElement) * * element是標籤物件 * childElement是子標籤 * removeChild()方法可以移除element裡子標籤裡的childElement標籤 */ // body.removeChild(aElement); //3.3 操作標籤的屬性 //3.3.1 操作標籤的內容 //通過innerHTML屬性設定標籤的內容,此舉相當於 <a>js教程</a> aElement.innerHTML = "js教程"; //3.3.2 操作標籤的屬性 //3.3.2.1 設定標籤的屬性 /** * * element.attribute = value * 相當於 <elementName attribute=value></elementName> * element.style.xxx = value * 相當於 <elementName style="xxx:value;"></elementName> * * element.className = value; * 相當於 <elementName class=value></elementName> */ aElement.id = "firsta"; aElement.style.color="red"; aElement.style.border = "1px bolder black"; // aElement.className = "" //3.3.2.2 刪除標籤的屬性 //element.removeAttribute(attributeName); 刪除element標籤的attributeName屬性 // aElement.removeAttribute("") //3.4 給標籤設定事件 // element.eventName = function(){事件觸發時要執行的程式碼} aElement.onclick = function () { //alert(msg) 這個方法就是在瀏覽器彈出一個框然後顯示msg的資訊 alert("你觸發了點選事件"); }; //貌似就這些了