什麽叫DOM?

DOM是文檔對象模型(Document Object Model，是基於瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla的瀏覽器最與標準接近。

DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。

DOM節點樹

在HTML中所有的事物都有節點，DOM將HTML文檔視作節點樹，通過DOM，節點樹中的是所有節點都可以通過JavaScript進行訪問，所有的HTML元素都可以被修改、創建、刪除。

查找元素

1、直接查找

2、間接查找

利用XML的強大功能和靈活性，將XML作為瀏覽器和服務器之間的通信介質。

操作元素

1、動態創建內容時所用的W3C DOM屬性和方法

1.訪問DOM中的元素，主要通過getElementById(),getElementsByTagName(),getElementsByClassName()方法獲取，如下：

創建文本框：

1. UserName：<input type="text" name="uname" class="u">

UserName：<input type="text" name="uname" class="u"> 

通過js獲取文本框內容：

/通過id獲取文本框內容

document.getElementById("name").value;

//通過標簽名文本框內容

document.getElementsByTagName("input")[0].value;

//通過name獲取文本框內容

document.getElementsByName("uname")[0].value;

//通過class獲取文本框內容

document.getElementsByClassName("u")[0].value

/通過id獲取文本框內容
document.getElementById("name").value;
//通過標簽名文本框內容
document.getElementsByTagName("input")[0].value;
//通過name獲取文本框內容
document.getElementsByName("uname")[0].value;
//通過class獲取文本框內容
document.getElementsByClassName("u")[0].value

2.給DOM中元素添加屬性

創建文本框：

1. <input type="text" name="uname" class="u">

<input type="text" name="uname" class="u">

通過js代碼給input元素添加id屬性

1. document.getElementsByTagName("input")[0].id="name";

document.getElementsByTagName("input")[0].id="name";

3.在DOM元素中插入內容

div：

1. <div id="context">Hello,2017</div>

<div id="context">Hello,2017</div>

在js中使用innerHTML屬性插入內容，使用getAttribute()獲取標簽中的屬性值

1. //將內容插入到指定的元素中並替換元素中已有的內容
2. document.getElementById("context").innerHTML="節日快樂";

//將內容插入到指定的元素中並替換元素中已有的內容
document.getElementById("context").innerHTML="節日快樂";

1. //獲取元素中屬性值
2. document.getElementById("context").getAttribute("id");

//獲取元素中屬性值
document.getElementById("context").getAttribute("id");

4.在DOM中添加、刪除元素

div:

1. <div id="context">
2. <font color="red">Hello,2017</font>
3. </div>

<div id="context">
   <font color="red">Hello,2017</font>
</div>

1)在js中使用appendChild()在dom中追加元素

1. //DOM中創建button新元素
2. var btn=document.createElement("button");
3. //文本內容
4. var Context=document.createTextNode("擺渡人，你值得看！");
5. //將內容追加到button標簽中
6. btn.appendChild(Context);
7. //在html中指定的元素中追加新元素
8. document.getElementById("div1").appendChild(btn);

//DOM中創建button新元素
var btn=document.createElement("button");
//文本內容
var Context=document.createTextNode("擺渡人，你值得看！");
//將內容追加到button標簽中
btn.appendChild(Context);
//在html中指定的元素中追加新元素
document.getElementById("div1").appendChild(btn);

2)在js中

使用removeChild()在dom中刪除元素

1. //獲取父節點
2. var pare=document.getElementById("context");
3. //獲取子節點
4. var p=document.getElementsByTagName("font")[0];
5. //刪除父節點下面的子節點，如果不獲取父節點直接來刪除子節點就無法刪除
6. pare.removeChild(p)

JavaScript操作的DOM對象