Python 操作 DOM（待更）

Posted 2023-05-06

参考技术A xml.etree.ElementTree 模块实现了一个简单高效的API，用于解析和创建XML数据。

XML是一种固有的分层数据格式，最自然的表示方法是使用树。 ET ( xml.etree.ElementTree ) 有两个类： ElementTree 将整个XML文档表示为一个树， Element 表示该树中的单个节点。与整个文档的交互（读写文件）通常在 ElementTree 级别完成。与单个XML元素及其子元素的交互是在 Element 级别完成的。

可以通过从文件中读取来导入此数据：

或直接从字符串中解析：

fromstring() 将XML从字符串直接解析为 Element ，该元素是已解析树的根元素。其他解析函数可能会创建一个 ElementTree 。更多信息请查阅文档。

作为 Element ， root 具有标签和属性字典:

还有可以迭代的子节点：

子级是可以嵌套的，我们可以通过索引访问特定的子级节点：

Element 实例元素的长度是其子元素的数量。那意味着如果你要检查元素是否真的为空，则应同时检查它的长度和它的 text 属性。元素标签，属性名称和属性值可以是字节或字符串。

Element 是一个灵活的容器对象，旨在将分层数据结构存储在内存中。可以说是 list 和 dict 之间的交叉。每个元素都有许多与之关联的属性：

例如： <tag attrib>text<child/>...</tag>tail 。

要创建元素实例，请使用 Element 构造函数或 SubElement 工厂函数。您还可以使用 ElementTree 类包装元素结构，并将其与 XML 相互转换。

考虑到元素的可拓展性，最好使用 SubElement 工厂函数，来生成子元素。上面的子元素可以这样生成：

[ Day51 ]Python之路----JavaScript --DOM操作

JavaScript可以操作整个浏览器，但是这个浏览器对象比较大，因此为了操作方便，又分为三个对象。

1.BOM对象

BOM对象主要操作地址栏，浏览历史，窗口高度等。

2.DOM对象

DOM对象主要操作网页上的元素和相关元素的CSS样式。

3.Window对象

Window对象是浏览器的宿主对象，其提供的方法和属性和JavaScript没什么关系。

上面三个对象，我们主要学习的是DOM对象，通过DOM编程，可以轻易实现我们常见的一些效果。

Window对象

Window对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。
open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

 

Window常用属性

window.location

利用该属性的location的href属性可以完成简单的页面操作

window.location.href  获取URL
window.location.href="URL" 重定向
window.location.reload 重新加载

DOM对象

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

• 整个文档是一个文档节点(document对象)
• 每个 HTML 元素是元素节点(element 对象)
• HTML 元素内的文本是文本节点(text对象)
• 每个 HTML 属性是属性节点(attribute对象)
• 注释是注释节点(comment对象)

查找标签

document.getElementById                根据ID获取一个标签
document.getElementsByName         根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName    根据标签名获取标签合集

间接查找

parentNode  父节点
childNodes  所有子节点
firstChild  第一个子节点
lastChild  最后一个子节点
nextSibling 下一个兄弟节点
previousSibling  上一个兄弟节点
parentElement 父节点标签元素
children  所有子标签
firstElementChild  第一个子标签元素
lastElementChild  最后一个子标签元素
nextElementSibling  下一个兄弟标签元素
previousElementSibling  上一个兄弟标签元素

操作内容

innerText  文本
innerHTML  HTML内容
value  值

操作属性

attributes                       获取所有标签属性
setAttribute(key, value)  设置标签属性
getAttribute(key)           获取指定标签属性
removeAttribute(key)     删除属性

样式操作

操作class类

className  获取所有样式类名
classList.remove(cls)  删除指定类
classList.add(cls)  添加类

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击。