什么叫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()方法获取，如下：

创建文本框：

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中元素添加属性

创建文本框：

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

通过js代码给input元素添加id属性

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

3.在DOM元素中插入内容

div：

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

在js中使用innerHTML属性插入内容，使用getAttribute()获取标签中的属性值

//将内容插入到指定的元素中并替换元素中已有的内容
document.getElementById("context").innerHTML="节日快乐";

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

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

div:

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

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

//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中删除元素

JavaScript操作的DOM对象