快捷搜索:
来自 新京葡娱乐场网址 2019-06-15 15:53 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

Element节点类型详解,你所不了解的javascript操作

DOM Element节点类型详解

2015/09/21 · HTML5 · DOM

本文小编: 伯乐在线 - 韩子迟 。未经笔者许可,禁止转发!
应接插足伯乐在线 专栏撰稿人。

上文中大家讲授了 DOM 中最关键的节点类型之一的 Document 节点类型,本文大家延续深刻,谈谈另四个重要的节点类型 Element 。

一:Node类型

1、概况


Element 类型用于表现 HTML 或 XML 成分,提供了对成分标具名、子节点及特点的拜会。 Element 节点有所以下特点:

  1. nodeType 的值为 1
  2. nodeName 的值为成分的标签名
  3. nodeValue 的值为null
  4. parentNode 可能是 Document 或者 Element
  5. 其子节点恐怕是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

要拜访成分的标具名,能够用 nodeName 属性,也得以用 tagName 属性;那四个属性会再次来到同样的值。在 HTML 中,标签字始终都以一切大写表示,而在 XML(偶然候也包罗XHTML)中,标具名始终和源代码中保持一致。假令你不明确本身的本子将会在 HTML 还是 XML 文书档案中进行,最棒依然在相比较后面将标具名转换成相同的大小写情势:

JavaScript

var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 那样最佳,适用于其余文书档案 // ... }

1
2
3
4
5
6
7
var myDiv = document.querySelector('div');
console.log(myDiv.tagName);  // DIV
console.log(myDiv.nodeName);  // DIV
 
if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
  // ...
}

DOM1级定义了多少个Node接口,该接口是由DOM中的全部节点类型完毕。每一个节点都有二个nodeType属性,用于评释节点的品种,节点类型在Node类型中有以下两种:

2、HTML 元素


装有 HTML 成分都由 HTMLElement 类型表示,不是间接通过这一个种类,也是由此它的子类型来代表。 HTMLElement 类型直接接轨自 Element 并加多了一些性质。每一个 HTML 成分中都留存下列标准属性:

  1. id 成分在文书档案中的唯一标志符
  2. title 有关因素的附加表达消息,一般经过工具提醒条呈现出来
  3. lang 成分内容的言语代码,没有多少使用
  4. dir 语言的倾向,值为 ltr 或者 rtl,也十分的少使用
  5. className 与成分的 class 天性对应

Node.ELEMENT_NODE(1); 元凉秋点
Node.ATTRIBUTE_NODE(2); 属性节点
Node.TEXT_NODE(3); 文本节点
Node.DOCUMENT_NODE(9); 文书档案节点

3、性格的获得和设置


每一个成分都有一个或五个特点,这几个特征的用处是付诸相应成分或其剧情的叠合音信。操作天性的 DOM 方法首要有多少个,分别是getAttribute() setAttribute() removeAttribute()

注意,传递给 getAttribute() 的特点名与实际的脾气名一样,由此要想赢得 class 天性值,应该传入 class 而不是 className,后者唯有在经过对象属性(property)访问性情时才用。假设给定称号的本性不设有,getAttribute() 返回 null。

<div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id='myDiv' title='hanzichi'> </div>
<script>
  var myDiv = document.querySelector('div');
 
  // attribute
  console.log(myDiv.getAttribute('id')); // myDiv
  console.log(myDiv.getAttribute('class')); // null
  console.log(myDiv.getAttribute('title')); // hanzichi
  console.log(myDiv.getAttribute('lang')); // null
  console.log(myDiv.getAttribute('dir')); // null
 
  // property
  console.log(myDiv.id); // myDiv
  console.log(myDiv.className); // ''
  console.log(myDiv.title); // hanzichi
  console.log(myDiv.lang); // ''
  console.log(myDiv.dir); // ''
</script>

因而 getAttribute() 方法也得以获得自定义本性。

