菜单

深刻领悟DOM节点类型第五篇——成分节点Element

2019年9月22日 - JavaScript

DOM Element节点类型详解

2015/09/21 · HTML5 ·
DOM

本文我: 伯乐在线
韩子迟
。未经小编许可,禁止转发!
款待参与伯乐在线 专辑撰稿人

上文中大家讲明了 DOM
中最要害的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个注重的节点类型 Element 。

这段时间的话

  元早秋点Element非平常用,是DOM文书档案树的基本点节点;成分节点是HTML标签成分的DOM化结果。成分节点首要提供了对元素标具名、子节点及特色的拜望,本文将详细介绍成分节点的要害内容

 

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

特征

  成分节点的四个node属性——nodeType、nodeName、nodeValue分别是1、成分的大写标签名和null,其父节点parentNode指向包罗该因孟秋点的因凉秋点Element或文书档案节点Document

  [注意]要访问成分的价签字可以采纳nodeName,也能够使用tagName属性,这些属性会重回同样的值

<div id="test">123</div>
<script>
console.log(test.nodeType);//1
console.log(test.nodeName);//'DIV'
console.log(test.nodeValue);//null
console.log(test.parentNode);//<body>
console.log(test.childNodes);//[text]
console.log(test.tagName,test.tagName === test.nodeName);//'DIV' true
</script>

 

2、HTML 元素


负有 HTML 成分都由 HTMLElement
类型表示,不是从来通过这些类型,也是透过它的子类型来代表。 HTMLElement
类型直接接轨自 Element 并加多了一部分天性。种种 HTML
成分中都存在下列标准属性:

  1. id 成分在文书档案中的独一标记符
  2. title 有关因素的叠合表达消息,一般经过工具提醒条展现出来
  3. lang 成分内容的语言代码,相当少使用
  4. dir 语言的样子,值为 ltr 或者 rtl,也比较少使用
  5. className 与成分的 class 天性对应

子节点

  成分能够有自由数目标子节点和后人节点,因为成分得以是别的因素的子节点。成分的childNodes属性中含有了它的全部子节点,这个子节点可能是因素、文本注释、管理指上巳点

<ul class="list" id="list">
    <li class="in"></li>
    <li class="in"></li>
</ul>
<script>
var oList = document.getElementById('list');
//IE8-浏览器返回2,其他浏览器返回5。因为IE8-浏览器子节点中不包含空白文本节点
//关于空白文本节点的详细内容移步至此
console.log(oList.childNodes.length)
</script>

兼容

  能够通过检查nodeType属性来只获得成分节点

<ul class="list" id="list">
    <li class="in"></li>
    <li class="in"></li>
</ul>
<script>
var oList = document.getElementById('list');
var children = oList.childNodes;
var num = 0;
for(var i = 0; i < children.length; i++){
    if(children[i].nodeType == 1){
        num++;
    }
}
console.log(num);//2   
</script>

 

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’)

特色操作

  每种成分都有一个或四个特色,那几个特色的用途是交由相应成分或其内容的叠合音讯。操作天性的DOM方法重要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()五个,能够本着任何特性应用,包蕴那一个以HTMLElement类型属性的花样定义的天性

hasAttribute()

  hasAttribute()方法重返三个布尔值,表示如今因三秋点是还是不是带有内定属性

  [注意]IE7-浏览器不接济hasAttribute()方法

<div id="test" class="class1"></div>
<script>
console.log(test.hasAttribute('class'));//true
console.log(test.hasAttribute('title'));//false
</script>

getAttribute()

  getAttribute()方法用于获取性子的值,借使给定称号的天性不设有或无参数则赶回null

<div id="test" class="class1"></div>
<script>
console.log(test.getAttribute('class'));//'class1'
console.log(test.getAttribute('title'));//null
console.log(test.getAttribute('b'));//null
console.log(test.getAttribute(''));//null
</script>

  [注意]要素特性和目的属性并分裂,二者的分别详细意况挪动至此

setAttribute()

  setAttribute()方法接受八个参数:要设置的性状名和值,假如已经存在,则替换现存的值。借使本性不设有,setAttribute()则开创该属性并安装相应的值。该格局无重临值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
oBox.setAttribute("id","test");
//注意获取oBox.id时并不会报错,因为oBox保存的是当时id为box的对象,也就是现在id为test的对象
console.log(oBox.id);//test
</script>

  [注意]经过setAttrbute()方法设置的表征名会计统计一转变来小写情势

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
oBox.setAttribute("ABC","test");
console.log(oBox.getAttribute("ABC"));//test
console.log(oBox.getAttribute("abc"));//test
</script>

bug

  IE7-浏览器设置class、style、for、cellspacing、cellpadding、tabindex、readonly、maxlength、rowspan、colspan、usemap、frameborder、contenteditable那11个特征未有其余意义

