一、获取DOM元素

以AB实验平台首页abtest.corp.kuaishou.com/#/experimen…的【新建实验】为例。

1. 元素面板选中DOM元素后使用$0。

$0

2. 使用document.getElementsByClassName()

document.getElementsByClassName('add-exp-btn')

3. 使用 ()、$$()、x()

$(".add-exp-btn")

$(".el-button[data-ks-test-id='新建实验']")

$(".el-button[class='el-button add-exp-btn el-button--primary']")

$$(".add-exp-btn")[0]

$x("/html/body/div[3]/main/div/div[2]/div[2]/button[2]")[0]

4. 使用复制JS路径得到document.querySelector()

document.querySelector("body > div.app-main > main > div \
                       > div.filters > div.create-test-btn-group \
                       > button.el-button.add-exp-btn.el-button--primary")
                       
document.querySelector(".add-exp-btn")

document.querySelector(".el-button[data-ks-test-id='新建实验']");

document.querySelectorAll(".add-exp-btn")[0]

5. 使用document.getElementsByTagName()

document.getElementsByTagName("button")[6]

二、删除DOM元素

以AB实验平台首页abtest.corp.kuaishou.com/#/experimen…的【新建实验】为例。

let ele = document.querySelector(".add-exp-btn")

ele.style.display = "none"  # 不展示

ele.parentElement.removeChild(ele)  # 移除

三、添加和修改DOM元素

以AB实验平台首页abtest.corp.kuaishou.com/#/experimen…的【新建实验】为例。

# 添加DOM元素
let tag = document.createElement("p");
let text = document.createTextNode("AB Test")
tag.appendChild(text);
let p = document.querySelector(".create-test-btn-group")
p.appendChild(tag)

# 修改DOM元素
tag.style.color = "red"