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").οnclick= function () { alert("This is a test!"); }</span>