JS[Dom操作]

mac2025-03-05  15

Dom(Document Object Model) W3C推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。通过Dom接口可改变网页的内容,结构,样式。 文档:document,一个页面就是一个文档 元素:页面中所有标签,element 节点:node,页面中所有内容(文本,标签,属性,注释) Dom把以上内容都看为对象,以上内容组成Dom树 获取元素 ID(document.getElementById()) 标签名(document.getElementsByTagName())获得一个元素集合,是一个伪数组,需要通过遍历的方法操作其中的每个元素。 HTML5新增方法(document.getElementsByClassName(‘类名’),document.querySelector(‘选择器’)返回获取到的第一个元素,document.querySelectorAll(‘选择器’)根据选择器返回)特殊元素(body,html)document.body(),document.documentElement 事件 三部分:事件源,事件类型,事件处理程序 执行事件步骤 获取事件源,绑定事件(注册事件),添加事件处理程序 操作元素 1.修改元素内容:innerText,innerHTML; inneText:去除html标签,空格,换行 innerHTML:保留html标签,空格,换行 2.修改元素属性:src,href,id,alt,title;element.属性名 3.表单元素的操作属性:type,value,checked,selected,disabled。 表单元素的内容需要改变value,改变innerText和innerHTML 不能改变表单元素的内容。 4.改变元素的样式属性(元素的大小,颜色,位置):element.style.样式名(行内样式,权重较高,适用于样式修改少) element.className(类名样式操作,适用于样式修改较多,注意操作时会覆盖原来的类名)

最新回复(0)