DOM Element节点类型详解

admin CSS/CSS3 没有评论

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. 其子节点大概是 Element、Text、Comment、ProcessingInstruction、CDATASection 或者 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分别是① 、成分的大写标签名和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>

 

③ 、特性的拿走和设置

各样成分都有一个或两特性状，这一个特征的用途是交由相应成分或其内容的叠加新闻。操作个性的
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那12特性状没有任何作用

<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属性中隐含3个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>

 

⑤ 、成分的子节点

<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 个子节点，分别是 三个 <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地图