DOM：获取元素和获取设置属性
1、document对象的方法
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
<span style="font-size:12px;">function createNewDoc()
{
var newDoc=document.open("text/html","replace");
var txt="<html><body>Learning about the DOM is FUN!</body></html>";
newDoc.write(txt);
newDoc.close();
}</span>getElementById() 返回对拥有指定 id 的第一个对象的引用。getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
getElementsByName() 和getElementsByTagName() 中elements是复数，其结果返回的是一个数组。访问某一特定元素尽量用标准的getElementById()，访问标签用标准的getElementByTagName(),但 IE不支持getElementsByName()，所以就要避免使用getElementsByName()
getElementsByClassName() 查找带有相同类名的所有 HTML 元素,但是该方法在在 Internet Explorer 5,6,7,8 中无效。因此可以通过下面的方法获取。
获取class的方法：
<span style="font-size:12px;">var allPageTags = new Array();
function hideDivWithClasses(theClass) {
var allPageTags=document.getElementsByTagName_r("div");
//遍历页面中的所有标签
for (i=0; i<allPageTags.length; i++)
//找到我们需要改变的class
if (allPageTags[i].className==theClass) {
//改变这个class的样式
allPageTags[i].style.display="none";
}
}
}</span>
2、Element对象：
在 HTML DOM中，Element对象表示HTML元素。element.className 设置或返回元素的class属性。
element.tagName 返回元素的标签名。
nodelist.length 返回 NodeList 中的节点数。
setAttribute() 把指定属性设置或更改为指定值。
getAttribute() 返回元素节点的指定属性值。
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
element.innerHTML 设置或返回元素的内容。
document.getElementById("myAnchor").innerHTML="W3Schools";
展开对setAttribute()的介绍：
（1）改变样式：src;type;name;title;style;
<span style="font-size:12px;">var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss); //for firefox
input.setAttribute("className", bordercss); //for IE</span>输出时：<input type="text" name="q" class="bordercss">,即，input控件具有bordercss样式属性注意：class属性在W3C DOM中扮演着很重要的角色，但由于浏览器差异性仍然存在。
使用setAttribute("class", vName)语句动态设置Element的class属性在firefox中是行的通的，但在IE中却不行。因为使用IE内核的浏览器不认识"class"，要改用"className"；
同样，firefox 也不认识"className"。所以常用的方法是二者兼备
（2）改变方法：onclick
var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert("This is a test!");");
这里利用setAttribute指定e的onclick属性，简单，很好理解。
但是IE不支持，IE并不是不支持setAttribute这个函数，而是不支持用setAttribute设置某些属性，例如对象属性、集合属性、事件属性，也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。
<span style="font-size:12px;">document.getElementById("testbt").className = "bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f";
document.getElementById("testbt").onclick= function () { alert("This is a test!"); }</span>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： js获取字符串的字节长度
- 下一篇： 一看就懂系列之 如何实现与控制php常驻进程
