php用正则表达抓取网页中文章( 根据类名获取元素getByClassName(obj)判断对象是否有某个)
优采云 发布时间: 2022-02-04 16:08php用正则表达抓取网页中文章(
根据类名获取元素getByClassName(obj)判断对象是否有某个)
上一节我们通过jQuery实现了简单的网页定位导航,这一节使用JavaScript来实现。或许有人在想jQuery实现已经那么简便了怎么还要用JavaScript,但是作为一名合格的前端工程师,对底层的js也要有一定认识和掌握。
这一节我们需要使用的知识有,学会将经常使用到的方法进行封装,方便在实验中的调用,jQuery和js获取元素的不同实现方法,还有正则表达式的使用等等。现在就让我们进入正题。
网页的结构和表现CSS样式跟上一节的都一样,我们可以使用之前写过的代码,然后就是定位的实现。在jQuery中可以很快地利用选择器实现根据id或类名获取元素,移除元素,在js中我们可以对这些经常使用的方法进行封装。
根据类名获取元素 getByClassName(obj, cls)
function getByClassName(obj, cls) {
var elements = obj.getElementsByTagName("*");
var result = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == cls) {
result.push(elements[i]);
}
}
return result;
}
判断对象是否有某个类,这里使用正则表达式。不熟悉的朋友可以先回顾一下正则表达式的使用。hasClass(obj, cls)
function hasClass(obj,cls){
return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
}
从对象中删除一个类。删除(obj,cls)
function removeClass(obj,cls){
if(hasClass(obj,cls)){
var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");
obj.className=obj.className.replace(reg,"");
}
}
向对象添加一个类。addClass(obj, cls)
function addClass(obj,cls){
if(!hasClass(obj,cls)){
obj.className+=" "+cls;
}
}
然后实现页面加载和滚动条滚动时触发的事件。关于滚动条的滚动距离,这里有两种模式,混杂模式document.body.scrollTop和标准模式document.documentElement.scrollTop。同样,我们需要判断滚动条的滚动距离是否已经达到了每层楼到页面顶部的距离。如果是这样,将导航栏中的一些颜色变化的类样式添加到相应的项目中。这里我们是到页面顶部的距离。使用 offsetTop 属性获得。
<p>window.onload = function() {
window.onscroll = function() {
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var menus = document.getElementById("menu").getElementsByTagName("a");
var items = getByClassName(document.getElementById("content"), "item");
var currentId="";
for(var i=0;i_itemTop-200){
currentId=_item.id;
}
else{
break;
}/*jQuery是通过return false;跳出循环,在js中是通过break;或continue;跳出循环*/
}
if(currentId){
for(var j=0;j