032、javascrip 操作元素 03、Javascript 定位元素的几种方式(Id、Name、TagName、ClassName)

 

一、Javascript 定位元素的几种方式

　　1、通过id获取
　　document.getElementById(“id”)----------获取的是单个

　　2、通过name获取
　　document.getElementsByName(“Name”)[0]---------获取的是多个
　　返回的是list

　　3、通过标签名选取元素
　　document.getElementsByTagName(“tag”) --------获取的是多个

　　4、通过CLASS类选取元素
　　document.getElementsByClassName(“class”) --------获取的是多个
　　兼容性：IE8及其以下版本的浏览器未实现getElementsByClassName方法

　　5、通过CSS选择器选取元素
　　document.querySelector (“css selector”) --------获取的是单个
　　document.querySelectorAll(“css selector") --------获取的是多个
　　兼容性：IE8及其以下版本的浏览器只支持CSS2标准的选择器语法

 

1、document.getElementById(“id”)----------获取的是单个

示例 document.getElementById("birth_day").removeAttribute("readonly");

 

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("http://49.235.92.12:8200/users/login/")
time.sleep(3)

# 先登陆
driver.find_element_by_id("username").send_keys("112233456@qq.com")
driver.find_element_by_id("password_l").send_keys("123456")
driver.find_element_by_id("jsLoginBtn").click()

# 鼠标悬停
mouse = driver.find_element_by_class_name("personal")
ActionChains(driver).move_to_element(mouse).perform()
time.sleep(4)
driver.find_element_by_class_name("personcenter").click()
time.sleep(2)

# 场景二、输入框不可输入， readonly="readonly"
# js去掉readonly属性
js = 'document.getElementById("birth_day").removeAttribute("readonly");'
driver.execute_script(js)
# 正常input输入
driver.find_element_by_id("birth_day").clear()
driver.find_element_by_id("birth_day").send_keys("2020-11-10")

time.sleep(3)
driver.quit()

 

2、document.getElementsByName(“Name”)[0]---------获取的是多个

示例 document.getElementsByName("birthday")[0].removeAttribute("readonly");

 

3、class属性定位document.getElementsByClassName(“class”) --------获取的是多个

示例(前面聚集元素有讲到) document.getElementsByClassName("more")[1].scrollIntoView();