在其实开销中,开荒职员不经常用 getAttribute(),而是只使用对象的属性(property)。唯有在获取自定义性子值的情形下,才使用getAttribute() 方法。为啥呢?比方说 style,在通过 getAttribute() 访问时,返回的 style 天性值包含的是 css 文本,而通过属性来访问会回来二个指标。再比方 onclick 那样的事件管理程序,当在要素上使用时,onclick 天性包涵的是 Javascript 代码,假设因而 getAttribute() 访问,将会回来相应代码的字符串,而在做客 onclick 属性时,则会返回Javascript 函数。

与 getAttribute() 对应的是 setAttribute(),这些主意接受三个参数:要设置的性状名和值。若是天性已经存在,setAttribute()会以钦定的值替换现存的值;即便天性不设有,setAttribute() 则创造该属性并安装相应的值。

而 removeAttitude() 方法用于通透到底剔除成分的天性。调用那一个方法不但会免去天性的值,而且也会从要素中全然除去脾性。

JavaScript

div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

1
2
3
4
div.setAttribute('id', 'someOtherId');
div.setAttribute('title', 'some other text');
 
div.removeAttribute('class')

实际上还会有好两种,不过那八个都不是很常用,所以就来明白那其间4种就能够了,大家先来看看节点类型,举个例子如下代码:

4、attributes 属性


Element 类型是选用 attributes 属性的唯一二个 DOM 节点类型。 attributes 属性中富含二个 NamedNodeMap,与 NodeList 类似,也是多少个“动态”的集合。元素的每三个天性都由叁个 Attr 节点表示,每一个节点都保存在 NamedNodeMap 对象中。NamedNodeMap 对象具有下列情势:

  1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
  2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
  3. setNamedItem(node): 向列表中添加节点,以节点的 nodeName 属性为索引
  4. item(pos): 重回位于数字 pos 地方处的节点

attributes 属性中蕴藏一层层的节点,各个节点的 nodeName 正是特点的称呼,而节点的 nodeValue 就是特色的值。

JavaScript

// 取得成分的风味值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能实现平等功用var id = element.getAttribute('id'); // 与removeAttribute() 方法比较,唯一的分别是能回去表示被去除特性的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 增多新特色 // 须求传入三个特征节点 element.attributes.setNamedItem(newAttr);

1
2
3
4
5
6
7
8
9
10
11
12
13
// 取得元素的特性值
var id = element.attributes.getNamedItem('id').nodeValue;
var id = element.attributes['id'].nodeValue;
 
// getAttribute() 也能实现一样功能
var id = element.getAttribute('id');
 
// 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
var oldAttr = element.attributes.removeNamedItem('id');
 
// 添加新特性
// 需要传入一个特性节点
element.attributes.setNamedItem(newAttr);

诚如的话,由于前边介绍的 attributes 方法远远不够便利,因此开垦人士更加的多的会采纳 getAttribute() removeAttribute() 以及setAttribute() 方法。

而是只要想要遍历成分的特征,attributes 属性倒是能够派上用场:

<div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i ) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='myDiv' title='hanzichi' class='fish'> </div>
<script>
  var myDiv = document.querySelector('div');
  for (var i = 0, len = myDiv.attributes.length; i < len; i ) {
    var attrName = myDiv.attributes[i].nodeName
      , attrValue = myDiv.attributes[i].nodeValue;
 
    console.log(attrName, attrValue);
  }
 
  // id myDiv
  // title hanzichi
  // class fish
</script>

HTML代码如下:

5、成分的子节点


<ul id='myUl'> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // IE: 3 别的浏览器: 7 </script>

1
2
3
4
5
6
7
8
9
10
<ul id='myUl'>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ul>
 
<script>
  var myUl = document.getElementById('myUl');
  console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
</script>

上述代码,假如是 IE 来分析,那么 <ul> 成分会有 3 个子节点,分别是 3 个 <li> 成分;而只假设此外浏览器剖判,则会有 7 个子节点,包蕴 3 个 <li> 成分 和 4 个公文节点。

万一像上面这样将成分之间的空白符删除,那么全部浏览器都会再次回到一样数量的子节点:

<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // 全部浏览器: 3 </script>

1
2
3
4
5
6
<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
 
<script>
  var myUl = document.getElementById('myUl');
  console.log(myUl.childNodes.length); // 所有浏览器: 3
</script>

 

