菜单

【澳门皇家赌场】DOM Element节点类型详明

2019年11月14日 - 皇家前端

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卡塔 尔(英语:State of Qatar)中,标签字始终和源代码中保持大器晚成致。
豆蔻梢头经你不显著自个儿的本子将会在
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地图