网页DOM——Element 节点

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。

元素节点的nodeType属性都是1。

varp = document.querySelector(‘p’);

p.nodeName // “P”

p.nodeType // 1

Element对象继承了Node接口，因此Node的属性和方法在Element对象都存在。此外，不同的 HTML 元素对应的元素节点是不一样的，浏览器使用不同的构造函数，生成不同的元素节点，比如元素的节点对象由HTMLAnchorElement构造函数生成，元素的节点对象由HTMLButtonElement构造函数生成。因此，元素节点不是一种对象，而是一组对象，这些对象除了继承Element的属性和方法，还有各自构造函数的属性和方法。

1、实例属性1.1、元素特性的相关属性

（1）Element.id

Element.id属性返回指定元素的id属性，该属性可读写。

// HTML 代码为

varp = document.querySelector(‘p’);

p.id // “foo”

注意，id属性的值是大小写敏感，即浏览器能正确识别

和

这两个元素的id属性，但是最好不要这样命名。

（2）Element.tagName

Element.tagName属性返回指定元素的大写标签名，与nodeName属性的值相等。

// HTML代码为

// Hello

varspan = document.getElementById(‘myspan’);

span.id // “myspan”

span.tagName // “SPAN”

（3）Element.dir

Element.dir属性用于读写当前元素的文字方向，可能是从左到右（“ltr”），也可能是从右到左（“rtl”）。

（4）Element.accessKey

Element.accessKey属性用于读写分配给当前元素的快捷键。

// HTML 代码如下

// 点击

varbtn = document.getElementById(‘btn’);

btn.accessKey // “h”

上面代码中，btn元素的快捷键是h，按下Alt + h就能将焦点转移到它上面。

（5）Element.draggable

Element.draggable属性返回一个布尔值，表示当前元素是否可拖动。该属性可读写。

（6）Element.lang

Element.lang属性返回当前元素的语言设置。该属性可读写。

// HTML 代码如下

//

document.documentElement.lang // “en”

（7）Element.tabIndex

Element.tabIndex属性返回一个整数，表示当前元素在 Tab 键遍历时的顺序。该属性可读写。

tabIndex属性值如果是负值（通常是-1），则 Tab 键不会遍历到该元素。如果是正整数，则按照顺序，从小到大遍历。如果两个元素的tabIndex属性的正整数值相同，则按照出现的顺序遍历。遍历完所有tabIndex为正整数的元素以后，再遍历所有tabIndex等于0、或者属性值是非法值、或者没有tabIndex属性的元素，顺序为它们在网页中出现的顺序。

（8）Element.title

Element.title属性用来读写当前元素的 HTML 属性title。该属性通常用来指定，鼠标悬浮时弹出的文字提示框。

1.2元素状态的相关属性

（1）Element.hidden

Element.hidden属性返回一个布尔值，表示当前元素的hidden属性，用来控制当前元素是否可见。该属性可读写。

varbtn = document.getElementById(‘btn’);

varmydiv = document.getElementById(‘mydiv’);

btn.addEventListener(‘click’, function() {

mydiv.hidden = !mydiv.hidden;

}, false);

注意，该属性与 CSS 设置是互相独立的。CSS 对这个元素可见性的设置，Element.hidden并不能反映出来。也就是说，这个属性并不能用来判断当前元素的实际可见性。

CSS 的设置高于Element.hidden。如果 CSS 指定了该元素不可见（display: none）或可见（display: hidden），那么Element.hidden并不能改变该元素实际的可见性。换言之，这个属性只在 CSS 没有明确设定当前元素的可见性时才有效。

（2）Element.contentEditable，Element.isContentEditable

HTML 元素可以设置contentEditable属性，使得元素的内容可以编辑。

123

上面代码中，

元素有contenteditable属性，因此用户可以在网页上编辑这个区块的内容。

Element.contentEditable属性返回一个字符串，表示是否设置了contenteditable属性，有三种可能的值。该属性可写。

“true”：元素内容可编辑
“false”：元素内容不可编辑
“inherit”：元素是否可编辑，继承了父元素的设置
Element.isContentEditable属性返回一个布尔值，同样表示是否设置了contenteditable属性。该属性只读。

1.3、Element.attributes

Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点，详见《属性的操作》一章。

varp = document.querySelector(‘p’);

varattrs = p.attributes;

for(vari = attrs.length - 1; i >= 0; i–) {

console.log(attrs[i].name + ‘->’+ attrs[i].value);

}

上面代码遍历p元素的所有属性。

1.4、Element.className，Element.classList

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。

classList属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。

// HTML 代码

vardiv = document.getElementById(‘myDiv’);

div.className

// “one two three”

div.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 的列表转为字符串。
vardiv = document.getElementById(‘myDiv’);
div.classList.add(‘myCssClass’);

div.classList.add(‘foo’, ‘bar’);

div.classList.remove(‘myCssClass’);

div.classList.toggle(‘myCssClass’); // 如果 myCssClass 不存在就加入，否则移除

div.classList.contains(‘myCssClass’); //