Element 属性与方法


属性描述
childNodes 返回当前元素所有子元素的数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
previousSibling 返回紧邻当前元素之前的元素
nodeName 节点的名字
nodeValue 节点的值
nodeType 节点的类型
当nodeType==1时才是元素节点,2是属性节点,3是文本节点
方法描述
getElementById(id)(document) 获取有指定惟一ID属性值文档中的元素
getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组
elemen.hasChildNodes() 返回一个布尔值,指示元素是否有子元素
document.createTextNode(text) 文档对象上的createElement方法可以创建由tagName指定的元素
element.appendChild(childNode)appendChild方法将指定的节点增加到当前元素的子节点列表
element.setAttribute(name, value)设置元素的属性
$().attr(name, value)
element.getAttribute(name) 获得元素的属性
$().attr(name)
element.removeAttribute(name)删除元素的属性
$().removeAttr(name)
element.insertBefore(newNode, targetNode)将节点newNode作为当前元素的子节点插到targetNode元素前面
element.removeChild(childNode)从元素中删除子元素childNode
element.replaceChild(newNode, oldNode)将节点oldNode替换为节点newNode
方法描述
方法描述

Element 属性


Element.attributes +IE6 元素属性的集合只读

示例
# html
<p id="paragraph" style="color: green;">Sample Paragraph</p>

# js
var paragraph= document.getElementById("paragraph");
// 首先,让我们验证该段落是否具有某些属性
 if (paragraph.hasAttributes()) {
   var attrs = paragraph.attributes;
   var output= ""; 
   for(var i=attrs.length-1; i>=0; i--) {
     output+= attrs[i].name + "->" + attrs[i].value;
   }
   result.value = output;
 } else {
   result.value = "没有属性显示了"
 }
 
# output
style->color: green;id->paragraph
					

Element.classList IE10+ 元素类属性的集合只读

示例
# 方法
add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] ) - IE不支持
当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。

# 示例
// div是具有class =“foo bar”的
元素的对象引用 div.classList.remove("foo"); div.classList.add("anotherclass"); // 如果visible被设置则删除它,否则添加它 div.classList.toggle("visible"); // 添加/删除 visible,取决于测试条件,i小于10 div.classList.toggle("visible", i < 10); alert(div.classList.contains("foo")); //添加或删除多个类 div.classList.add("foo","bar"); div.classList.remove("foo", "bar");

Element.className All+ 获取或设置指定元素的class属性的值读写

示例
# 获得类名, 多个用空格分割
var element = document.getElementById("div1");
var cName = element.className;
# 设置类名, 多个用空格分割
element.className = cName;
					

Element.clientHeight IE 元素内部高度只读

示例
- clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.
- 它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

# 示例
var h = element.clientHeight; // 返回整数, 单位像素

# 备注
clientHeight是在IE浏览器对象模型中引入的属性。
					

Element.clientLeft IE 元素距离它左边界的宽度只读

示例
- 包括滚动条的宽度。
- clientLeft 不包括左外边距和左内边距。

# 示例
var h = element.clientLeft; // 返回整数, 单位像素

# 备注
clientLeft是在IE浏览器对象模型中引入的属性。
					

Element.clientTop IE 元素顶部边框的宽度只读

示例
- 一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。

# 示例
var h = element.clientTop; // 返回整数, 单位像素

# 备注
clientTop是在IE浏览器对象模型中引入的属性。
					

Element.clientWidth 元素它内部的宽度只读

示例
- 元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。

# 示例
var h = element.clientWidth; // 返回整数, 单位像素
					

Element.id 获取或设置元素的ID

示例
- 在一个文档中,ID值必须是唯一的 getElementById 方法可以通过id值来找到对应的那个元素
						
var idStr = element.id;
element.id = idStr;
					

Element.innerHTML 设置或获取HTML语法表示的元素的后代

示例
- 文本包含字符 (&), (<),  或(>), innerHTML 将这些字符分别返回为&, < 和 > 。
	
var content = element.innerHTML; // 返回元素的HTML内容
element.innerHTML = 'html标签或文本';
					

Element.lastElementChild 返回元素的最后一个子元素只读

示例
// 返回元素内的最后一个子元素, 不存在返回null
var childNode = document.getElementById('para-01').lastElementChild;
					

Element.nextElementSibling IE9+ 返回该元素下一个兄弟节点只读

示例
- 该元素下一个兄弟节点, 如果为null表示不存在.

var nextNode = elementNodeReference.nextElementSibling;
					

Element.outerHTML 获取元素自身完整html字符串只读

示例
<div id="d">
    <p>Content</p>
    <p>Further Elaborated</p>
</div>

const d = document.getElementById("d");
console.log(d.outerHTML);

/*
    字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
    被显示到控制台窗口
*/
					

Element.previousElementSibling IE9+ 返回该元素上一个兄弟节点只读

示例
var prevNode = elementNodeReference.previousElementSibling;
					

Element.scrollHeight IE8+ 元素的滚动区域完整高度只读

示例
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;

# 判定元素是否滚动到底
element.scrollHeight - element.scrollTop === element.clientHeight // 如果元素滚动到底,返回true,没有则返回false.

监听onscroll事件,这个等式可以用来判定用户是否阅读过文本。(参考 element.scrollTop 和 element.clientHeight属性)。
					

Element.scrollLeft IE10+ 该元素横向滚动条距离最左的位移

示例
//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;

//设置滚动条滚动了多少像素
element.scrollLeft = 10;

如果元素不能滚动(比如:元素没有溢出),那么scrollLeft 的值是0。
如果给scrollLeft 设置的值小于0,那么scrollLeft 的值将变为0。
如果给scrollLeft 设置的值大于元素内容最大宽度,那么scrollLeft 的值将被设为元素最大宽度。
					

Element.scrollTop 元素的内容垂直滚动的像素数

示例
- 滚动条向下滚动, 顶部已滚动出去的高度 (已滚动出屏幕的高度, 不包含当前屏幕的高度).	
					
// 获得滚动的像素数
var  intElemScrollTop = someElement.scrollTop;

// 设置滚动的距离
element.scrollTop = intValue;

如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollTop将被设置为0。
设置scrollTop的值小于0,scrollTop 被设为0
如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.
					

Element.scrollWidth 元素的滚动视图宽度, 包含滚动条只读

示例
document.getElementById('aDiv').scrollWidth

Element.tagName 当前元素的标签名只读

示例
var span = document.getElementById("born");
alert(span.tagName);
					

Element 方法


Element.xxx IE10+ 元素类属性的集合只读

示例