第一点：简单说明下，首先你要明白ie每个版本其实机制是不一样的，据我的经验简单来说越高的版本纠错率可能相对高一些，可以识别一些不符合w3c格式的代码。
第二点：简单解释下windowtop的问题。在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， 而
windowtop就是返回顶层窗口，即浏览器窗口。
（注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用。）
PS：我觉得这么说最容易解释你问的问题了，至于官方的说法百度都有。希望采纳
DOM的全称是Document Object Model，即文档对象模型，从名称来看也知道他的根节点肯定就是文档（Document）。DOM又分HTML DOM 和 XML DOM 两种，通常我们所说的是HTML DOM。下面是HTML DOM的树结构图，是不是很直观？
如果想去给这些并不是由你控制动态生成出来的元素绑定事件应该是不可能的。
但是可以给顶层的document绑定事件来判断点击的是哪个元素。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta >
1 通过顶层document节点获取：
（1）
documentgetElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是documentgetElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。
（2）documentgetElementsByName(elementName)：该方法是通过节点的
name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。
（3）documentgetElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：documentgetElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。
2、通过父节点获取：
（1）parentObjfirstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持
parentObjfirstChildfirstChildfirstChild的形式，如此就可以获得更深层次的节点。
（2）parentObjlastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。
在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObjfirstChildlastChildlastChild
（3）parentObjchildNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox20011上获取的是所有子节点即包括子节点的子节点。
（4）parentObjchildren：获取已知节点的直接子节点数组。注意：经测试，在IE7上，和childNodes效果一样，而Firefox20011不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
（5）parentObjgetElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObjgetElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取：
（1）neighbourNodepreviousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
（2）neighbourNodenextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
4、通过子节点获取：
（1）childNodeparentNode：获取已知节点的父节点。
获取页面中元素到文档区域document的横向 纵向坐标的两种方法及其比较
在js控制元素运动的过程中 对于页面元素坐标位置的获取是经常用到的 这里主要总结下两种方法
一 通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现
在阅读javascript高级程序设计第三版DOM部分时 了解到要获取某个元素在页面上的偏移量 需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加 一直循环直至根元素 所以 要得到元素到文档区域的坐标位置 只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element) {
var actualLeft = element offsetLeft
actualTop = element offsetTop
current = element offsetParent; // 取得元素的offsetParent
// 一直循环直到根元素
while (current !== null) {
actualLeft += current offsetLeft;
actualTop += current offsetTop;
current = current offsetParent;
}
// 返回包含left top坐标的对象
return {
left: actualLeft
top: actualTop
};
}
例子截图
firebug下测试结果截图 (注 其他浏览器已通过测试!)
二 通过 getBoundingClientRect() 方法实现
getBoundingClientRect方法用于获得页面中某个元素的左 上 右和下分别相对浏览器视窗window的位置 返回的是一个对象 该对象有四个属性 top left right bottom;该方法原本是IE Only的 但是FF +和Opera +已经支持了该方法 可以说在获得页面元素位置上效率有很大的提高 另外 该方法避免使用while循环 而是直接获取数值来实现 比第一种方法性能要好 特别是在复杂的页面上更为明显
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element){
var dc = document
rec = element getBoundingClientRect()
_x = rec left // 获取元素相对浏览器视窗window的左 上坐标
_y = rec top;
// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置
_x += dc documentElement scrollLeft || dc body scrollLeft;
_y += dc documentElement scrollTop || dc body scrollTop;
return {
left: _x
top: _y
};
}
经测试 该方法与第一种方法获取元素相对于document的坐标大小相同 对于IE低版本浏览器 存在一些差异
注意 记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!
lishixinzhi/Article/program/Java/JSP/201311/20207
以上就是关于麻烦解释：window.top.document.body.clientWidth这段代码的详细意思。解释好给予加分。全部的内容，包括:麻烦解释：window.top.document.body.clientWidth这段代码的详细意思。解释好给予加分。、JS问题 问下DOM树的最顶层一定是文档吗、Chrome扩展如何获取JS动态生成的网页元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）