打赏扶助本人写出越多好小说,谢谢!

打赏作者

<div id="test">
 <p>aaaaaa</p>
 <p>bbbbbb</p>
 <p>cccccc</p>
</div>

打赏补助自身写出更加多好小说,多谢!

图片 1

1 赞 1 收藏 评论

JS如下:

有关笔者:韩子迟

图片 2

a JavaScript beginner 个人主页 · 作者的篇章 · 9 ·    

图片 3

var test = document.getElementById("test");
if(test.nodeType === Node.ELEMENT_NODE) {
 alert(1)
}

如上代码在IE8及以下下是不行的,会报错,如下:

图片 4

因为IE未有领悟Node类型的构造函数,因而在IE8-下会有荒唐,不过我们可以透过数值来相比较,比方下面的要相比较成分节点的话,大家能够使用1来相比,同理属性节点是2,文本节点是3;如下代码:

var test = document.getElementById("test");
// 下面的所有的浏览器都支持
if(test.nodeType == 1) { 
  alert(1)
}

理解nodeName与nodeValue

nodeName保存的是因素的标签字,而nodeValue一般都是null;大家能够看如下代码,未有例外的认证,HTML代码都是上边包车型地铁,由此那边就不贴代码了;如下JS代码测试:

var test = document.getElementById("test");
if(test.nodeType == 1) {
 console.log(test.nodeName); // 打印DIV
 console.log(test.nodeValue); // 打印null
}

知剧情点关系

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 </head>
 <body>
</body>
</html>

如上代码,大家能够把head和body是html的子成分,同理html是她们的父级元素,那么head和body正是手足成分了,那么head及body里面包车型客车就是子成分了,大家须求知道的是各种节点都有二个childNodes属性,其保存的是相仿数组的成分,其也是有length属性,不过她不是数组Array的实例,举个例子我们能够看看如下测试代码就可以:

<div id="test">
 <p>aaaaaa</p>
 <p>bbbbbb</p>
 <p>cccccc</p>
</div>

JS代码如下:

var test = document.getElementById("test");
if(test.nodeType == 1) {
 console.log(test.childNodes);
 console.log(test.childNodes.length);
}

如上代码,在专门的学业浏览器下及IE9 下 第一行打字与印刷如下:

[text, p, text, p, text, p, text, item: function]

其次行打字与印刷7 长度为7,因为他俩把文件节点那三个空格也席卷进去了,不过在IE8及以下,长度为3,他们不包涵文件空格的节点,由此想要统一的话,大家能够编写HTML代码去掉空格,如下HTML代码就可以;

<div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

以此难点稍后在条分缕析思索,大家后天来看看如何获取子成分,大家能够运用2种办法,第一种是使用中括号[index]目录,第二种是接纳item[index]目录,如下代码:

console.log(test.childNodes[1]); // <p>bbbbbb</p>
console.log(test.childNodes.item(1)); // <p>bbbbbb</p>

然则他们并不是数组,咱们得以测试下代码就能够,如下代码:

console.log(Object.prototype.toString.call(test.childNodes) === "[object Array]");
// false不过大家使其改换为数组,如下代码:

//在IE8 及此前版本中没用
var arrayOfNodes = Array.prototype.slice.call(test.childNodes,0);
console.log(arrayOfNodes instanceof Array);

// true但是在IE8及前边不奏效;由于IE8及更早版本将NodeList达成为多少个COM对象,而大家不能够像使用JScript对象那样选择对象,要想在IE低版本中改换为Array的款式,大家能够像上面一样包裹叁个措施就可以;

function convertToArray(nodes){
 var array = null;
 try {
  array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
 } catch (ex) {
  array = new Array();
  for (var i=0, len=nodes.length; i < len; i  ){
   array.push(nodes[i]);
  }
 }
 return array;
}
var test = document.getElementById("test");
var testArray = convertToArray(test.childNodes);
console.log(testArray instanceof Array); // true

明亮parentNode(父节点),previousSibling(上叁个男人节点),nextSibling(下一个兄弟节点);

每一种节点都有二个parentNode属性,该属性指向文书档案中父节点,previousSibling是指当前节点的上三个亲生节点,nextSibling是指当前节点的下二个同胞节点,比方如下代码:

