>

深深领会DOM节点类型第五篇,Element节点类型详解

- 编辑:澳门新葡亰平台游戏 -

深深领会DOM节点类型第五篇,Element节点类型详解

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>

日前的话

  成分节点Element非平日用,是DOM文书档案树的重视节点;成分节点是HTML标签成分的DOM化结果。成分节点主要提供了对成分标签字、子节点及特点的寻访,本文将详细介绍元白藏点的主要性内容

 

要素的子节点

要素的childNodes属性中包括了它的全数子节点,那个子节点有望是因素,文本节点,注释或拍卖指令。

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

子节点

  成分能够有自由数目标子节点和后人节点,因为成分得以是其余因素的子节点。成分的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>

 

Element节点特征

  • nodeType的值是1;
  • nodeName的值为要素的价具名;
  • nodeValue的值为null;
  • parentNode的值只怕是Document或Element;
  • ownerDocument的值为null;
  • 其子节点大概是Element、Text、Comment、ProcessingInstruction、CDataSection或EntityReference。

在HTML中,标具名始终都是全部大写表示;而在XML中,标具名则始终会与源代码中的保持一致。所以最棒在相比前边将标签名转变为同一的大大小小写方式:

if(element.tagName == 'div'){ //不能这样比较,很容易出错!
}

if(element.tagName.toLowerCase() == 'div'){ //这样最好(适用于任何文档)
}

2、HTML 元素


抱有 HTML 成分都由 HTMLElement 类型表示,不是向来通过这一个项目,也是经过它的子类型来表示。 HTMLElement 类型间接接轨自 Element 并加多了一部分品质。各个 HTML 成分中都留存下列规范属性:

  1. id 成分在文档中的独一标志符
  2. title 有关因素的附加表明消息,一般通过工具提示条突显出来
  3. lang 成分内容的言语代码,比较少使用
  4. dir 语言的可行性,值为 ltr 或者 rtl,也相当少使用
  5. className 与成分的 class 天性对应

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(" ");
}
//(chromesafari)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> 

 

attributes属性

Element类型是行使attribute属性的独一无二贰个DOM节点类型。
attribute属性中含有两个NamedNodeMap,与NodeList类似,也是四个“动态”的会见。成分的每八个特征都有八个Attr节点表示,每种节点都保存在NamedNodeMap对象中。

打赏协理自个儿写出越多好小说,多谢!

图片 1

1 赞 1 收藏 评论

特征

  成分节点的八个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>

 

遍历成分的特点

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;
        //IE7及更早的版本会返回HTML元素中所有可能的特性,包括没有指定的特性。
        //因此要加个判断:
        //   specified——true:在HTML中制定了相应特性或通过setAttribute()方法设置了特性。false——未设置特性。
        if(element.attributes[i].specified){
            pairs.push(attrName+"=""+attrValue+""");
        }
    }
    return pairs.join(" ");
}

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这十二个特点未有其他功用

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

 

Element类型用于表现XML或HTML成分,提供了对成分标具名、子节点及特色的访谈。

关于小编:韩子迟

图片 2

a JavaScript beginner 个人主页 · 笔者的篇章 · 9 ·    

图片 3

最后

  固然原原本本看完那篇博文,会意识全篇篇幅最多的内容是特点的安装。个性设置不是相应在特色节点上呢?性格节点能够安装,不过选拔要新秋点来操作性子更有益于。成分节点的内容还包含成分节点的操作,然而由于在节点操作博文中已经详尽介绍过,就不再赘言

  下一篇将介绍特色节点

  接待沟通

HTML元素

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>

 

打赏援助小编写出越来越多好小说,谢谢!

打赏笔者

NamedNodeMap对象方法

  • getNamedItem(name):再次来到nodeName属性等于name的节点;
  • removeNamedItem(name):从列表中移除nodeName属性等于name的节点;
  • setNameItem(node):向列表中加多节点,以节点的nodeName属性为索引;
  • item(pos):再次来到位于数字pos地方处的节点

attributes属性中带有一多元节点,各个节点的nodeName便是特点的名号,而节点的nodeValue正是特点的值。

var element = document.getElementById("myDiv");

//取得元素id的特性
var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;

//设置特性的值
element.attributes["id"].nodeValue = "someOtherId";

