4. 属性(Attribues)
HTML元素由tag name和称为属性的name/value对集合组成.
4.1 HTML属性作为Element属性
表示HTML文档属性的HTMLElement对象定义了read/write属性, 它们映射了元素的HTML属性.HTMLElement定义了通用的HTTP属性(如: id, title lang和dir, 时间处理器onclick)属性.特定的Element子类型为其元素定义了特定的属性.
var p_w_picpath = document.getElementById("myp_w_picpath");
var imgurl = p_w_picpath.src;
p_w_picpath.id === "myp_w_picpath"
var f = document.forms[0];
f.action = "http://www.example.com/submit.php";
f.method = "POST";
需要注意的是HTML属性是大小写不敏感的, 但Javacript的属性是大小写敏感的. 如果要转换一个属性为Javascript的属性, 需将其小写.
4.2 获取和设置非HTML属性
HTMLElement及子类型定义了对应HTML元素的标准属性的属性, Element类型也定义了用来查找和设置非标准HTML属性以及XML文档属性的方法: getAttribute()和setAttribute(). 如:
var p_w_picpath = document.p_w_picpaths[0];
var width = parseInt(p_w_picpath.getAttribute("WIDTH"));
p_w_picpath.setAttribute("class", "thumbnail");
上述代码描述了这些方法和基于属性的API的显著区别:
所有属性值作为字符串, getAttribute()不会返回数值, boolean和对象.
这些方法使用标准属性名字, 即使那些属性名字是Javascript保留的关键字.
Element也定义了两个相关的方法: hasAttribute()和removeAttribute(), 它们用来检查给定属性是否存在和删除属性.
4.3 作为Attr节点的属性
还有一种使用Element的属性的方法, Node类型定义了attributes属性, 对于非Element对象的任何节点, 该属性为null. 对于Element对象, attributes是只读类数组对象, 表示元素的所有属性. 像Nodelist一样, attributes也是实时的, 它是可以用数字索引访问和属性名索引. 如:
document.body.attributes[0] document.body.attributes.bgcolor document.body.attributes["ONLOAD"]
当索引attributes对象获得的值是Attr对象, Attr对象是一种特殊的Node, 但不会像Node一样使用, Attr的name和value属性返回该属性的名字和值.
5. 元素内容
5.1 作为HTML的元素内容
读取Element的innerHTML属性作为字符串标记返回那个元素的内容, 在元素上设置该属性了Web浏览器的解析器, 用新字符串内容的解析展现形式替换元素当前内容. HTML5标准化了innerHTML，HTML5说innerHTML在Document节点和Element节点上工作正常, 但目前未普遍支持. HTML5还标准化了outerHTML, 当查询outerHTML时, 返回的HTML或XML标记的字符串包含了被查询元素的开头和结尾标签, 当设置元素的outerHTML时, 元素本身被新的内容替换. 只有Element节点定义了outerHTML属性, Document则没有.
5.2 作为纯文本的元素内容
有时需要查找纯文本形式的元素内容, 或者在文档中插入纯文本, 标准的方法是用Node的textContent属性来实现. 如:
var para = document.getElementsByTagName("p")[0];
var text = para.textContent;
para.textContent = "Hello World!";
textContent在除了IE的所有浏览器中都支持, 在IE中, 用Element的innerText属性来代替. textContent和innerText属性非常相似, 可以互相替换使用, 但需注意空元素和未定义属性之间的区别:
/**
* With one argument, return the textContent or innerText of the element.
* With two arguments, set the textContent or innerText of element to value.
*/
function textContent(element, value) {
var content = element.textContent; // Check if textContent is defined
if (value === undefined) { // No value passed, so return current text
if (content !== undefined) return content;
else return element.innerText;
}
else { // A value was passed, so set text
if (content !== undefined) element.textContent = value;
else element.innerText = value;
}
}
5.3 作为Text节点的元素内容
另一种处理元素内容的方法是作为子节点的列表, 每个子节点可能有它自己的一组子节点, 当考虑元素的内容时, 通常是它的Text节点. 下面的例子给出了查找元素的后代节点中的所有Text节点.
// Return the plain-text content of element e, recursing into child elements.
// This method works like the textContent property
function textContent(e) {
var child, type, s = ""; // s holds the text of all children
for(child = e.firstChild; child != null; child = child.nextSibling) {
type = child.nodeType;
if (type === 3 || type === 4) // Text and CDATASection nodes
s += child.nodeValue;
else if (type === 1) // Recurse for Element nodes
s += textContent(child);
}
return s;
}
nodeValue属性可以读/写, 设置它可以改变Text或CDATASection节点所显示的内容.Text和CDATASection都是CharacterData的子类型, CharacterData定义了data属性, 它和nodeValue的文本相同. 一下函数通过设置data属性将Text节点的内容转化成大写形式:
// Recursively convert all Text node descendants of n to uppercase.
function upcase(n) {
if (n.nodeType == 3 || n.nodeTyep == 4) // If n is Text or CDATA
n.data = n.data.toUpperCase(); // ...convert content to uppercase.
else // Otherwise, recurse on child nodes
for(var i = 0; i < n.childNodes.length; i++)
upcase(n.childNodes[i]);
}
5.4 创建, 插入和删除节点
Document类型定义了创建Element和Text对象的方法, Node类型定义了在节点树中插入, 删除和替换的方法. 如下是节点创建,插入的例子:
// Asynchronously load and execute a script from a specified URL
function loadasync(url) {
var head = document.getElementsByTagName("head")[0]; // Find document
var s = document.createElement("script"); // Create a