DOM（上）

news2024/10/5 19:14:16

DOM（文档对象模型）：处理可扩展标记语言(HTML或XML）的标准编程接口，可以改变网页的内容、结构和样式。
DOM树：（1）文档：一个页面就是一个文档，DOM中使用document表示（2）元素：页面中所有标签都是元素，DOM中使用element表示（3）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
获取元素：（1）根据ID获取：使用getElementById()方法获取带有ID的元素对象 ① 文档页面从上往下加载，所以先得有标签，因此script写在标签下面 ②参数 id是大小写敏感的字符串 ③返回的是一个元素对象 ④console.dir打印返回的元素对象更好的查看属性和方法（2）根据标签名获取：getElementsByTagName()方法返回带有指定标签名的对象的集合 ①返回的是获取过来元素对象的集合，以伪数组形式存储的 ②得到的是一个对象的集合，想要操作里面的元素需要遍历 ③得到的元素对象是动态 ④还可以获取某个元素（父元素）内部所有指定标签名的子元素（父元素必须是单个对象（必须指明是哪个元素对象），获取时不包括父元素自己语法： element.getElementsByTagName('标签名') ⑤如果页面中只有一个这个元素，返回的还是伪数组的形式；如果页面中没有这个元素，返回的是空的伪数组（3）通过HTMML5新增的方法获取 ①语法：document.getElementsByClassName('类名'); （根据类名返回元素对象的集合） ②语法：document.querySelector('选择器'); （根据指定选择器返回第一个元素对象，里面选择器要加引号，类选择器'.box'、id选择器'#box'、标签选择器'li'） ③语法：document.querySelectorAll('选择器'); （根据指定选择器返回所有元素对象集合）（4）获取特殊元素（body、html）： ①获取body元素：document.body; （返回body元素对象） ②获取html元素：document.documentElement; （返回htmll元素对象）
事件基础：（1）事件：触发--响应机制（2）事件三要素：事件源、事件类型、事件处理程序（3）事件源：事件被触发的对象，例如按钮（4）事件类型：如何触发，可以通过鼠标点击（onclick）、鼠标经过、键盘按下等（5）事件处理程序：通过一个函数赋值方式完成（6）执行事件的步骤： ①获取事件源=>注册事件（绑定事件）=>添加事件处理程序（采用函数赋值形式）（7）常见的鼠标事件：
操作元素：（1）改变元素内容： ①element.innerText：从起始位置到终止位置的内容，但它不识别html标签，同时空格和换行也会去除 ②element.innerHTML：起始位置到终止位置的全部内容，包括识别html标签，同时保留空格和换行（2）修改元素属性： element.属性=重新给值（属性：src、href、id、alt、title）（3）表单元素的属性操作：（属性：type、value、checked、selected、disabled）（4）样式属性操作： ①element.style.属性：行内样式属性 ②element.className：类名样式操作（className会直接更改元素类名，覆盖原先类名，因为行内样式权重较高）注：JS里面的样式采取驼峰命名法，如backgroundColor，JS修改style样式操作，产生的是行内样式的CSS权重比较高注：隐藏元素：display:none 显示元素：display:block 获得焦点：onfocus 失去焦点：onblur 注：表单里面的信息通过修改value得到改变