Scripting Document 笔记(2)
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 image = document.getElementById("myimage");
var imgurl = image.src;
image.id === "myimage"
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 image = document.images[0];
var width = parseInt(image.getAttribute("WIDTH"));
image.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 <head>
var s = document.createElement("script"); // Create a <script> element
s.src = url; // Set its src attribute
head.appendChild(s); // Insert the <script> into head
}
5.4.1 创建节点
如上可以通过Document对象的createElement()方法创建Element节点, 该方法接收需要创建元素的tag名字作为参数. Text节点的创建使用createTextNode()方法, 如:
var newnode = document.createTextNode("text node content");
Document也定义了其他工厂方法, 如: createComment(), createDocumentFragment()等.
另一种创建文档节点的方法是克隆一个存在的节点, 每个节点有一个cloneNode()方法，其返回存在节点的拷贝副本, 如果传入参数true, 则嵌套地复制所有子孙, 传入false返回一个浅拷贝.
5.4.2 插入节点
一旦创建了一个新节点, 就可以使用Node的方法appendChild()或者insertBefore()方法将它插入文档中, appendChild()是在需要插入的Element节点上调用, 它插入指定的节点使其成为那个节点的最后一个子节点.
insertBefore()类似appendChild(), 但是insertBefore()有两个参数, 第一个参数是要插入的节点, 第二个参数是已存在的节点, 新插入节点位于节点前面. 这个方法在新插入节点的父节点上调用, 第二个参数必须是父节点的孩子节点. 如果第二个参数是null, 跟appendChild()表现一样. 如下是appendChild()和insertBefore()的使用例子:
// Insert the child node into parent so that it becomes child node n
function insertAt(parent, child, n) {
if (n < 0 || n > parent.childNodes.length)
throw new Error("invalid index");
else if (n == parent.childNodes.length)
parent.appendChild(child);
else
parent.insertBefore(child, parent.childNodes[n]);
}
如果使用appendChild()和insertBefore()插入一个已经存在的节点, 那个节点将自动从当前位置移除, 并插入到新的位置, 但是没有必要显式的移除节点. 下面的例子并没有创建新的节点, 但是使用appendChild()改变现有节点的顺序.
// Sort the rows in first <tbody> of the specified table according to
// the value of nth cell within each row. Use the comparator function
// if one is specified. Otherwise, compare the values alphabetically.
function sortrows(table, n, comparator) {
var tbody = table.tBodies[0]; // First <tbody>; may be implicitly created
var rows = tbody.getElementsByTagName("tr"); // All rows in the tbody
rows = Array.prototype.slice.call(rows,0); // Snapshot in a true array
// Now sort the rows based on the text in the nth <td> element
rows.sort(function(row1,row2) {
var cell1 = row1.getElementsByTagName("td")[n]; // Get nth cell
var cell2 = row2.getElementsByTagName("td")[n]; // of both rows
var val1 = cell1.textContent || cell1.innerText; // Get text content
var val2 = cell2.textContent || cell2.innerText; // of the two cells
if (comparator)
return comparator(val1, val2); // Compare them!
if (val1 < val2)
return -1;
else if (val1 > val2)
return 1;
else
return 0;
});
// Now append the rows into the tbody in their sorted order.
// This automatically moves them from their current location, so there
// is no need to remove them first. If the <tbody> contains any
// nodes other than <tr> elements, those nodes will float to the top.
for(var i = 0; i < rows.length; i++)
tbody.appendChild(rows[i]);
}
// Find the <th> elements of the table (assuming there is only one row of them)
// and make them clickable so that clicking on a column header sorts
// by that column.
function makeSortable(table) {
var headers = table.getElementsByTagName("th");
for(var i = 0; i < headers.length; i++) {
(function(n) { // Nested funtion to create a local scope
headers[i].onclick = function() { sortrows(table, n); };
}(i)); // Assign value of i to the local variable n
}
}
5.4.3 删除和替换节点
removeChild()方法从文档树中删除一个节点, 但将要删除的节点不会调用removeChild(), 而是要删除的节点的父节点调用removeChild()方法, 在删除节点的父节点调用该方法, 而要删除的节点作为参数传递给removeChild()方法. 如:
n.parentNode.removeChild(n);
replaceChild()方法首先删除一个孩子节点然后用心的节点替换它, 这个方法也是被父节点调用, 新节点作为第一个参数, 被替换的节点作为第二个参数. replaceChild()的使用参考如下例子:
// Replace the node n with a new <b> element and make n a child of that element.
function embolden(n) {
// If we're passed a string instead of a node, treat it as an element id
if (typeof n == "string")
n = document.getElementById(n);
var parent = n.parentNode; // Get the parent of n
var b = document.createElement("b"); // Create a <b> element
parent.replaceChild(b, n); // Replace n with the <b> element
b.appendChild(n); // Make n a child of the <b> element
}
5.4.4 使用DocumentFragments
DocumentFragments是一特殊的Node，它作为其他节点的一个临时容器, 通过如下创建一个DocumentFragments:
var frag = document.createDocumentFragment();
像Document节点, DocumentFragments是独立的, 不作为其他文档的一部分, 它的父节点总是为null. 然而, 跟Element一样, DocumentFragments可以有任何数量的孩子, 而且可以appendChild(), insertBefore()等来操作. DocumentFragments的特殊之处在于它使得一组节点被当做一个节点看待, 如果给appendChild(), insertBefore()或replaceChild()传递一个DocumentFragments，其实是将该文档片段的所有子节点插入到文档中, 而非片段本身. 下面是一个使用DocumentFragments来反转孩子节点的顺序的例子:
// Reverse the order of the children of Node n
function reverse(n) {
// Create an empty DocumentFragment as a temporary container
var f = document.createDocumentFragment();
// Now loop backward through the children, moving each one to the fragment.
// The last child of n becomes the first child of f, and vice-versa.
// Note that appending a child to f automatically removes it from n.
while(n.lastChild)
f.appendChild(n.lastChild);
// Finally, move the children of f all at once back to n, all at once.
n.appendChild(f);
}