<div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
var test = document.getElementById("test");
if(test.nodeType == 1) {
 var secodeChild = test.childNodes[1];
 console.log(secodeChild); // <p>bbbbbb</p>
 console.log(secodeChild.previousSibling); // <p>aaaaaa</p>
 console.log(secodeChild.nextSibling); // <p>cccccc</p>
}

借使该节点列表中唯有三个节点的话,那么该节点的previousSibling和nextSibling都为null;父节点的firstChild指向了父节点中第多个节点;如下代码:

<div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

JS如下:

var test = document.getElementById("test");
if(test.nodeType == 1) { 
 console.log(test.firstChild); // <p class="a">aaaaaa</p>
 console.log(test.lastChild); // <p class="c">cccccc</p>
}

父节点的firstChild始终等于父节点的.childNodes[0],父节点的lastChild始终等于父节点的.childNodes[父节点的.childNodes.length

  • 1]; 如下代码:
console.log(test.firstChild === test.childNodes[0]); // true
console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true

要是没有子节点的话,那么firstChild和lastChild都指向为空null;

hasChildNodes():假若急需看清该父节点有未有子节点的话,能够运用该办法决断,再次来到的是二个布尔型,有重临true,未有回去false,如下代码:

<div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

JS代码如下:

var test = document.getElementById("test");
console.log(test.hasChildNodes());

// true倘若是之类的 就回到false;如下代码:

<div id="test"></div>
var test = document.getElementById("test");
console.log(test.hasChildNodes()); // false

ownerDocument: 全数节点都有最后叁性情质是ownerDocument,该属性指向表示全体文书档案的文档节点,这种关联表示的别的节点都属于它所在的文书档案,任何节点都不能够相同的时间设有五个或更加多文书档案中,通过那个性子,大家得以不用在节点等级次序中经过层层回溯达到最上端,而是能够直接待上访问文书档案节点;如下测试代码:

<div id="test">
 <p class="a">11</p>
</div>
var test = document.getElementById("test");
console.log(test.ownerDocument); // document
var p = test.ownerDocument.getElementsByTagName("p");
console.log(p); // <p class="a">11</p>

appendChild(): 用于向childNodes列表的尾声加多三个节点;重返的是新增加的节点;如下代码:

<div id="test">
<p class="a">11</p>
</div>

JS代码如下:

var test = document.getElementById("test");
var newNode = document.createElement("p");
var returnNode = test.appendChild(newNode);
console.log(returnNode); // <p></p>
console.log(returnNode === newNode); // true
console.log(test.lastChild === newNode); // true

insertBefore(): 该措施是将新节点插入到钦点的节点的前头去,该格局接收2个参数,要插入的节点和当作参照他事他说加以考查的节点;插入节点后,被插入的节点会变成参照节点的前三个同胞节点,同一时候被艺术重回,如下代码:

<div id="test">
<p class="a">11</p>
</div>

JS代码如下:

var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,test.childNodes[0]);
console.log(returnNode); // <div></div>
console.log(returnNode === newNode); // true

铺排节点后,结构形成如下:

复制代码 代码如下:

<div id="test">
<div></div>
<p class="a">11</p>
</div>

只是倘诺参照节点为null的话,那么就可以把新节点插入到最前边去了,如下代码:

复制代码 代码如下:

var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,null);

布置后HTML结构如下:

复制代码 代码如下:

<div id="test">
    <p class="a">11</p>
    <div></div>
</div>

咱们还足以更长远的看下如下测试代码:

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 插入后成为最后一个节点
var returnNode = test.insertBefore(newNode,null);
console.log(returnNode === test.lastChild); // true 
// 插入后成为第一个节点
var returnNode = test.insertBefore(newNode,test.firstChild);
console.log(returnNode === newNode); // true
console.log(newNode === test.firstChild); // true
// 插入到最后一个子节点的前面
var returnNode = test.insertBefore(newNode,test.lastChild);
console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true

replaceChild(); 该办法接收2个参数,要插入的节点和要替换的节点,要替换的节点将由这么些情势重返并从文书档案树中被移除,同不经常间由插入的节点攻陷其岗位,如下代码:

