Element类型

除了document,element类型也算是最常用的类型

Element节点有以下特征：

nodeType　　值为1

nodeName　　元素的标签名

nodeValue　　值为null

parentNode　　值为Document或Element（上一级父级元素）

首先介绍DOM里常见的三种节点类型（总共有12种，如docment）：元素节点，属性节点以及文本节点，例如<h2 class="title">head</h2>，其中h2是元素节点，class是属性节点，head是文本节点，在这里你可以说h2这个元素节点包含一个属性节点和一个文本节点。其实几乎所有HTML的标签都是元素节点，而id, title, class等则是属性节点，而元素所包含的文本内容则是文本节点。

tagName和nodeName的语义是一样的，都是返回所包含标签的名称，例如上面的h2标签，都是返回h2，但是tagName只能在元素标签上使用，而nodeName则可以在所有的节点上使用。

而tagName只有在元素节点上才会有值。

从DOM层次来看，nodeName是node 接口上的property，而tagName是element 接口上的property，所有的节点（元素节点，属性节点，文本节点等12种）都继承了node接口，而只有元素节点才继承了element节点，因此nodeName比tagName具有更大的使用范围。

总结：tagName只能用在元素节点上，而nodeName可以用在任何节点上，可以说nodeName涵盖了tagName，并且具有更多的功能，因此建议总是使用nodeName。

转自：https://blog.csdn.net/borishuai/article/details/5719227

 1、HTML元素

HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过他的子类型来表示。

HTMLElement类型直接继承自Element并添加了一些属性。添加属性分别对应每个HTML元素中都存在下列标准特性。

id，元素在文档中的唯一标识符。

title，有关元素的附加说明信息，一般通过工具提示条显示出来,(也就是把鼠标放在元素上边显示的提示信息)

lang，元素内容的元素代码，很少使用。

dir，语言的方向，值为‘ltr’，(left-to-right,从左至右)或‘rtl’(right-to-left,从右至左)，也很少使用

className，与元素的class特性对应，即为元素指定的CSS类，

2、取得特性

每一个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。

操作DOM方法的方法有三个,这个方法可以针对特性使用：

对象.getAttribute(‘属性’)　　//传入的字符串要和属性名相同class不能写为className，如果不存在则返回null

还可以获取元素的自定义属性，特性的名称是不区分大小写的

style属性返回一个CSS对象

onclick特性必须接受一个函数的指针，否则返回null

由于getAttribute()函数在每一个浏览器返回的属性值不一致，所以不经常使用。

/*

　特殊情况：

<body>
    <div id='div1' title='klkx' dir='rtl' class='mn'  align='center'>abc</div>
    <script>
        var oDiv = document.getElementById('div1');
        /*
            oDiv.btn = 'mn';
            console.log( oDiv.getAttribute( 'btn') ); //null
        */
        oDiv.setAttribute('btn','mn');//变为对象的特性
        
        console.log( oDiv.getAttribute( 'btn') );    // mn
        
    </script>
 </body>

但是IE除外,如果是.设置的属性，利用对象.属性的形式能访问当，但是用getAttribute()访问不到，用setAttribute()设置的特性，用对象.属性也访问不到，一个是特性，一个是属性；并不一样

*/

3、设置特性

修改的对象.setAttribute(‘属性’,'要修改的值')

如果特性不存在，则会创建该特性并赋值

删除特性：

修改的对象.removeAttribute('属性')　　//会删除属性和属性值

4、attributes属性

Element类型是使用attributes属性的的唯一一个DOM节点类型。

attributes属性包含一个NamedNodeMap与NodeList类似，动态类数组；

元素的每一个特性都保存在Attributes节点表示，每一个节点都保存在NamedNodeMap对象中

NamedNodeMap对象有以下方法：

getNamedItem(name);返回nodename属性等于name的节点

removeNamedItem(name);从列表中删除nodeName属性等于name的节点，返回删除的节点

setNamedItem(node);向列表中添加节点，以节点的nodeName属性为索引

setNamedItem() 方法向 nodeMap 添加指定的节点。并不常用因为还要创建一个新的节点

如果此节点已存在，则将替换该节点，并返回被替换的节点，否则返回值是 null。

<body>
    <div id='div1' title='klkx' dir='rtl' class='mn'  align='center' name='abc'>abc</div>
    <script>
        var oDiv = document.getElementsByTagName('div')[0];
        console.log(oDiv.align);
        var s1 = oDiv.attributes.removeNamedItem('align');//删除节点
        console.log(oDiv.align);
        var align = document.createAttribute('align');//要插入节点，必须先创建节点
        align.nodeValue = 'center';
        var s2 = oDiv.attributes.setNamedItem(align);
        console.log(s2);
    </script>
 </body>

item(pos)返回位于数字pos位置的节点

三种方法：结果是一样的

console.log( oDiv.attributes.item('3').nodeValue );
console.log( oDiv.attributes['class'].nodeValue );
console.log( oDiv.attributes.getNamedItem('class').nodeValue );

 也可以用以上的语法设置特性的值：

　　　　 oDiv.attributes.item('3').nodeValue = 'mn1'
        console.log( oDiv.attributes.item('3').nodeValue );

        oDiv.attributes['class'].nodeValue = 'mn2'
        console.log( oDiv.attributes['class'].nodeValue );

        oDiv.attributes.getNamedItem('class').nodeValue = 'mn3';
        console.log( oDiv.attributes.getNamedItem('class').nodeValue );

removeNamedItem()方法与removeAttribute()方法相同，都删除节点，但是前者返回删除的节点

由于attributes对象的方法不够方便，所以经常使用

getAttribute()

removeAttribute()

setAttribute()

实例：遍历整个对象的特性，并返回以空格拼接的字符串

function outputAttributes(element){
            var pairs = [],
            attrName,
            attrValue,
            i,
            len;
            for (i=0,len=element.attributes.length;i<len ;i++ )
            {
                attrName = element.attributes[i].nodeName;
                attrValue = element.attributes[i].nodeValue;
                pairs.push(attrName + '="' + attrValue + '"');
            }
            return pairs.join(' ');
        }

问题：不同的浏览器返回的特性的顺序并不一样；

IE7以下会返回更多可能的特性;

所以为了兼容以前的版本，可以每一个特性都有一个specified属性

specified属性：

specified 属性返回 true，如果已规定某个属性。

如果已创建该属性但尚未添加到元素中，也会返回 true。

否则返回 false。

function outputAttributes(element){
            var pairs = [],
            attrName,
            attrValue,
            i,
            len;
            for (i=0,len=element.attributes.length;i<len ;i++ )
            {
                attrName = element.attributes[i].nodeName;
                attrValue = element.attributes[i].nodeValue;
                if (element.attributes[i].specified){
                    pairs.push(attrName + '="' + attrValue + '"');
                }
            }
            return pairs.join(' ');
        }

 5、创建元素

1、document.create('div');

2、document.create('<div id="div1"></div>');

IE7以下创建元素用第2种

6、元素的子节点

元素可以有任意多个子节点和后代节点，因为元素可以使其他元素的子节点。

元素的childNodes属性包含了所有的自己点，包括文本节点、注释、处理指令。不同浏览器看待节点方面存在显著不同

实例：这是一个通用的方法：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var oUl = document.getElementsByTagName('ul')[0],
            i,
            len,
            index = 0;
        for (i=0,len = oUl.childNodes.length;i<len ;i++ )
        {
            if (oUl.childNodes[i].nodeType === 1)
            {
                index++;
            }
        }
        console.log(index);
    </script>
 </body>

也可以通过：

父节点.getElementByTagName('标签名');获得

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jokes/p/9468174.html