1.什么是JavaScript及简单编写JS代码

前端工程师学的编程语言（HTML，CSS，JavaScript，Vue）

JavaScript 负责页面的动作，跳转等动态化的效果

Vue不是编程语言，只是JavaScript的一种框架而已

为什么前端开发要学JavaScript，因为所有的浏览器都内置安装了JavaScript的运行环境

下面我们来看一下如何编写简单的JS代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>py44</title>
</head>
<body>
<!--    标题-->
<h2>hello</h2>
<form><!--    下拉框--><select name="myselect"><option>选项1</option><option>选项2</option><option>选项3</option></select>
</form>
<!--js脚本-->
<script>alert('hello!')// 相当于python中的printconsole.log('hello!')// 定义变量var name = 'Mara'console.log(name)let lastname = 'wang'console.log(lastname)// iflet age = 18if (age >= 10) {console.log('已成年')} else {console.log('未成年')}// 函数function run() {console.log('run')}run()
</script>
</body>
</html>

运行结果：

在网页是看不到JS代码输出的内容，要按F12，在console下查看输出内容

一门编程语言的东西还是很多的，也没有那么容易学会的，具体的可以参考各种网站上学习 JavaScript 实例 | 菜鸟教程

2.DOM对象

DOM是文档对象模型

HTML这些标签归根结底就是字符串，不方便被程序访问和控制，因此浏览器通过DOM这种方式把文档转化成了对象，方便程序进行访问。

现在我们通过F12打开浏览器的控制台，对打开的网页进行一些简单的DOM操作。在控制台当中输入document，浏览器当中将会显示整个HTML标签内容，输入document.body显示打开页面的整个body标签。

这样通过DOM面向对象的编程方式能非常方便的获取到想要的元素，也能非常方便的执行浏览器操作。

document 是DOM对象下面的一个东西，document 不能直接说就是DOM

具体操作如下：

总结：DOM就是通过JS控制浏览器当中的页面行为

3.BOM对象

BOM是浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等

BOM和DOM的主要区别：

BOM的最根本对象是window，BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹等这些涉及到的对象就是BOM
DOM最根本对象是document（实际上是window.document）DOM和文档有关，这里的文档指的是网页，也就是HTML文档。网页是由服务器发送给客户端浏览器的，无论用什么浏览器，接收到的HTML都是一样的，所以DOM和浏览器无关

接着我们就要用python代码中的selenium来控制JS来进行页面操作

4.打开新窗口

import timefrom selenium.webdriver import Chromeclass TestJs:def testjs(self):with Chrome() as browser:browser.implicitly_wait(5)# selenium发送JS（window.open()）代码给浏览器操作browser.execute_script("window.open()")time.sleep(5)

运行结果：

5.窗口滚动

具体代码如下：

import timefrom selenium.webdriver import Chromeclass TestJs:def testjs(self):with Chrome() as browser:browser.implicitly_wait(5)browser.get('https://readhub.cn/topics')js = 'window.scrollTo(0,document.body.scrollHeight)'browser.execute_script(js)time.sleep(5)

还有一种页面是整个窗口有个滚动条，页面里边列表也有滚动条，如下图：

先定位列表整个元素，然后控制页面中列表进行滚动

代码具体如下：

import timefrom selenium.webdriver import Chromeclass TestJs:def testjs(self):with Chrome() as browser:browser.implicitly_wait(5)browser.maximize_window()browser.get('https://drafts.csswg.org/cssom-view/#common-infrastructure')js = 'document.getElementById("toc").scrollTo(0,document.body.scrollHeight)'browser.execute_script(js)time.sleep(5)

如果想滚动1/2那就这么写：scrollTo(0,document.body.scrollHeight/2)

如果想滚动1/4那就这么写：scrollTo(0,document.body.scrollHeight/4)

6.修改元素状态

如下图，要修改12306页面当中的出发日期

具体代码如下：

第一种方法：所有的定位元素，修改值都通过js代码编写

import timefrom selenium.webdriver import Chromeclass TestJs:def testjs(self):with Chrome() as browser:browser.implicitly_wait(5)browser.maximize_window()browser.get('https://www.12306.cn/index/')# js代码单行编写# js = 'el = document.getElementById("train_date");el.value="2021-12-16"'# js代码单行编写js = '''el = document.getElementById("train_date")el.value="2021-12-16'''browser.execute_script(js)time.sleep(5)

第二种方法：使用selenium定位元素，通过js代码修改值

import timefrom selenium.webdriver import Chromeclass TestJs:def testjs(self):with Chrome() as browser:browser.implicitly_wait(5)browser.maximize_window()browser.get('https://www.12306.cn/index/')el = browser.find_element('id', 'train_date')# arguments[0]表示一个占坑符js = 'arguments[0].value="2021-12-16"'# execute_script后面可以跟多个参数，只要对应的索引号正确即可browser.execute_script(js, el, el, el)time.sleep(5)

7.文件上传

input类型，直接使用send_key()

import timefrom selenium.webdriver import Chromeclass TestJs:def testjs(self):with Chrome() as browser:browser.implicitly_wait(5)browser.maximize_window()browser.get('file:///E:/lemon/lianxi/day33_selenuim/demo.html')el = browser.find_element('name', 'file')el.send_keys(r'E:\lemon\lianxi\day33_selenuim\2.png')time.sleep(5)

