禁止转载

DOM Element节点类型详明

2015/09/21 · HTML5 ·
DOM

本文小编: 伯乐在线 –
韩子迟
。未经我许可,幸免转发!
招待到场伯乐在线 专辑我。

上文中我们讲授了 DOM
中最要紧的节点类型之豆蔻年华的 Document 节点类型,本文大家继续深远,谈谈另八个重大的节点类型 Element 。

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’) { // 这样最好,适用于任何文档
  // …
}

2、HTML 元素


持有 HTML 成分都由 HTMLElement
类型表示,不是直接通过那些体系,也是由此它的子类型来代表。 HTMLElement
类型直接接轨自 Element 并加多了生龙活虎部分性质。每一个 HTML
成分中都设有下列规范属性:

  1. id 成分在文书档案中的唯风华正茂标记符
  2. title 有关因素的叠合表明消息,经常通过工具提醒条呈现出来
  3. lang 成分内容的言语代码,非常少使用
  4. dir 语言的取向,值为 ltr 或者 rtl,也相当少使用
  5. className 与成分的 class 性子对应

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、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>

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>

 

打赏协理作者写出越多好作品,多谢!

打赏作者

打赏扶植本人写出更多好小说,感激!

图片 1

1 赞 1 收藏
评论

至于笔者:韩子迟

图片 2

a JavaScript beginner
个人主页 ·
我的作品 ·
9 ·
   

图片 3

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图