DOM操作

IDEPY NEXT 支持基本的 DOM 操作、遍历和事件，可以自行查看相关的示例。

创建元素

element = window.dom.create_element('<div>new element</div>')  # 将新元素添加为 body 的最后一个子元素
element = window.dom.create_element('<h1>Warning</h1>', parent='#container', mode=ManipulationMode.FirstChild)  # 将新元素添加到 #containaer 中作为第一个子元素

操作模式可以是以下之一 LastChild、FirstChild、Before、After 或 Replace。默认值为 LastChild。

获取元素

element = window.dom.get_element('#element-id')  # 返回匹配的第一个 Element 或 None
elements = window.dom.get_elements('div')  # 返回一个包含匹配 Elements 的列表

元素的基本信息

element.id  # 返回元素的 id
element.classes  # 返回元素类名的类似列表的对象
element.style  # 返回元素样式的类似字典的对象
element.tabindex  # 返回元素的tab索引
element.tag  # 返回元素的标签名称
element.text  # 返回元素的文本内容
element.value  # 返回输入元素的值

某些元素属性可以设置或修改

element.id = 'new-id'
element.classes.add('green-text')  # 添加 .green-text 类
element.classes.remove('red-background')  # 移除 .red-background 类
element.classes.toggle('blue-border')  # 切换 .blue-border 类
element.style['width'] = '200px'
element.tabindex = 108
element.text = 'New content'
element.value = 'Luna'

操作元素

new_container = window.get_element('#new-container')
new_element = element.copy()  # 将元素复制为父元素的最后一个子元素
yet_another_element = new_element.copy(new_container, webview.dom.ManipulationMode.FirstChild, "new-id")  # 将元素复制到 #new-container 中作为第一个子元素
yet_another_element = yet_another_element.move('#new-container2')  # 将元素移动到 #new-container2 中作为最后一个子元素
yet_another_element.remove()  # 删除元素
new_container.empty()  # 清空 #new-container 的子元素
new_container.append('<span>kick-ass content</span>')  # 将新 DOM 追加到 #new-container 中

遍历

element.children  # 返回元素的子元素列表
element.next  # 返回 DOM 层次结构中的下一个元素或 None
element.parent  # 返回元素的父元素
element.previous  # 返回 DOM 层次结构中的上一个元素或 None

body、document 和 window 对象可以直接通过

window.dom.body
window