//直接删除具有给定名称的特性,返回表示被删除特性的Attr节点。
var oldAttr = element.removeAttribute("id");
var oldAttr = element.attributes.removeNamedItem("id");

//为元素添加一个新特性,要传入一个特性节点(不常用)
element.attributes.setNamedItem(newAttr);

attributes的秘籍相当不足便利,由此开采职员越来越多的会使用getAttribute(),setAttribute()和removeAttribute()。

DOM Element节点类型详解

2015/09/21 · HTML5 · DOM

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

上文中大家讲课了 DOM 中最根本的节点类型之一的 Document 节点类型,本文我们一而再深切,谈谈另叁个重大的节点类型 Element 。

特性(属性)

各类元素都有一或八个特性,用于给出相应元素或内容的附加新闻。
例如:

  • id,成分在文书档案中的独一标志符
  • title,有关因素的附加表明音信,一般通过工具提醒条突显出来
  • lang,成分内容的言语代码,相当少使用
  • dir,语言的趋势,比比较少使用
  • className,与成分的class个性对应,即为成分钦赐的CSS类。未有将那些性格命名称叫class,是因为class是 ECMAScript 的保留字。

上述性情都能够用来赢得或修改相应的特色值。

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

<script type="application/javascript">
    var div = document.getElementById("myDiv");

    //获取元素中指定的所有信息
    alert(div.id);
    alert(div.className);
    alert(div.title);
    alert(div.lang);
    alert(div.dir);

    //也可以修改对应的每个特性:
    div.id = "someOtherId";
    div.className = "ft";
    div.title = "some other text";
    div.lang = "fr";
    div.dir = "rtl";
</script>

操作本性的DOM方法:getAttribute()、setAttribute()、removeAttribute()。

删除天性:removeAttribute()

用途:深透删除成分的性状。调用这些措施不独有会免去个性的值,并且也会从要素中全然除去天性。

创办成分:document.createElement()

参数:要创建的标签字。这些标具名在HTML文书档案中不区分轻重缓急写,在XML文书档案(包含XHTML),区分轻重缓急写。

var div = document.createElement("div");
//创建新元素的同事,也为新元素设置了ownerDocument属性。
//此时,可以操作元素的特性,为它添加更子节点,及执行其他操作
div.id = "myNewDiv";
div.className = "box";

//在新元素上设置这些特性只是给它们赋予了相应的信息。这些元素并未添加到文档树中,因此不会影响浏览器的显示。
//可以使用appendChild()、insertChild()、replaceChild()添加到文档树中。
document.body.appendChild(div);

设置特色:setAttribute()

/*
 * setAttribute()
 * param:
 *     param1——要设置的特性名
 *     param2——要设置的值
 * 如果特性已存在则会以指定的值替换现有的值;如果特性不存在,则创建该属性并设置相应的值。
 */
 var div = document.getElementById("myDiv");
 div.setAttribute("id","someOhterId");
 div.setAttribute("class","ft");
 div.setAttribute("title","some other");
 div.setAttribute("lang","fr");
 div.setAttribute("dir","rtl");

赢得天性:getAttribute()

一旦给定的习性不真实,getAttribute()再次回到null。

var div = document.getElementById("myDiv");
console.log(div.getAttribute("id"));      //myDiv
console.log(div.getAttribute("class"));   //bd
console.log(div.getAttribute("title"));   //Body text
console.log(div.getAttribute("lang"));    //en
console.log(div.getAttribute("dir"));     //ltr

留神:传递给getAttribute()的属性名与事实上的性质名要相同。

有两类特殊属性,它们即便有照顾的属性名,但品质的值和透过getAttribute()再次回到的值并分歧样。
率先类特色:style,用于通过CSS为因素钦赐样式。经过getAttribute()访谈时,重返的style特性值中饱含的是CSS文本,而因此属性来访谈它则会回到贰个指标。
第二类个性:onclick那样的事件管理程序。当在要素上选择时,onclick天性中包涵的时JavaScript代码,假若由此getAttribute()访谈,则会回来相应代码的字符串,而访谈onclick属性时,则会回去一个JavaScript函数(假如未在要素中钦赐相应天性,则赶回null)。

是因为存在那一个出入,因而开拓职员不寻常使用getAttribute(),而只利用对象的习性。

本文由前端php发布,转载请注明来源:深深领会DOM节点类型第五篇,Element节点类型详解