JavaScript学习笔记（6)：DOM更新节点

JavaScript学习笔记（6)

DOM更新节点

前言

这是DOM操作系列的第三篇，前两篇学习了查询节点和增加节点，这一篇来学习更新节点。依然是围绕标签节点，属性节点，文本节点来学习。依然是优先介绍我认为重要的方法。

属性节点的更新

element.setAttribute(“attribute”,“value”)

这个方法在上一篇增加节点的时候说过，它除了可以添加原来没有的属性，还可以修改原有的属性。

var div = document.getElementsByTagName("div")[0];
div.setAttribute("id","123");
console.log(div.id);//123
div.setAttribute("id","456")
console.log(div.id);//456

element.attribute = new value

这个方法上一篇也介绍过，同样除了添加原来没有的属性，还可以修改原有的属性。

var div = document.getElementsByTagName("div")[0];
div.setAttribute("id","123");
console.log(div.id);
div.id = "456";
console.log(div.id);

突然发现，这样的方法查询，增加，更新都能完成，既可读，又可写，原来都没发现这些方法这么万能，等写完这四篇，得换个方式总结一下DOM操作的方法。

更新文本节点

element.innerHtml = new html content

更新节点内部的全部内容。

由于发现前几篇都介绍过，下面这些方法就不详细说了。

element.innerText = new text

更新节点内部的文本内容。

标签节点的更新

关于标签节点的更新，我一般是先删除在增加，所以也没必要在这一篇特别介绍。

后记

在写着一片的时候，我发现JS为DOM操作提供了相当丰富的方法，但是我平时使用的只有文中介绍的这几个常用方法，确实也够用了，但是有时间还是得研究一下其他的方法，这些方法之所以存在，必然是在某些情况下可以加快编程效率的。

下一篇讲删除节点。