<div id="test"><p class="a">11</p><p class="b">22</p></div>

JS代码如下:

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替换第一个节点
var returnNode = test.replaceChild(newNode,test.firstChild);
console.log(returnNode); // <p class="a">11</p>

轮换后html代码结构变为如下:

<div id="test"><div></div><p class="b">22</p></div>

轮换最终一个节点代码如下:

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替换最后一个节点
var returnNode = test.replaceChild(newNode,test.lastChild);
console.log(returnNode); // <p class="b">22</p>

轮换后的代码如下:

<div id="test"><p class="a">11</p><div></div></div>removeChild():移除节点,该方法接收二个参数,即要移除的节点;

被移除的节点将变成重返值,如下代码:

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 移除第一个节点
var returnNode = test.removeChild(test.firstChild);
console.log(returnNode); // <p class="a">11</p>

移除后的代码结构变为如下:

<div id="test"><p class="b">22</p></div>

移除最后一个节点的代码如下:

// 移除最终三个节点
var returnNode = test.removeChild(test.lastChild);
console.log(returnNode); // <p class="b">22</p>
移除后的代码结构产生如下:

<div id="test"><p class="a">11</p></div>cloneNode():

克隆一个一模二样的副本,该方法接收一个布尔值参数,若是为true的话,表明是深复制,复制该节点及整个子节点书,假若为false的话,只复制该节点本人,举个例子如下代码:

var test = document.getElementById("test");
var deeplist = test.cloneNode(true);
console.log(deeplist);
// <div id="test"><p class="a">11</p><p class="b">22</p></div>
如果是浅复制的如下代码:
var test = document.getElementById("test");
var deeplist = test.cloneNode(false);
console.log(deeplist);// <div id="test"></div>

Document类型

JS通过Document类型表示文书档案,document承接HTMLDocument(承继自Document)类型的三个实例,表示全数HTML页面。document对象是window的一个天性,所以能够透过全局对象来做客,document对象有如下特点:

nodeType值为9,
nodeName值为”#document”,
nodeValue值为null,
parentNode值为null,
ownerDocument值为null
通晓文书档案document的子节点
documentElement: 该属性始终本着html成分,如下代码:
console.log(document.documentElement); // 指向html的引用
如若须要直接待上访问html元素的引用能够一直运用该因素更加快,更方便。
childNodes: 通过childNodes列表访问文书档案成分;如下测试代码:

console.log(document.documentElement); // 指向html的引用
console.log(document.childNodes[0]); // <!doctype html>
console.log(document.firstChild); // <!doctype html>
console.log(document.firstChild === document.childNodes[0]); // true
console.log(document.body); // 指向body的引用

有着的浏览器都援救document.documentElement 和 document.body属性;

title:  通过这几个天性能够赢得网页的标题,如下测试代码:

console.log(document.title);

也能够该格局设置网页的标题;如下代码:

document.title = “作者是龙恩”;

UCRUISERL:  获得页面中完全的url,如下代码测试:

console.log(document.URL); //

domain: 该属性包罗页面包车型大巴域名;如下测试代码:

console.log(document.domain); // 127.0.0.1

域名也足以安装的,举例大规模的跨子域的情况下,大家供给安装一样的父域就能够完毕跨域;

namedItem(): 该方法能够通过成分的name性格获得集合中的项,举例今后页面上有繁多input的框,我想经过他们的name属性猎取本人想要的哪一项,测试代码如下:

HTML代码如下:

<input name="aa"/>
<input name="bb"/>

JS代码如下:

var inputs = document.getElementsByTagName("input");
console.log(inputs.namedItem("aa")); // <input name="aa"/>

我们还足以经过方括号的语法来拜会,如下代码:

console.log(inputs["aa"]); // <input name="aa"/>

要想获取文书档案中享有的因素,能够向getElementsByTagName()中传唱”*”; 星号表示一切的情致;

getElementsByName(); 该方式也是HTMLDocument类型才有的艺术,那么些方法会再次来到带有给定name特性的享有因素,如下测试代码:

