使用规范的方法访问页面元素

转载 2006年06月21日 21:27:00
        Firefox以及其他Gecko引擎的浏览器遇到的最常见的兼容性问题是IE DHTML和W3C DOM的区别。
不规范的DHTML脚本中最容易犯的一个错误就是使用不规范的方式来访问网页元素。我们曾经用spider爬一些国内著名门户网站,单从数量上看,95%以上的javascript错误都来自于此。

常见的访问网页元素的不规范方式有一下几种:

1. 直接用id或name属性名访问网页元素,例如:

<div id="icefable1">...</div>
<script language="javascript">
icefable1.style.width=0;
</script>

正确的做法是使用getElementById来得到某个有id属性的元素,用getElementsByName来得到某些有name属性的元素。例如上面的代码可以改成:

<div id="icefable1">...</div>
<script language="javascript">
document.getElementById("icefable1").style.width=0;
</script>


2. 在网页种加入相同id的网页元素。例如:

<td width="33%" class=tab-on id=navcell onmouseover=switchCell(0)><div align="center">重要提示</div></td>
<td width="33%" class=tab-off id=navcell onmouseover=switchCell(1)><div align="center">学术活动</div></td>
<td width="34%" class=tab-off id=navcell onmouseover=switchCell(2)><div align="center">交大热点</div></td>
...
<script language="javascript">
...
navcell[n].className="tab-on";
...
</script>

HTML标准中规定id在网页中必须是唯一的,如果你要一次访问一组元素,对于支持name属性的元素,你可以使用name属性,name可以是不唯一的。上面的例子可以改为:

<td width="33%" class=tab-on id="navcell1" onmouseover=switchCell(0)> <div align="center">重要提示</div></td>
<td width="33%" class=tab-off id="navcell2" onmouseover=switchCell(1)> <div align="center">学术活动</div></td>
<td width="34%" class=tab-off id="navcell3" onmouseover=switchCell(2)> <div align="center">交大热点</div></td>
...
<script language="javascript">
...
eval('document.getElementById("navcell'+n+'").className="tab-on"');
...
</script>

有人写了快一辈子DHTML了还搞不清楚id和name到底有什么区别,就是因为IE从来没有帮他们搞清楚过。你感谢IE的“兼容性”么?我不。
3. 使用all属性,如document.all,来访问网页元素。all属性是一个IE DHTML 专有的属性,可以通过如下方式来访问网页元素:

<HTMLelement>.all.<id或name>
<HTMLelement>.all("<id或name>")
<HTMLelement>.all["<id或name>"]

规范的做法是使用getElementById或getElementsByName

认识Javascript中的Document对象以及如何用三种方法访问元素对象

Document对象是客户端javascript中最常用的对象。 主要的方法: close():关闭由open()方法打开的文档 open():产生一个新文档,覆盖已有文档 write():把文本写入...
  • u010792238
  • u010792238
  • 2014年04月11日 14:15
  • 1753

我的servlet学习过程(四):JSP部分

JSP部分: 什么是jsp? jsp其实就是一个servlet,该servlet包含很多个对象,当浏览器请求一个jsp文件时,服务器会将该jsp文件翻译成servlet后使用out对象向浏览器输出  ...
  • linbiaorui
  • linbiaorui
  • 2016年09月11日 18:59
  • 297

访问vector元素方法的效率比较

相信会来看这篇博客的人,应该都认识vector了,所以我就直接上测试代码了,我是在vs2015中测试的:#include #include #include using namespace std;i...
  • qq_35644234
  • qq_35644234
  • 2017年03月11日 22:44
  • 1113

web元素定位及操作()

单个元素定位: #coding=utf-8 from selenium import webdriver dr=webdriver.Opera() '''找元素 2???、前端工具是什么?se...
  • qq_37032193
  • qq_37032193
  • 2016年12月13日 23:12
  • 251

页面元素居中的几种方法

1前言 做页面布局时,经常会需要将一些页面元素居中显示。当然,你可以设定元素的top、left来使它居中,但是,当父容器的大小发生变化,你不得不修改子元素的top、left来使它保持居中;当用户的显示...
  • lk103852503
  • lk103852503
  • 2014年09月05日 15:49
  • 2093

jquery、js调用iframe父窗口与子窗口元素的方法

1、在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...) js写法 a、同过cont...
  • zihuanzq_2014
  • zihuanzq_2014
  • 2016年11月13日 18:47
  • 1807

OpenCv2 学习笔记(6) Mat元素访问和效率比较

上一个学习笔记中对Mat进行了详细的介绍,并且简单介绍了Mat元素访问的3种基本方法,通过ptr行指针、data数据指针和at模板函数。本章以二维矩阵为例,对各种访问方式进行详细的介绍,并给出各种访问...
  • wanggao_1990
  • wanggao_1990
  • 2016年11月21日 21:38
  • 1801

H5页面属性和元素

H5常用页面属性与元素        大家都知道HTML5添加了很多新的属性和元素,那我们常常用到的有哪些呢?我为您整理了一下我们常用的元素,仅供参考,注意下面分类中并非全是新加入元素。 l   ...
  • xiaobozhu
  • xiaobozhu
  • 2015年12月16日 10:37
  • 3141

WebView获取当前网页的页面元素

今天简单总结一下,如何通过WebView来获取Html的页面元素。 第一步,首先用WebView加载一个Html页面 NSString *str=@"http://.........";UIWebVi...
  • wei78008023
  • wei78008023
  • 2016年03月13日 01:55
  • 1961

访问HTML中元素的方法

1、根据ID访问HTML元素 访问html元素 function getContent(){ ale...
  • u012868077
  • u012868077
  • 2016年06月06日 00:14
  • 595
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用规范的方法访问页面元素
举报原因:
原因补充:

(最多只允许输入30个字)