16 DOM初级

日嗯任
222 阅读6分钟

DOM简介

什么是DOM

DOM是 文档对象模型 (Document Object Model) 是W3C 提供的处理可扩展标记语言(html/ xml)的标准编程接口

W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

DOM树

image.png

  • 文档 ： 就是整个页面 document

  • 元素 ： 页面中的所有标签 element

  • 节点 ： 网页中的所有内容都是节点 node

DOM把以上都看成对象 所以叫 文档对象模型

获取元素

getElementById

image.png

image.png

console.dir

image.png

image.png

getElementsByTagName

1、获取

image.png

以伪数组的形式存储的

image.png

2、遍历

image.png

image.png

3、只有一个li ，返回的仍然是伪数组形式

image.png

4、页面没有li，返回的是空的伪数组

image.png

5、

image.png

H5新增的

getElementsByClassName 类名

image.png

querySelector 第一个元素

image.png

querySelectorAll 所有

image.png

获取body和html

body

image.png

html

image.png

事件基础

事件概述

js使我们有能力创建动态页面，而事件是可以被js侦测到的行为

也就是说 事件是触发响应的一种机制

事件三要素

事件由三部分组成：事件源、事件类型和事件处理程序

事件源 ： 就是谁被触发了

事件类型 ： 是触发了什么事件

事件处理程序 ： 是通过一个函数赋值的方式来完成的

image.png

执行事件过程

1、获取事件源

2、注册事件（也就是绑定事件）

3、添加事件处理程序

image.png

操作元素

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

改变元素内容

innerText

image.png

innerHTML

也是改变元素的内容

innerHTML 和 innerText 区别

1、innerText 不识别html标签 非标准 读取的时候还会去除空格和换行

image.png

image.png

2、innerHTML 识别html标签 W3C标准 读取的时候可以获取到空格和换行

image.png

image.png

3、同 ： 这两个属性是可读写的，就可以获取里面的内容

image.png

image.png

改变元素属性

修改 src和title

点击进行切换图片 image.png

改变表单属性

修改 value

image.png

image.png

修改按钮状态

image.png

image.png

注 ： 此时的this 指向的是 事件函数的调用者，也就是说 谁调用了函数 this就指向谁

可以根据这个做 显示隐藏密码

修改样式属性

element.style 修改的样式少

image.png

修改的样式多 className

可以采用添加类名的方式

image.png

image.png

获得焦点 onfocus

image.png

失去焦点 onblur

image.png

可以写 判断密码输入的位数是否正确

排他思想

是先干掉所有人，然后再重新设置自己

进行 点击按钮后，颜色变粉，像这样 ， 不过当点击下一个按钮后，上一个按钮颜色恢复

image.png image.png

1、获取元素

image.png

2、要给每一个元素都绑定事件，那么就要循环

image.png

3、给元素绑定点击事件

image.png

4、要改变按钮的颜色，就要 设置style

image.png

5、不过，在变色之前，前把所有的按钮的背景颜色都去掉

image.png

完整版代码

image.png

鼠标经过 onmouseover

image.png

鼠标离开 onmouseout

image.png

自定义属性

目的 ： 是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

但有些自定义属性很容易引起歧义，不容易判断 是元素的内置属性还是自定义属性

获取属性

element.属性 获取的是 内置属性

image.png

element.getAttribute('属性') 自定义属性

image.png

设置属性

element.属性 = '值' 设置内置属性

image.png

element.setAttribute('属性','值') 主要针对于自定义属性

image.png

移除自定义属性 element.removeAttribute('属性')

image.png

h5自定义属性

h5规定来说 ， 凡是自定义属性的，前面都要加data-开头

获取

image.png 采取 dataset获取时候，前面就不需要加data-了

image.png

image.png

节点操作

为什么学节点操作

获取元素通常用两种方法：

1、DOM提供的方法获取

逻辑性不强，繁琐

2、利用节点层级关系获取

利用父子兄节点关系获取元素
逻辑性强，但兼容性差

但 节点操作更简单

节点概述

页面中所有的内容都是节点 ，用node表示

一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性

image.png

image.png

  • 元素节点 的 nodeType 是1
  • 属性节点 的 nodeType 是2
  • 文本节点 的 nodeType 是3（文本节点包含文字、空格、换行等）

节点操作主要操作 元素节点

父节点 parentNode

image.png

image.png

找不到 返回 null

子节点 childNodes

不过 ，使用 childNodes 会得到所有的子节点，包括元素节点和文本节点等

image.png

image.png

那么我们只想要获取 元素子节点的话 ，可以有2种方法

根据nodeType 来判断

若 nodeType为1 ，那么就返回

image.png

根据 children 来获取

image.png

获取子节点第一个和最后一个

firstChild 第一个

获取的是 第一个子节点，不管是文本节点还是元素节点

image.png

lastChild 最后一个

同上

image.png

firstElementChild

获取的是第一个子元素节点 ， 有兼容性问题

image.png

lastElementChild 最后一个

同上

image.png

实际开发的写法

image.png

兄弟节点

没有返回 null

下一个兄弟 nextSibling

得到的是下一个兄弟节点 包含元素节点文本节点等等

image.png

上一个兄弟 previousSibling

同上

image.png

nextElementSibling 下一个兄弟元素节点

有兼容性问题

image.png

previousElementSibling 上一个兄弟元素节点

同上

image.png

创建和添加节点

创建 document.createElement('tagName')

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

image.png

不过，创建完后，页面上并没有显示，还需要添加上

添加

node.appendChild(child) 后面加

node 父级 、 child 子级

image.png

node.insertBefore(child,指定元素) 前面加

' 指定元素 ' 是在哪里的前面添加

image.png

删除节点 node.removeChild(child)

image.png

复制节点 node.cloneNode()

克隆完成后，还需要添加节点

1、 若 （）参数为空 或者 false ，那么 是浅拷贝 只复制标签不复制内容

image.png

2、若 （） 里面为 true 则是 深拷贝 ， 既复制内容又复制标签

image.png

三种创建元素的区别

document.write()

直接将内容写人文档流

但是文档流执行完毕后再次执行这个，它会导致页面全部重新绘制

重绘 ：  是重新绘制了一个新的页面

image.png

image.png

innerHTML

若 采取字符串拼接的方式进行 添加元素，会导致效率变低，时间变长

解决办法 ： 采取追加到数组上 这个效率会高

createElement

区别

1、document.write() 会导致页面重绘

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

3、innerHTML 创建多个元素时，采取通过数组形式拼接的方式，效率更高，不要使用拼接字符串，这种效率会低；不过结构会复杂

3、createElement() 创建多个元素的时候 效率稍微低一些 ，但是结构清晰

总结：不同的浏览器下，innerHTML采取数组拼接的方式时效率要比createElement高

avatar
文章
阅读
粉丝