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('标签名');获得
Element类型的更多相关文章
- Element类型知识大全
Element类型 除了Document类型之外,Element类型就要算是Web编程中最常用的类型了.Element类型用于表现XML或HTML元素,提供了对元素标签名.子节点及特性的访问. 要 ...
- 从原型链看DOM－－Element类型
Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问.原型链的继承关系为 某节点元素.__proto__->(HTML某元素Element.prototype)- ...
- 第10章 文档对象模型DOM 10.3 Element类型
Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回 ...
- javascript之DOM(三Element类型)
Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...
- 第十章—DOM（二）——Element类型
Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...
- js element类型的属性和方法整理
Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 no ...
- dom的element类型
1)getElementById 后面的nodeName和tagName都一样 var a=document.getElementById("my_div"); console.l ...
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
- Swift中集合类型indexOf(Element)提示错误的解决办法
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 初学Swift,会遇到一些潜在的小问题,比如我们在某个集合对象 ...
随机推荐
- python函数传入参数(默认参数、可变长度参数、关键字参数）
1.python中默认缺省参数----定义默认参数要牢记一点:默认参数必须指向不变对象! 1 def foo(a,b=1): 2 print a,b 3 4 foo(2) #2 1 5 foo(3,1 ...
- 【 python】输出随机的字符或数字
随机输出0-9的数字 from random import choice x = choice([0,1,2,3,4,5,6,7,8,9]) print x 输出结果 #python first.py ...
- saltstack 迭代项目到客户端并结合jenkins自动发布多台服务器
前面已经讲解了Webhook实现Push代码后的jenkins自动构建,接下来通过结合slatstack 实现多台机器的项目代码发布. 利用saltstack中file.recurse方法,运用该模块 ...
- u-boot之NAND启动与NOR启动的区别
nand启动与nor启动的区别主要分为以下几部分说明: 1.nand flash与nor flash的最主要区别 2.s3c2440的nand启动与nor启动原理 3.nand启动与nor启动的时候u ...
- Linux安装命令出现如下错误：cannot find a valid baseurl for repo :base/7x86_64
今天刚回到家,在我的虚拟机上有安装了一个Linux系统,安装好之后,想要安装如下命令,yum install wget,yum install gcc,yum install vim,发现一个也没有安 ...
- 【Linux】关于路由跟踪指令traceroute
稍有计算机常识的人都知道ping命令,是用来检查自己的主机是否与目标地址接通,自己的主机与目标地址的通讯包通讯速率,所谓的通讯包也就是那些什么TCP/IP,UDP包,这里说得通俗一点,比如,就拿这 ...
- 三种简单排序算法（java实现）
一.冒泡排序 算法思想:遍历待排序的数组,每次遍历比较相邻的两个元素,如果他们的排列顺序错误就交换他们的位置,经过一趟排序后,最大的元素会浮置数组的末端.重复操 作 ...
- ORM学员管理系统单表查询示例
前期准备工作 首先创建好一个项目 一:必须使用MySQL创建一个库 因为ORM只能对表和数据进行处理,所以库必须自己创建 create database mysite; 二:进行相关的配置 在项目my ...
- BZOJ1079或洛谷2476 [SCOI2008]着色方案
一道记忆化搜索 BZOJ原题链接 洛谷原题链接 发现对于能涂木块数量一样的颜色在本质上是一样的,所以可以直接压在一个状态,而这题的数据很小,直接暴力开\(6\)维. 定义\(f[a][b][c][d] ...
- Python之路(第七篇)Python作用域、匿名函数、函数式编程、map函数、filter函数、reduce函数
一.作用域 return 可以返回任意值例子 def test1(): print("test1") def test(): print("test") ret ...