365bet亚洲版登录-bet官网365入口

365bet亚洲版登录拥有超过百间客房,bet官网365入口的文化历经几十年的传承和积淀形成的核心内容获得业界广泛的认可,365bet亚洲版登录是目前信誉最高的娱乐场所,同国内外几百家网上内容供应商建立了合作关系。

Element节点类型详解

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

本文由365bet亚洲版登录发布于 Web前端,转载请注明出处:Element节点类型详解

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