<style>
.testClass{
    font-size: 30px;
}
</style>    

<div id="box">123</div>
<script>
//IE7-浏览器下没有任何效果,其他浏览器出现红色背景及30px的文字大小
var oBox = document.getElementById('box');
oBox.setAttribute("class","testClass");
oBox.setAttribute("style","height: 100px; background: red;")
</script>     

  能够动用IE7-浏览器下对象属性和要素天性的混淆bug来设置

<style>
.testClass{
    font-size: 30px;
}
</style>    

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
oBox.setAttribute("class","testClass");
oBox.setAttribute("style","height: 100px; background: red;");
//IE7下oBox.className的值为undefined
if(!oBox.className){
    oBox.setAttribute("className","testClass");
    oBox.style.setAttribute("cssText","height: 100px; background: red;");
}
</script> 

removeAttribute()

  removeAttribute()方法用于深透去除成分的特点,这一个情势不止会深透去除元素的特色值,还有可能会去除成分天性。该措施无再次回到值

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.getAttribute("id"));//box
console.log(oBox.removeAttribute("id"));//undefined
console.log(oBox.getAttribute("id"));//null    
</script>

 

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>

attributes属性

  成分节点Element是独一三个应用attributes属性的DOM节点类型。attributes属性中包罗三个NamedNodeMap,与NodeList类似,也是二个动态的聚焦。元素的每二个特色都由叁个Attr节点表示,每一个节点都保存在NamedNodeMap对象中,各种节点的nodeName正是特点的名称,节点的nodeValue正是特色的值

  attributes属性包罗以下四个方法

getNamedItem(name)

  getNamedItem(name)方法再次来到nodeName属性等于name的节点

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
console.log(oBox.attributes.getNamedItem("index"));//index='123'
console.log(oBox.attributes.getNamedItem("index").nodeName);//'index'
console.log(oBox.attributes.getNamedItem("index").nodeValue);//'123'
console.log(oBox.attributes.index);//index='123'
</script>

removeNamedItem(name)

  removeNamedItem(name)方法从列表中移除nodeName属性等于name的节点,并回到该节点

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
console.log(oBox.attributes.getNamedItem("index"));//index='123'
console.log(oBox.attributes.removeNamedItem("index"));//index='123'
console.log(oBox.attributes.getNamedItem("index"));//null
</script>

setNamedItem(node)

  setNamedItem(node)方法向列表中加多节点,该措施无重返值

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
var oldItem = oBox.attributes.removeNamedItem("index");
console.log(oBox.attributes.getNamedItem("index"));//null
console.log(oldItem);//index='123'
console.log(oBox.attributes.setNamedItem(oldItem));//null
console.log(oBox.attributes.getNamedItem("index"));//index='123'
</script>

item(pos)

  item(pos)方法重返位于数字pos地点处的节点,也得以用方括号法[]简写

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
console.log(oBox.attributes.item(2));//name="abc"
console.log(oBox.attributes[2]);//name="abc"
</script>

遍历

  attributes属性首要用于个性遍历。在必要将DOM结构类别化为HTML字符串时,许多都会波及遍历成分本性

function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName +"=\"" + attrValue + "\"");
    }
    return pairs.join(" ");
}

  针对attributes对象中的性格,差异浏览器重回的逐条分裂

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName +"=\"" + attrValue + "\"");
    }
    return pairs.join(" ");
}
//(chrome\safari)class="box" id="box" name="abc" index="123" title="test"
//(firefox)title="test" index="123" name="abc" id="box" class="box"
//(IE8+)title="test" class="box" id="box" index="123" name="abc"
//(IE7-)输出所有的特性
console.log(outputAttributes(document.getElementById("box")))
</script>

  由地方结果来看,IE7-浏览器会回到HTML成分中持有望的特点,包罗未有一点名的个性

specified

  能够行使特色节点的specified属性来消除IE7-浏览器的这么些难题。假使specified属性的值为true,则意味着该属性棉被服装置过。在IE中,全体未设置过的特色的该属性值都是false。而在其余浏览器中,任何天性节点的specified值始终为true

<div id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
var yesItem = oBox.attributes.getNamedItem("index");
var noItem = oBox.attributes.getNamedItem("onclick");
//所有浏览器浏览器都返回true
console.log(yesItem.specified);
//IE7-浏览器返回false,而其他浏览器报错,noItem不存在
console.log(noItem.specified);
</script>

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if(element.attributes[i].specified){
            pairs.push(attrName +"=\"" + attrValue + "\"");    
        }
    }
    return pairs.join(" ");
}
//所有浏览器下都返回title="test" class="box" id="box" index="123" name="abc"(顺序不一样)
console.log(outputAttributes(document.getElementById("box")))
</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地图