您的位置：首页 > Web前端

DOM：获取元素和获取设置属性

2016-09-18 10:33 274 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 dom

相关文章推荐

新的分享

章节导航