除了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('标签名');获得

Element类型的更多相关文章

  1. Element类型知识大全

    Element类型 除了Document类型之外,Element类型就要算是Web编程中最常用的类型了.Element类型用于表现XML或HTML元素,提供了对元素标签名.子节点及特性的访问.   要 ...

  2. 从原型链看DOM--Element类型

    Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问.原型链的继承关系为 某节点元素.__proto__->(HTML某元素Element.prototype)- ...

  3. 第10章 文档对象模型DOM 10.3 Element类型

    Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回 ...

  4. javascript之DOM(三Element类型)

    Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...

  5. 第十章—DOM(二)——Element类型

    Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...

  6. js element类型的属性和方法整理

    Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 no ...

  7. dom的element类型

    1)getElementById 后面的nodeName和tagName都一样 var a=document.getElementById("my_div"); console.l ...

  8. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

  9. Swift中集合类型indexOf(Element)提示错误的解决办法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 初学Swift,会遇到一些潜在的小问题,比如我们在某个集合对象 ...

随机推荐

  1. Mapped Statements collection already contains value for*

    检查了一下,没有重复的,参数也都正确,把报错的地方注释掉继续报下一个方法错误.重启也无效 最后发现,最后一个方法的返回值类型resultType="java.util.Map"写成 ...

  2. 34-BigInteger详解

    在用C或者C++处理大数时感觉非常麻烦,但是在Java中有两个类BigInteger和BigDecimal分别表示大整数类和大浮点数类,至于两个类的对象能表示最大范围不清楚,理论上能够表示无线大的数, ...

  3. 关于echarts堆叠图标问题 ,某条数数不需要堆叠的处理

    当直接访问的总量不需要堆叠的时候,将stack改为tiled即可,效果图如下

  4. mysql怎么查看是否支持分区

    mysql从5.1开始支持分区功能 查询命令如下: mysql> show plugins like '%partiotion%'; mysql> show variables like ...

  5. bootstrap日历控件

    bootstrap的日历控件: <link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet&quo ...

  6. 搭建FTP服务器 window7

    1.安装IIS组件,打开控制面板-->程序和功能,点击打开或关闭windows功能 找到Internet信息服务,勾选FTP服务器和Web管理工具下的IIS管理控制台进行安装ftp,如图所示 2 ...

  7. Oracle性能优化2- 依据场景选择技术

    1.索引的坏处 索引可以加快查询效率,但是使用不当,会造成插入性能很低 drop table test1 purge; drop table test2 purge; drop table test3 ...

  8. PAT 1088 三人行(20 分)(暴力破解+流程分析)

    1088 三人行(20 分) 子曰:"三人行,必有我师焉.择其善者而从之,其不善者而改之." 本题给定甲.乙.丙三个人的能力值关系为:甲的能力值确定是 2 位正整数:把甲的能力值的 ...

  9. [linux]Linux如何查看文件中的中间部分内容

    最基本的是cat.more和less. 1. 如果你只想看文件的前5行,可以使用head命令,如: head -5 /etc/passwd 2. 如果你想查看文件的后10行,可以使用tail命令,如: ...

  10. Mockplus3.5.0.1新增标注功能

    Mockplus3.5.0.1版本中,新增了标注功能.多种标注模式,智能生成,随时查看.原型设计效率更高. Mockplus的标注功能有以下四种模式: 1.无选中标注 在未选中任何组件时,按住Ctrl ...