這節課我們來學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)

 * @Param 
 
name 標籤的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("你觸發了點選事件");

};





//貌似就這些了