js实现网页自动化

不讲废话，直接主题

一、总览

二、元素获取

1、原生获取

2、jq获取

三、元素操作

$0 代表当前元素，下面给几个典型的例子，其他以此类推。

1、文本框

$0.value = "United States"

2、下拉框

$0.value = "United States"
$0.options[1].selected =true

四、事件触发

事件文档: https://developer.mozilla.org/en-us/docs/Web/API/Event/Event

1、直接触发

$0.click()

2、jq触发

$0.trigger("click");

3、原生触发

$0.dispatchEvent(new Event("click"))

IE使用

$0.fireEvent(new Event("click"))

五、demo

1、滑动

//滑块
function sendEvent(elem, event, clientX, clientY) {
    
    
    var mousemove = new MouseEvent(event,{
    
    
        bubbles: true,
        clientX: clientX,
        clientY: clientY,
    });
    elem.dispatchEvent(mousemove);
}

function dragandDrop(elem, distance) {
    
    
    var x = 0, interval;
    var rect = elem.getBoundingClientRect();
    var startx = Math.floor(rect.x + rect.width / 2);
    var starty = Math.floor(rect.y + rect.height / 2);
    sendEvent(elem, "mousedown", startx, starty);
    interval = setInterval(function() {
    
    
        x++;
        sendEvent(elem, "mousemove", startx + x, starty);
        if (x >= distance) {
    
    
            clearInterval(interval);
            sendEvent(elem, "mouseup", x, 0);
        }
    }, 10);
}

dragandDrop(document.getElementById("tcaptcha_drag_thumb"), 100)

2、内置frame操作

IE

document.frames[i].document.getElementById('元素的ID');
document.frames['iframe的name'].document.getElementById('元素的ID');
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')

其它

跨域frame 暂不知道如何操作

3 常用函数

function getElementLeft(element) {
    
    
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null) {
    
    
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}