DOM 增删改查举例

节点的增删改查

HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点，其中，属性节点属于元素节点)。

W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

1.getElementById()方法

getElementById()方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该

元素的 HTMLDivElement对象，如果不存在，则返回null。而通过这个节点对象，我们可以访问它的一系列属性。

元素节点属性：
tagName：获取元素节点的标签名。
innerHTML：获取元素节点里的内容。

HTML属性的属性：
id：元素节点的id名称。
title：元素节点的title属性值。
style：CSS内联样式属性值。
className：CSS元素的类。

2.getElementsByTagName()方法

getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

不管是 getElementById还是getElementsByTagName，在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们必须坚持养成区分大小写的习惯。

3.getElementsByName()方法

getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。

4.getAttribute()方法

getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。

5.setAttribute()方法

setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。

例如：document.getElementById('box').setAttribute('align','center');

6.removeAttribute()方法

removeAttribute()可以移除HTML属性。

DOM节点

1、节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName（元素名称、属性名称、#text）、nodeType（1，2，3）和nodeValue（null，属性值，文本内容不包含）。

2、节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。

childNodes：获取当前元素节点的所有子节点。
firstChild：获取当前元素节点的第一个子节点。
lastChild：获取当前元素节点的最后一个子节点。
ownerDocument：获取该节点的文档根节点，相当于document。
parentNode：获取当前节点的父节点。
previousSibling：获取当前节点的前一个同级节点。
nextSibling：获取当前节点的后一个同级节点。
attributes：获取当前元素节点的所有属性节点集合。

3、节点操作

DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。

write（）：把任意字符串插入到文档中。
createElement（）：创建一个元素节点。
appendChild（）：将新节点追加到子节点列表的末尾。
createTextNode（）：创建一个文件节点。
insertBefore（）：将新节点插入在前面。
replaceChild（）：将新节点替换旧节点。
cloneNode（）：复制节点。
removeChild（）：移除节点。