浏览器抓取网页(Javascript元素在网页上的确切位置教程总结了元素)

　　浏览器抓取网页(Javascript元素在网页上的确切位置教程总结了元素)

　　在创建网页的过程中，有时您需要知道某个元素在网页上的确切位置。

　　下面的教程总结了Javascript在网页定位方面的知识。

　　一、网页大小和浏览器窗口大小

　　首先，必须澄清两个基本概念。

　　一个网页的整个区域就是它的大小。通常，网页的大小由内容和 CSS 样式表决定。

　　浏览器窗口的大小是指在浏览器窗口中看到的网页区域的一部分，也称为视口。

　　显然，如果网页的内容可以在浏览器窗口中完全显示（即没有滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，滚动浏览器窗口可以显示网页的各个部分。

　　二、获取网页大小

　　网页上的每个元素都有 clientHeight 和 clientWidth 属性。这两个属性指的是元素的内容部分加上内边距所占据的可视区域，不包括边框和滚动条所占据的空间。

　　

　　（图一clientHeight和clientWidth属性）

　　因此，文档元素的clientHeight 和clientWidth 属性代表了网页的大小。

　　function getViewport(){

if (document.compatMode == "BackCompat"){

return {

width: document.body.clientWidth,

height: document.body.clientHeight

}

} else {

return {

width: document.documentElement.clientWidth,

height: document.documentElement.clientHeight

}

}

}

　　上面的getViewport函数可以返回浏览器窗口的高度和宽度。使用时要注意三个地方：

　　1）该函数必须在页面加载完毕后运行，否则还没有生成文档对象，浏览器会报错。

　　2）在大多数情况下，document.documentElement.clientWidth 返回正确的值。但是在IE6的quirks模式下，document.body.clientWidth返回正确的值，所以函数中加入了对document模式的判断。

　　3）clientWidth 和 clientHeight 是只读属性，不能赋值。

　　三、另一种获取页面大小的方法

　　网页上的每个元素也有scrollHeight和scrollWidth属性，它们指的是包括滚动条在内的元素的可视区域。

　　那么，document对象的scrollHeight和scrollWidth属性就是网页的大小，也就是滚动条滚动的所有长度和宽度。

　　在getViewport() 函数之后，可以编写getPagearea() 函数。

　　但是，此功能存在问题。如果网页的内容可以在浏览器窗口中完全显示而没有滚动条，那么网页的clientWidth和scrollWidth应该相等。但实际上不同的浏览器有不同的处理，这两个值不一定相等。因此，我们需要取其中较大的值，所以我们需要重写getPagearea()函数。

　　function getPagearea(){

if (document.compatMode == "BackCompat"){

return {

width: Math.max(document.body.scrollWidth,

document.body.clientWidth),

height: Math.max(document.body.scrollHeight,

document.body.clientHeight)

}

} else {

return {

width: Math.max(document.documentElement.scrollWidth,

document.documentElement.clientWidth),

height: Math.max(document.documentElement.scrollHeight,

document.documentElement.clientHeight)

}

}

}

　　四、获取网页元素的绝对位置

　　网页元素的绝对位置是指元素的左上角相对于整个网页的左上角的坐标。这个绝对位置只能通过计算得到。

　　首先，每个元素都有offsetTop和offsetLeft属性，表示元素左上角到父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值累加就可以得到元素的绝对坐标。

　　

　　（图2 offsetTop 和 offsetLeft 属性）

　　下面两个函数可以用来获取绝对位置的横坐标和纵坐标。

　　function getElementLeft(element){

var actualLeft = element.offsetLeft;

var current = element.offsetParent;

while (current !== null){

actualLeft += current.offsetLeft;

current = current.offsetParent;

}

return actualLeft;

}

function getElementTop(element){

var actualTop = element.offsetTop;

var current = element.offsetParent;

while (current !== null){

actualTop += current.offsetTop;

current = current.offsetParent;

}

return actualTop;

}

　　由于在表格和 iframe 中，offsetParent 对象不一定等于父容器，因此上述功能不适用于表格和 iframe 中的元素。

　　五、获取网页元素的相对位置

　　网页元素的相对位置，指的是该元素的左上角相对于浏览器窗口左上角的坐标。

　　有了绝对位置，就很容易得到相对位置，只要从页面滚动条的滚动距离中减去绝对坐标即可。滚动条的垂直距离是文档对象的 scrollTop 属性；滚动条的水平距离是文档对象的 scrollLeft 属性。

　　

　　（图 3 scrollTop 和 scrollLeft 属性）

　　相应地重写上一节中的两个函数：

　　function getElementViewLeft(element){

var actualLeft = element.offsetLeft;

var current = element.offsetParent;

while (current !== null){

actualLeft += current.offsetLeft;

current = current.offsetParent;

}

if (document.compatMode == "BackCompat"){

var elementScrollLeft=document.body.scrollLeft;

} else {

var elementScrollLeft=document.documentElement.scrollLeft; 

}

return actualLeft-elementScrollLeft;

}

function getElementViewTop(element){

var actualTop = element.offsetTop;

var current = element.offsetParent;

while (current !== null){

actualTop += current. offsetTop;

current = current.offsetParent;

}

if (document.compatMode == "BackCompat"){

var elementScrollTop=document.body.scrollTop;

} else {

var elementScrollTop=document.documentElement.scrollTop; 

}

return actualTop-elementScrollTop;

}

　　scrollTop 和 scrollLeft 属性是可赋值的，并且会立即自动将网页滚动到相应的位置，因此您可以使用它们来改变网页元素的相对位置。此外，element.scrollIntoView() 方法也有类似的效果，可以让网页元素出现在浏览器窗口的左上角。

　　六、快速获取元素位置的方法

　　除了上面的功能之外，还有一个快速的方法可以一次获取网页元素的位置。

　　那就是使用 getBoundingClientRect() 方法。它返回一个收录四个属性的对象，left、right、top、bottom，分别对应于元素的左上角和右下角相对于浏览器窗口（视口）左上角的距离。

　　所以，页面元素的相对位置是

　　var X= this.getBoundingClientRect().left;

var Y =this.getBoundingClientRect().top;

　　添加滚动距离以获得绝对位置

　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

　　目前，IE、Firefox 3.0+、Opera 9.5+ 支持此方法，Firefox 2.x、Safari、Chrome、Konqueror 不支持。