<input name="aa" type="radio"/>
<input name="aa" type="radio"/>
var aa = document.getElementsByName("aa");
console.log(aa); // object
console.log(aa.length); // 2

该格局也会回到叁个HTMLCollection.

浏览器帮助程度IE,firefox,chrome都接济;

Element类型

Element节点有以下特征:

nodeType的值为1;

nodeName的值为成分的竹具名;

nodeValue的值为null;

parentNode可能是Document或Element

要拜访元素的标具名,能够应用nodeName属性,也足以利用tagName属性,这三个属性会重回一样的值,如下代码:

<div id="test"></div>
var test = document.getElementById("test");
console.log(test.tagName); // DIV
console.log(test.nodeName); // DIV
console.log(test.nodeValue); // null;
console.log(test.parentNode); // body
console.log(test.nodeType); // 1

精晓HTML成分中的获取属性的法子

持有HTML成分都由HTMLElement类型表示,HTMLElement类型直接承袭Element;借使想要获得HTML成分的表征的话,有上面多少个艺术:

getAttribute(); 获取成分的习性的艺术;如下测试代码:

<div id="test" class="testName" title="aa"></div>
var test = document.getElementById("test");
console.log(test.getAttribute("id")); // test
console.log(test.getAttribute("class")); // testName
console.log(test.getAttribute("title")); // aa

注意:下面的获取类名在IE8 及标准浏览器下都是使用获取属性class来获得类名,下边包车型地铁只要在IE7下会回到null, 不过在IE7及以下是利用className这几个性子来获得的;如下代码:在IE7下测试:

console.log(test.getAttribute("className")); // testName

当然也得以获得自定义的属性;如下代码:

<div id="test" data-value="test1"></div>

console.log(test.getAttribute("data-value")); // test1

setAttribute() 设置成分的属性;该措施接收2个参数,首个参数是性质名称,第二个参数是对应的值;若是该值存在,则会以前日的值替换以前的值,假如属性名不设有,则会创建该属性,并点名该属性的值;如下代码:

<div id="test"></div>
// JS代码如下:
var test = document.getElementById("test");
test.setAttribute("id",'test');
test.setAttribute("class","testName");
test.setAttribute("title","aa");
test.setAttribute("data-value","test1");

生成HTML结构如下:

<div id="test" class="testName" title="aa" data-value="test1"></div>

removeAttribute(); 删除成分的特征;如下代码:

<div id="test" class="testName" title="aa" data-value="test1"></div>

JS代码如下:

var test = document.getElementById("test");
test.removeAttribute("id");
test.removeAttribute("class");
test.removeAttribute("title");
test.removeAttribute("data-value");

IE7及以下删除类名要求采用className;

attributes属性

Element类型是使用attributes属性的唯一二个dom节点类型,attributes属性包涵三个NamedNodeMap集合;该目的有以下方法:

getNamedItem(name): 重临nodeName属性等于name的节点;

attributes属性中富含一各个节点,每一个节点的nodeName就是特色的称谓,而节点的nodeValue正是节点值,要获得成分id的特色,如下代码:

<div id="test" class="testName" title="aa" data-value="test1"></div>JS代码如下:

复制代码 代码如下:

var div = document.getElementById("test");
var id = div.attributes.getNamedItem("id").nodeValue;
console.log(id);  // test

我们也能够经过中括号的语法来收获的,如下代码:

复制代码 代码如下:

var id = div.attributes['id'].nodeValue;
console.log(id); // test

一样大家也能够因此地方介绍的getAttribute(“id”)方法来博取元素,如下代码:

console.log(div.getAttribute("id")); // test

也得以由此以下情势给成分设置id,如下方法:

div.attributes["id"].nodeValue = "aa";

removeNamedItem(name): 从列表中移除nodeName属性等于name的节点;

调用removeNamedItem()方法与在要素上调用removeAttribute()方法的作用一样,是直接删除全部给定名称的特色。他们之间的差距是:removeNamedItem()方法再次回到表示被去除特性的节点;

正如代码:

<div id="test" class="testName" title="aa" data-value="test1"></div>

JS代码如下:

复制代码 代码如下:

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:Element节点类型详解,你所不了解的javascript操作

关键词: