奥门威尼斯网址DOM Element节点类型详解

by admin on 2019年9月24日

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)中,标签名始终和源代码中保持一致。
假如你不确定自己的脚本将会在
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()构造函数生成。因此,元素节点不是一种对象,而是一组对象。

1
2
3
4
<div id="myDiv">text</div>
  
var div=getElementById("myDiv");
alert(div.tagName);   //"DIV",HTML中标签名是大写的

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>

 

HTML元素

一、与元素本身特征相关的属性


以下属性与元素本身的特征相关。

1.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这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>

 

特性(属性)

每个元素都有一或多个特性,用于给出相应元素或内容的附加信息。
例如:

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

 

取得特性: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(),而只使用对象的属性。

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

验证

2.取得特性

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

1
2
3
var div=document.getElmentById("myDiv");
alert(div.getAttribute("id"));  //"MyDiv"
alert(div.getAttribute("class")); //""bd

打赏支持我写出更多好文章,谢谢!

奥门威尼斯网址 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.设置特性

关于作者:韩子迟

奥门威尼斯网址 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');
}
1
2
3
var div=document.getElmentById("myDiv"); 
div.setAttribute("id","someDiv");
div.setAttribute("class","ss");

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

二、盒状模型相关属性


4.attributes属性

遍历元素的特性

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高度(或宽度)加上CSS的padding,减去滚动条(如果存在)。

对于整张网页来说,当前可见高度(即视口高度)要从document.documentElement对象(即<html>节点)上获取,等同于window.innerHeight属性减去水平滚动条的高度。没有滚动条时,这两个值是相等的;有滚动条时,前者小于后者。

Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap的集合。

创建元素:document.createElement()

参数:要创建的标签名。这个标签名在HTML文档中不区分大小写,在XML文档(包括XHTML),区分大小写。

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

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

2.2、Element.clientLeft,Element.clientTop

通过attributes属性,获取、设置、移除元素的特性

元素的子节点

元素的childNodes属性中包含了它的所有子节点,这些子节点有可能是元素,文本节点,注释或处理指令。

2.3、Element.scrollHeight,Element.scrollWidth

1
2
3
4
5
6
7
var div = document.getElementById("myDiv"); 
//取得元素特性 
alert(div.attributes["id"].nodeValue); //"myDiv" 
//设置元素特性 
div.attributes["id"].nodeValue = "myDiv2"; //id改为"myDiv2" 
//移除元素特性 
div.attributes.removeNamedItem("class"); //移除class特性

2.4、Element.scrollLeft,Element.scrollTop

5.创建元素

2.5、Element.offsetHeight,Element.offsetWidth

使用document.createElement()方法可以创建新元素。

2.6、Element.offsetLeft,Element.offsetTop

1
var div=document.createElement("div");

2.7、Element.style

每个元素节点都有style用来读写该元素的行内样式信息。

 

2.8、总结

 

三、返回元素节点相关节点的属性


以下属性返回元素节点的相关节点。

 

3.1、Element.children,Element.childElementCount

Element.children属性返回一个HTMLCollection对象,包括当前元素节点的所有子节点。它是一个类似数组的动态对象(实时反映网页元素的变化)。如果当前元素没有子元素,则返回的对象包含零个成员。

// para是一个p元素节点
if (para.children.length) {
  var children = para.children;
    for (var i = 0; i < children.length; i++) {
      // ...
    }
}

这个属性与Node.childNodes属性的区别是,它只包括HTML元素类型的子节点,不包括其他类型的子节点。

Element.childElementCount属性返回当前元素节点包含的子HTML元素节点的个数,与Element.children.length的值相同。注意,该属性只计算HTML元素类型的子节点。

来自为知笔记(Wiz)PromoteWiz=0

3.2、Element.firstElementChild,Element.lastElementChild

Element.firstElementChild属性返回第一个HTML元素类型的子节点,Element.lastElementChild返回最后一个HTML元素类型的子节点。

如果没有HTML类型的子节点,这两个属性返回null

3.3、Element.nextElementSibling,Element.previousElementSibling

Element.nextElementSibling属性返回当前HTML元素节点的后一个同级HTML元素节点,如果没有则返回null

// 假定HTML代码如下
// <div id="div-01">Here is div-01</div>
// <div id="div-02">Here is div-02</div>
var el = document.getElementById('div-01');
el.nextElementSibling
// <div id="div-02">Here is div-02</div>

