除了document类型之外，element类型是javascript编程中最常使用的类型。element类型常用于表现html或xml元素，提供对元素标签名、子节点及特性的访问。element节点具有以下的特点：
nodetype的值为1。
nodename的值为元素的标签名。
nodevalue的值为null。
parentnode的值可能是document或element。
它的子节点可能是element、text、comment、processinginstruction、cdatasection或entityreference。
要访问元素的标签名可以使用nodename属性，也可以使用tagname属性，这两个属性会返回相同的值，例如下面的例子：
<div id="mydiv"></div>
可以像下面这样获取这个元素的标签名称：
var div = document.getelementbyid("mydiv"); console.info(div.tagname); //输出“div” console.info(div.tagname == div.nodename); //true
在html中，标签始终以大写字母来表现，因此div.tagname会输出大写的“div”。而在xml（包括xhtml）中，标签名则会于源代码中的标签保持一致。因此在比较元素的标签名是否一致的时候，最好将它们转换为小写在比较。
//错误的写法 if(element.tagname == "div"){ } //正确的写法 if(element.tagname.tolowercase() == "div"){ }
html元素
所有的html元素都由htmlelement类型来表示，不是通过这个类型，也是通过它的子类型来表示。htmlelement类型直接继承自element类型，并添加了一些属性。添加的这些属性分别对应于每个html元素中都存在的系列特性：
id，元素在文档中唯一的标识符。
title，有关元素的附加说明信息，一般会通过工具提示条来显示。
lang，元素内容的语言。
dir，语言的方向，值为“ltr”（从左向右显示），或“rtl”（从右向左显示）。
classname，元素元素的class特性对应，即为元素指定的css类。
上面的这些属性都可以用来获取或修改相应的特性值。例如下面的例子：
<div id="mydiv" title="jquery之家" dir="ltr">jquery之家</div>
我们可以在控制台中输出上面的属性值：
var div = document.getelementbyid("mydiv"); console.info(div.id); console.info(div.classname); console.info(div.title); console.info(div.lang); console.info(div.dir);
要给这些属性赋值，可以像下面这样操作：
div.id = "otherid"; div.classname = "otherclass"; div.title = "othertitle"; div.lang = "en"; div.dir = "rtl";
获取属性
每一个元素都有一个或多个属性，操作元素属性的dom方法有3个，分别是：
getattribute()
setattribute()
removeattribute()
上面的这些方法可以对任何属性使用，例如：
var div = document.getelementbyid("mydiv"); console.info(div.getattribute("id")); console.info(div.getattribute("class")); console.info(div.getattribute("title")); console.info(div.getattribute("lang")); console.info(div.getattribute("dir"));
通过getattribute()方法也可以获取自定义的属性（即标准html语言中没有的属性名称），例如：
<div id="mydiv" my-attribute="hello">自定义属性</div>
可以像获取其它属性一样获取这个自定义属性的值。
var div = document.getelementbyid("mydiv"); console.info(div.getattribute("my-attribute")); //hello
提示：属性名称不区分大小写，即"id"与"id"代表同一个属性。
有两个特殊的属性，它们虽然有对应的属性名，但是属性的值与通过getattribute()获取的值并不相同。第一个属性是style属性，用于通过css来为元素赋予样式。在通过getattribute()访问时，返回的style属性值中并不是包含的css文本，而是会返回一个对象。第二个是像onclick这样的事件处理程序。当在元素上使用的时候，onclick中包含的是javascript代码，如果通过getattribute()来访问的时候，则会返回一个javascript函数。
设置属性
与getattribute()相对应的是setattribute()方法，该方法接收两个参数：要设置的属性名称和值。如果要设置的属性已经存在，setattribute()方法会以指定的值替换现有的值，如果属性不存在，setattribute()方法会创建该属性并设置相应的值。例如：
div.setattribute("id","mydiv"); div.setattribute("class","div-class"); div.setattribute("title","div-title");
通过setattribute()方法既可以操作html属性，也可以操作自定义的属性。通过这个方法设置的属性名称会被统一转换为小写形式，例如“id”会被转换为“id”。
也可以直接使用属性赋值的方式来设置属性值
div.id = "mydiv"; div.align = "left";
但是像下面这样为dom元素添加一个自定义属性，这个属性不会自动成为元素的特性：
div.mycolor = "red"; alert(div.getattribute("mycolor")); //返回null
要删除一个元素的特性，可以使用removeattribute()方法，该方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，也会从元素中完全删除这个特性。例如：
div.removeattribute("class");
attribute属性
element类型是唯一一个使用attribute属性的dom节点类型。attribute属性中包含一个namednodemap，于nodelist相似，也是一个动态的集合。元素的每一个特性都由一个attr节点表示，每一个节点都保存在namednodemap对象中。namednodemap对象拥有以下一些方法：
getnameditem(name)：返回nodename属性等于name的节点。
removenameditem(name)：从列表中移除nodename属性等于name的节点。
setnameditem(name)：向列表中添加节点，以节点的nodename为索引。
item(pos)：返回位于pos位置处的节点。
attribute属性包含一系列的节点，每个节点的nodename就是特性的名称，而节点的nodevalue就是特性的值。要取得元素的id，可以使用下面的方法：
var id = element.attribute.getnameditem("id").nodevalue;
也可以通过方括号的方式来简写上面的代码：
var id = element.attribute["id"].nodevalue;
也可以通过这种语法来设置属性值：
element.attribute["id"].nodevalue = "mydiv";
调用removenameditem()方法与在元素上调用removeattribute()方法的效果一样：删除给定名称的元素特性。但是它们之间也有一些区别，removenameditem()方法会返回被删除特性的attr节点：
var oldattr = element.attribute.removenameditem("id");
创建元素
我们通过document.createelement()方法可以创建一个新的元素。这个方法只接受一个参数：要创建的元素的标签名称。这个标签名称在html文档中不区分大小写，而在xml文档中则是要区分大小写的。例如使用下面的代码来创建一个新的元素：
var div = document.createelement("div");
在使用createelement()创建元素的同时，也为元素设置了ownerdocument属性。同时，我们还可以操作元素的特性，为它添加更多的子节点，例如：
var div = document.createelement("div");div.id = "mydiv";div.classname = "div-class";
在新元素上设置这些特性只是为元素添加了相应的信息。由于新元素还没有被添加到文档树中，所以这些特性不会浏览器的显示。要把新元素添加到文档树中，可以使用appendchild()、insertbefore()、replacechild()方法，例如下面的代码：
var div = document.createelement("div"); document.body.appendchild(div);
一旦新元素被添加到文档树中，浏览器就会立刻展现该元素。之后，对该元素所做的任何修改都会在浏览器中被反应出来。
元素子节点
元素可以有任意数量的子节点和后代节点。元素的childnodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同的浏览器对待这些节点有不同的处理方法，以下面的代码为例：
<ul id="mylist"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
如果是ie浏览器来解析这段代码，那么<ul>元素会有3个子节点，分别是3个<li>元素；如果是其他浏览器来解析，<ul>元素都会有7个子节点，包括3个<li>元素和4个文本节点（表示<li>元素之间的空白符）。如果像下面这样删除了元素之间的空白符号，那么所有的浏览器都会返回相同的子节点数量。
<ul id="mylist"><li>item 1</li><li>item 2</li><li>item 3</li></ul>
对于上面的代码，<ul>元素在任何浏览器都会包含3个子节点。如果你需要通过childnodes来遍历子节点，那么一定要注意浏览器之间的这一差别。这就意味着在执行某项操作之前，我们需要检查一下nodetype属性，例如下面的代码：
for(var i = 0,len = element.childnodes.length; i < len; i++){ if(element.childnodes[i].nodetype == 1){ //执行某些操作... } }
这个例子会循环遍历特定元素的每一个子节点，在子节点的nodetype类型为1时（表示元素节点），才执行某些操作。
如果想通过某个特定的标签名称来获取子节点和后代节点，可以使用getelementsbytagname()方法。在通过元素调用这个方法的时候，除了搜索起点是当前元素之外，其它的都与通过document来调用这个方法是一样的，因此，搜索的结果只会返回当前元素的后代。例如，想要取得<ul>元素包含的所有<li>元素，可以这样写代码：
var ul = document.getelementbyid("mylist"); var items = ul.getelementsbytagname("li");
上面的ff6d136ddc5fdfeffaf53ff6ee95f185元素中只包含直接的25edfb22a4f469ecb59f1190150159c6子元素。如果它包含更多层次的后代子元素，那么各个层次包含的25edfb22a4f469ecb59f1190150159c6元素也一起会被返回。
以上就是javascript文档对象模型-element类型的内容。