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

最新推荐文章于 2024-08-11 00:22:53 发布

newComerNewNewNew

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量5k

点赞数

分类专栏： JavaScript 文章标签：前端 dom

本文链接：https://blog.csdn.net/lxiaopfeng/article/details/52572221

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>