Element.previousElementSibling属性返回当前HTML元素节点的前一个同级HTML元素节点,如果没有则返回null

3.4、Element.offsetParent

Element.offsetParent属性返回当前HTML元素的最靠近的、并且CSS的position属性不等于static的父元素。如果某个元素的所有上层节点都将position属性设为static,则Element.offsetParent属性指向<body>元素。

该属性主要用于确定子元素的位置偏移,是Element.offsetTopElement.offsetLeft的计算基准。

四、操作元素属性相关的方法


元素节点提供以下四个方法,用来操作HTML标签的属性。

  • Element.getAttribute():读取指定属性
  • Element.setAttribute():设置指定属性
  • Element.hasAttribute():返回一个布尔值,表示当前元素节点是否有指定的属性
  • Element.removeAttribute():移除指定属性

五、查找相关的方法


以下四个方法用来查找与当前元素节点相关的节点。这四个方法也部署在document对象上,用法完全一致。

  • Element.querySelector()
  • Element.querySelectorAll()
  • Element.getElementByTagName()
  • Element.getElementByClassName()

上面四个方法只返回Element子节点,因此可以采用链式写法。

document
  .getElementById('header')
  .getElementsByClassName('a')

5.1、Element.querySelector()

Element.querySelector方法接受CSS选择器作为参数,返回父元素的第一个匹配的子元素。

var content = document.getElementById('content');
var el = content.querySelector('p');

上面代码返回content节点的第一个p元素。

需要注意的是,浏览器执行querySelector方法时,是先在全局范围内搜索给定的CSS选择器,然后过滤出哪些属于当前元素的子元素。因此,会有一些违反直觉的结果。

<div>
<blockquote id="outer">
  <p>Hello</p>
  <div id="inner">
    <p>World</p>
  </div>
</blockquote>
</div>

那么,下面代码实际上会返回第一个p元素,而不是第二个。

var outer = document.getElementById('outer');
outer.querySelector('div p')
// <p>Hello</p>

奥门威尼斯网址 5

选择器最好够明确

5.2、Element.querySelectorAll()

Element.querySelectorAll方法接受CSS选择器作为参数,返回一个NodeList对象,包含所有匹配的子元素。

该方法的执行机制与querySelector相同,也是先在全局范围内查找,再过滤出当前元素的子元素。因此,选择器实际上针对整个文档的。

5.3、Element.getElementsByTagName()

Element.getElementsByTagName方法返回一个HTMLCollection对象,成员是当前元素节点的所有匹配指定标签名的子元素。该方法与document.getElementsByTagName方法的用法类似,只是搜索范围不是整个文档,而是当前元素节点。

同样的,该方法的参数大小写不敏感。

5.4、Element.getElementsByClassName()

Element.getElementsByClassName方法返回一个HTMLCollection对象,成员是当前元素节点的所有匹配指定class的子元素。该方法与document.getElementsByClassName方法的用法类似,只是搜索范围不是整个文档,而是当前元素节点。

该方法的参数大小写敏感。

5.5、Element.closest()

Element.closest方法返回当前元素节点的最接近的父元素(或者当前节点本身),条件是必须匹配给定的CSS选择器。如果不满足匹配,则返回null

//HTML代码
<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

//JS代码
var el = document.getElementById('div-03');
el.closest("#div-02") // div-02
el.closest("div div") // div-03
el.closest("article > div") //div-01
el.closest(":not(div)") // article

上面代码中,由于closet方法将当前元素节点也考虑在内,所以第二个closet方法返回div-03

5.6、Element.match()

Element.match方法返回一个布尔值,表示当前元素是否匹配给定的CSS选择器。

六、事件相关的方法


以下三个方法与Element节点的事件相关。这些方法都继承自EventTarget接口。

  • Element.addEventListener():添加事件的回调函数
  • Element.removeEventListener():移除事件监听函数
  • Element.dispatchEvent():触发事件

element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);

var event = new Event('click');
element.dispatchEvent(event);

七、其他方法


7.1、Element.scrollIntoView()

7.2、Element.getBoundingClientRect()

7.3、Element.getClientRects()

7.4、Element.insertAdjacentHTML()

7.5、Element.remove()

Element.remove方法用于将当前元素节点从DOM树删除。

var el = document.getElementById('div-01');
el.remove();

7.6、Element.focus()

Element.focus方法用于将当前页面的焦点,转移到指定元素上。

document.getElementById('my-span').focus();

发表评论

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

网站地图xml地图