新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

未经作者许可

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

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:未经作者许可

您可能还会对下面的文章感兴趣: