mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

深远精通DOM节点类型第五篇,Element节点类型详细

时间:2019-11-23 19:18来源:www.mg4377.com
DOM Element节点类型详整 2015/09/21 · HTML5 ·DOM 正文作者: 伯乐在线 -韩子迟。未经笔者许可,幸免转载! 迎接参与伯乐在线 专栏撰稿者。 上文中我们上课了 DOM中最关键的节点类型之朝气

DOM Element节点类型详整

2015/09/21 · HTML5 · DOM

正文作者: 伯乐在线 - 韩子迟 。未经笔者许可,幸免转载!
迎接参与伯乐在线 专栏撰稿者。

上文中我们上课了 DOM 中最关键的节点类型之朝气蓬勃的 Document 节点类型,本文大家世袭深刻,谈谈另一个主要的节点类型 Element 。

前方的话

  成分节点Element非日常用,是DOM文书档案树的尤为重要节点;元凉秋点是HTML标签元素的DOM化结果。成分节点重要提供了对成分标签字、子节点及特色的探望,本文将详细介绍成分节点的要紧内容

 

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

Element对象对应网页的HTML标签成分。每一个HTML标签元素,在DOM树上都会转造成二个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') { // 这样最好,适用于任何文档
  // ...
}

特征

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

 

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

要秋天点的nodeType性子都以1,不过差异HTML标签生成的要秋日点时分化样的。JS内部接受差异的构造函数,生成分化的Element节点,比如<a>标签的节点指标由HTMLAnchorElement()构造函数生成,<button>标签的节点目的由HTMLButtonElement()构造函数生成。由此,成分节点不是生机勃勃种对象,而是风姿浪漫组对象。

2、HTML 元素


享有 HTML 成分都由 HTMLElement 类型表示,不是直接通过这些项目,也是因此它的子类型来代表。 HTMLElement 类型直接接轨自 Element 并增多了意气风发部分性质。各样 HTML 成分中都留存下列规范属性:

  1. id 成分在文档中的唯风度翩翩标志符
  2. title 有关因素的叠合表达消息,平时经过工具提醒条彰显出来
  3. lang 成分内容的语言代码,少之又少使用
  4. dir 语言的取向,值为 ltr 或者 rtl,也超少使用
  5. className深远精通DOM节点类型第五篇,Element节点类型详细明白。 与成分的 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>

 

HTML元素

意气风发、与成分本人特征相关的属性


以下属性与成分本人的性状相关。

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>

 

特性(属性)

各样元素皆有风度翩翩或多少个特征,用于给出相应成分或内容的附加音信。
例如:

  • 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()。

1.1、Element.attributes

Element.attributes性能重回叁个好像数组的对象,成员是当下成分节点的享有属性节点。下风流潇洒节将详细介绍。

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

 

拿到脾性: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卡塔 尔(英语:State of Qatar)。

出于存在这里些差别,由此开垦职员一时选拔getAttribute(),而只行使对象的性子。

1.2、Element.id,Element.tagName

Element.id属性重临钦命成分的id特性,该属性可读写。

Element.tagName性情再次回到钦赐成分的大写标签名,与nodeName品质的值卓殊。

// HTML代码为
// Hello
var span = document.getElementById('span');
span.id // "myspan"
span.tagName // "SPAN"

图片 1

验证

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>

 

打赏协助作者写出越来越多好小说,感激!

打赏作者

最后

  假设自始自终看完那篇博文,会开采全篇篇幅最多的剧情是特色的设置。天性设置不是相应在特点节点上呢?特性节点能够设置,然则利用要秋日点来操作个性更方便。成分节点的原委还富含成分节点的操作,不过由于在节点操作博文中曾经详尽介绍过,就不再赘言

  下大器晚成篇将介绍特色节点

  接待交换

安装特色: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");

1.3、Element.innerHTML

Element.innerHTML个性重临该因素包蕴的HTML代码。该属性可读写,常用来安装有些节点的从头到尾的经过。

假如将该属性设为空,等于删除它包涵的有着节点。

el.innerHTML = '';

地方代码等于将el节点变成了一个空节点,el原先富含的节点被全体剔除。

专一,假如文本节点中包蕴&、小于号和不唯有号,innerHTML属性会将它们转为实体形式&<>

// HTML代码如下 <p id="para"> 5 > 3 </p>
document.getElementById('para').innerHTML
// 5 > 3

鉴于地方那么些缘故,导致用innerHTML插入<script>标签,不会被施行。

var name = "<script>alert('haha')</script>";
el.innerHTML = name;

上面代码将脚本插入内容,脚本并不会实践。不过,innerHTML依旧有安全风险的。

var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name;

上边代码中,alert措施是会施行的。因而为了安全着想,假如插入的事文本,最佳用textContent性情代替innerHTML

打赏支持作者写出越来越多好随笔,谢谢!

图片 2

1 赞 1 收藏 评论

剔除脾气:removeAttribute()

用处:通透到底删除成分的性状。调用那一个方法不但会免去脾性的值,並且也会从要素中全然除去特性。

1.4、Element.outerHTML

Element.outerHTML个性再次来到四个字符串,内容为钦命成分节点的装有HTML代码,包罗它自个儿和蕴涵的兼具子成分。

// HTML代码如下
// <div id="d"><p>Hello</p></div>

d = document.getElementById('d');
d.outerHTML
// '<div id="d"><p>Hello</p></div>'

outerHTML质量是可读写的,对它实行赋值,等于替换掉当前成分。

// HTML代码如下
// <div id="container"><div id="d">Hello</div></div>

container = document.getElementById('container');
d = document.getElementById("d");
container.firstChild.nodeName // "DIV"
d.nodeName // "DIV"

d.outerHTML = '<p>Hello</p>';
container.firstChild.nodeName // "P"
d.nodeName // "DIV"

地点代码中,outerHTML特性重新赋值以往,内层的div成分就子虚乌有了,被p成分替换了。不过,变量d还是指向原本的div成分,这意味着被沟通的DIV成分还存在于内存中。

关于作者:韩子迟

图片 3

a JavaScript beginner 个人主页 · 小编的小说 · 9 ·    

图片 4

attributes属性

Element类型是使用attribute属性的独步一时一个DOM节点类型。
attribute属性中带有叁个NamedNodeMap,与NodeList近似,也是二个“动态”的汇集。成分的每三个特色都有一个Attr节点表示,各样节点都保存在NamedNodeMap对象中。

1.5、Element.className,Element.classList

className属性用来读写当前成分节点的class属性。它的值是三个字符串,每一种class以内用空格分割。

classList性子则赶回贰个好像数组的目的,当前因三秋点的各样class就是这一个目的的二个分子。

<div class="one two three" id="myDiv"></div>

地点这么些div成分节点指标的className属性和classList属性,分别如下。

document.getElementById('myDiv').className
// "one two three"

document.getElementById('myDiv').classList
// {
//   0: "one"
//   1: "two"
//   2: "three"
//   length: 3
// }

从上面代码能够观察,className特性重临四个空格分隔的字符串,而classList脾气指向三个看似数组的指标,该目的的length本性(只读卡塔 尔(阿拉伯语:قطر‎再次来到当前因素的class数量。

classList对象有下列方法。

add():扩张叁个class。
remove():移除二个class。
contains():检查当前成分是还是不是带有有些class。
toggle():将有个别class移入或移出当前因素。
item():再次回到钦定索引地方的class。

toString():将class的列表转为字符串。

myDiv.classList.add('myCssClass');
myDiv.classList.add('foo', 'bar');
myDiv.classList.remove('myCssClass');
myDiv.classList.toggle('myCssClass'); // 如果myCssClass不存在就加入,否则移除
myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
myDiv.classList.item(0); // 返回第一个Class
myDiv.classList.toString();

上边临比一下,className和classList在丰硕和删除某些类时的写法。

// 添加class
document.getElementById('foo').className  = 'bold';
document.getElementById('foo').classList.add('bold');

// 删除class
document.getElementById('foo').classList.remove('bold');
document.getElementById('foo').className =
  document.getElementById('foo').className.replace(/^bold$/, '');

toggle艺术能够接收二个布尔值,作为第叁个参数。纵然为true,则加多该属性;如若为false,则去除该属性。

el.classList.toggle('abc', boolValue);

// 等同于

if (boolValue){
  el.classList.add('abc');
} else {
  el.classList.remove('abc');
}

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()。

二、盒状模型相关属性


遍历元素的表征

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

2.1、Element.clientHeight,Element.clientWidth

Element.clientHeight质量重回成分节点可知部分的中度,Element.clientWidth性情重返成分节点可以见到部分的小幅度。所谓可知部分,指的是不富含溢出的分寸,只回去该因素在容器中占领的尺寸,对于有滚动条的因平素讲,它们也正是滚动条围起来的区域大小。那七个属性的值包含Padding、但不包罗滚动条、边框和Margin,单位为像素。那五个特性能够测算获得,等于成分的CSS中度(或宽度卡塔 尔(英语:State of Qatar)加上CSS的padding,减去滚动条(假如存在卡塔尔国。

对此整张网页来讲,当前可以知道中度(即视口高度卡塔 尔(阿拉伯语:قطر‎要从document.documentElement对象(即<html>节点)上获取,等同于window.innerHeight本性减去档期的顺序滚动条的中度。未有滚动条时,那多少个值是十三分的;有滚动条时,前面一个小于前面一个。

编辑:www.mg4377.com 本文来源:深远精通DOM节点类型第五篇,Element节点类型详细

关键词: HTML5 javascript总结 JavaScrip