菜单

DOM Element节点类型详解

2019年2月6日 - JavaScript

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>

特征

  元素节点的多少个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>

 

DOM Element节点类型详解

2015/09/21 · HTML5 ·
DOM

本文作者: 伯乐在线
韩子迟
。未经作者许可,禁止转发!
欢迎参与伯乐在线 专辑小编

上文中大家上课了 DOM
中最重大的节点类型之一的 Document 节点类型,本文咱们继承浓厚,谈谈另一个生死攸关的节点类型 Element 。

最后

  若是从头到尾看完那篇博文,会意识全篇篇幅最多的始末是特色的安装。特性设置不是应有在特点节点上吧?特性节点可以设置,不过采用要素节点来操作特性更便民。元素节点的情节还包蕴元素节点的操作,可是出于在节点操作博文中曾经详细介绍过,就不再赘言

  下一篇将介绍特色节点

  欢迎沟通

打赏协理我写出更多好小说,谢谢!

图片 1

1 赞 1 收藏
评论

子节点

  元素能够有擅自数目的子节点和后代节点,因为元素得以是其他因素的子节点。元素的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>

 

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>

 

打赏扶助自己写出更加多好小说,谢谢!


打赏小编

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> 

 

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

前方的话

  元素节点Element非平日用,是DOM文档树的最首要节点;元素节点是HTML标签元素的DOM化结果。元素节点紧要提供了对元素标签名、子节点及特色的拜会,本文将详细介绍元素节点的紧要内容

 

至于作者:韩子迟

图片 2

a JavaScript beginner
个人主页
·
我的稿子
·
9
·
   

图片 3

特色操作

  每个元素都有一个或八个特征,这么些特色的用处是交给相应元素或其情节的叠加新闻。操作特性的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那13个特色没有其余效能

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

 

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图