DOM

用户9903177222612
80 阅读6分钟

一.DOM简介

1.1什么是DOM

  • 文档对象模型（Document Object Model,简称DOM）,是3C组织推荐的处理可扩展标记语言（html或者xml）的标准编程接口
  • W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式

1.2DOM树

图片.png

  • 文档：一个页面就是一个文档。DOM中使用document表示
  • 元素：页面中的所有标签都是元素，DOM中使用element表示
  • 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示
  • DOM把以上内容都看做是对象

二.获取元素

2.1如何获取页面元素

获取页面中的元素可以使用以下几种方式：

  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取
  • 特殊元素获取

2.2根据ID获取

使用getElementByld（）方法可以获取带有ID的元素对象

图片.png 图片.png

2.3获取标签名获取

使用getElementsByTagName（）方法可以返回带有指定标签名的对象的集合 图片.png

图片.png

2.4通过HTML5新增的方法获取

图片.png

图片.png

图片.png

2.5获取特殊元素（body，html）

  • 获取body元素

图片.png

  • 获取html元素

图片.png

图片.png

三.事件基础

3.1事件概述

  • JS使我们有能力创建动态页面，而事件可以被JS侦测到的行为
  • 简单理解：触发--响应机制
  • 网页中的每个元素都可以产生某些可以触发JS的事件，例如，我们可以在用户点击某按钮使产生一个事件，然后去执行某些操作

图片.png

3.2执行事件的步骤

  1. 获取事件源
  2. 注册事件（绑定事件）
  3. 添加事件处理程序（采取函数赋值形式）

图片.png

3.3常见的鼠标事件

图片.png

3.4分析事件三要素

  • 下拉菜单三要素
  • 关闭广告三要素

四.操作元素

JS的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容，属性等。注意以下都是属性

4.1改变元素内容

图片.png 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

  1. 第一种 图片.png
  2. 第二种 图片.png

图片.png 图片.png 起始位置到终止位置的全部内容，包括html标签（用的比较多），同时保留空格和换行

  • 区别

图片.png

4.2常用元素的属性操作

图片.png

图片.png

4.3表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

图片.png

4.4样式属性操作

我们可以通过JS修改元素的大小，颜色，位置等样式

图片.png

  • 注意：
  1. JS里面的样式采取驼峰命名法，比如fontSize。。。
  2. JS修改style样式操作，产生的是行内样式，css权重比较高 图片.png

总结

图片.png

4.5排他思想

图片.png

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

  1. 所有元素全部清除样式（干掉其他人）
  2. 给当前元素设置样式（留下自己）
  3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

4.6自定义属性的操作

  • 获取属性值
  1. elemebt.属性 -- 获取属性值
  2. element.getAttribute('属性')
  • 区别
  1. element.属性----获取内置属性值（元素本身自带的属性）
  2. element.getAttribute（'属性'）；主要获得自定义的属性（标准）我们程序员自定义的属性
  • 设置属性值
  1. element.属性='值'---设置内置属性值
  2. element.setAttribute('属性'，'值')
  • 移除属性
  1. elemen.removeAttribute('属性')

图片.png

4.7H5自定义属性

自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

图片.png

  1. 设置H5自定义属性 H5规定自定义属性data开头做为属性名并且赋值 比如：

图片.png 2. 获取H5自定义属性

图片.png 图片.png

五.节点操作

5.1为什么学节点操作

  • 获取元素通常使用两种方式：

图片.png

  • 这两种方式都可以获取元素节点，后面都会使用，但是节点操作更简单

5.2节点概述

一般地，节点至少拥有node Type(节点类型)，nodeName（节点名称）和nodeValue（节点值）这三个基本属性

  • 元素节点 nodeType 为1
  • 属性节点 nodeType 为2
  • 文本节点 nodeType为3（文本节点包含文字，空格，换行等）
  • 我们在实际开发中，节点操作主要操作的是元素节点

5.3节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

图片.png

  1. 父级节点

图片.png

  • parentNode属性可返回某节点的父节点，注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回null 图片.png
  1. 子节点

方法一 图片.png 方法二

图片.png

图片.png

图片.png

图片.png

图片.png 3. 兄弟节点

图片.png

图片.png

图片.png

5.4创建节点

图片.png

  • document.createElement('tagName')方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

5.5添加节点

图片.png

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

图片.png

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素

图片.png

5.6删除节点

图片.png

  • node.removeChild()方法从DOM中删除一个子节点，返回删除的节点

图片.png

5.7复制节点（克隆节点）

图片.png

  • node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

  • 注意：

  1. 如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
  2. 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面的所有的子节点

图片.png

5.8三种动态创建元素区别

  • document.write()
  • element.innerHTML
  • document.createElement()
  • 区别

  1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

  2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

  3. innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

  4. createElement()创建多个元素效率稍微低一点点，但是结构更清晰

  5. 总结：不同浏览器下，innerHTML效率要比creatElement高 图片.png

图片.png

六.DOM重点核心

图片.png

  • 关于dom操作，我们主要针对于元素的操作。主要有创建，增，删，改，查，属性操作，事件操作

6.1创建

  • document.write
  • innerHTML
  • createElement

6.2增

  • appendChild
  • insertBefore

6.3删

  • removeChild

6.4改

主要修改dom的元素属性，dom元素的内容，属性，表单的值等

  • 修改元素属性：src，href，title等
  • 修改普通元素内容：innerHTML，innerText
  • 修改表单元素：value，type，disabled等
  • 修改元素样式：style，className

6.5查

主要获取查询dom的元素

  • DOM提供的API方法，getElementByld，getElementByTagName（古老用法不太推荐）
  • H5提供的新方法：querySelector，querySelectorAll（提倡）
  • 利用节点操作获取元素：父（parentNode），子（children），兄（previousElementSibling,nextElementSibling）(提倡)

6.6属性操作

主要针对于自定义属性

  • setAttribute：设置dom的属性值
  • getAttribute：得到dom的属性值
  • removeAttribute移除属性

6.7事件操作

给元素注册事件，采取，事件源.事件类型=事件处理程序

图片.png

avatar
文章
阅读
粉丝