js类型：需要用到系统原生的组件，所有的拖动上传都会有一个隐藏的input标签，如果无法定位，先通过js修改，再定位

import timefrom selenium.webdriver import Chromeclass TestJs:def testjs(self):with Chrome() as browser:browser.implicitly_wait(5)browser.maximize_window()browser.get('https://image.baidu.com/')# querySelector是查看CSS方式定位元素js = '''el = document.querySelector('input[type="file"]');el.style='';'''browser.execute_script(js)element = browser.find_element('xpath', '//input[@type="file"]')element.send_keys(r'E:\lemon\lianxi\day33_selenuim\2.png')time.sleep(5)

通过系统打开框上传文件

windoss平台--pywinauto
跨平台（所有系统都可以）-- pyautoui

pywinauto：

安装这个第三方库时，要注意安装0.6.x以后的版本，因为这个版本之前的没有Desktop模块

pip install pywinauto==0.6.8

注意：le.click()限制比较多，只能点击a标签，button标签等，容易出错，所以尽量换一种写法

ActionChains(browser).click(el).perform()

import time
from selenium.webdriver import Chrome, ActionChains
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as when
from selenium.webdriver.support.wait import WebDriverWait
from pywinauto import Desktopclass TestJs:def testjs(self):with Chrome() as browser:browser.maximize_window()browser.get('https://image.baidu.com/')el = browser.find_element(By.CSS_SELECTOR, '.st_camera_off')ActionChains(browser).click(el).perform()wait = WebDriverWait(browser, timeout=10)condition = when.element_to_be_clickable((By.CSS_SELECTOR, '#uploadImg'))file_btn = wait.until(condition)ActionChains(browser).click(file_btn).perform()app = Desktop()  # 桌面dialog = app['打开']  # 根据名字找到弹出窗口dialog['Edit'].type_keys(r'E:\lemon\lianxi\day33_selenuim\2.png')dialog['Button'].click()time.sleep(3)

pyautogui：

安装这个第三方库时，我的python是3.8版本，老是安装不上，经查确定需要先安装PyGetWindow再安装pyautogui

pip install PyGetWindow==0.0.1

pip install pyautoui

import time
from selenium.webdriver import Chrome, ActionChains
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as when
from selenium.webdriver.support.wait import WebDriverWait
import pyautoguiclass TestDemo:def testdemo(self):with Chrome() as browser:browser.maximize_window()browser.get('https://image.baidu.com/')el = browser.find_element(By.XPATH, ' //img[@class="st_camera_off"]')ActionChains(browser).click(el).perform()wait = WebDriverWait(browser, timeout=10)condition = when.element_to_be_clickable((By.XPATH, '//a[@id="uploadImg"]'))file_btn = wait.until(condition)ActionChains(browser).click(file_btn).perform()time.sleep(1)  # 一定要有这步，不然出现用例通过，但打开选择文件窗口后定住的问题pyautogui.write(r'E:\lemon\lianxi\day33_selenuim\2.png')pyautogui.press('enter', 2)time.sleep(3)

web页面-JS/DOM/BOM/窗口滚动/修改内容/上传文件相关推荐

如何修改Kestrel上传文件的大小
作为.NET程序员我们都清楚如何修改.NET Web程序上传文件的大小,但是我最近在做.NET Core 项目的时候发现我不清楚如何修改Kestrel上传文件的大小,经过翻阅微软官方文档我成功实现了修 ...
如何修改WebUpload上传文件默认调用系统相机，而不是手机相册？
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
java怎么上传文件到web服务器_Java客户端通过Http发送POST请求上传文件到web服务器...
http://www.cnblogs.com/WilliamJiang/archive/2012/04/29/2475883.html 1.朋友的一个需求,让我给他实现,需求是这样的,需要用ASP.n ...
php上传文件大小读取,怎么修改php上传文件的大小限制？
修改php上传文件大小限制的方法:首先打开php.ini配置文件:然后分别查找并修改"post_max_size"项."upload_max_filesize" ...
修改IIS6上传文件限制，下载附件大小限制
默认情况下,在IIS 6 全局配置中允许上传的文件长度最大为4 GB,但是在Web站点级却限制了ASP应用程序上传的最大文件长度为200 KB.如果你需要上传超过200KB的文件,则需要手动修改IIS ...
修改PHP上传文件的大小限制
Warning: POST Content-Length of 35052172 bytes exceeds the limit of 8388608 bytes in Unknown on line ...
js 监听复制图片拖拽上传文件并填充到markdown编辑器
文章目录效果获取粘贴的文件获取拖拽的文件发送请求生成markdown 语句实现逻辑代码(主要实现) 后端代码效果获取粘贴的文件 const { clipboardData } = e; ...
[js]uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了
引言最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
修改phpmyadmin上传文件大小限制
phpmyadmin导入SQL文件时涉及到phpmyadmin上传文件大小限制问题,默认phpmyadmin上传文件大小为2M,如果想要phpmyadmin上传超过2M大文件,就需要修改phpmyad ...
Web页面右下角弹出窗口示例代码
Web页面右下角弹出窗口示例代码声明:本代码来源于CSDN论坛,原帖为http://community.csdn.net/Expert/TopicView3.asp?id=5239784 版权归原作 ...

web页面-JS/DOM/BOM/窗口滚动/修改内容/上传文件