【DOM】

DOM

  • 1 本节目标
  • 2 DOM 简介
    • 2.1 什么是DOM
    • 2.2 DOM 树
  • 3 获取元素
    • 3.1 如何获取页面元素
    • 3.2 根据 ID 获取
    • 3.3 根据标签名获取
    • 3.4 通过HTML5新增的方法获取
    • 3.5 获取特殊元素(body,html)
      • 3.5.1 获取body元素
      • 3.5.2 获取html元素
  • 4 事件基础
    • 4.1 事件概述
    • 4.2 事件三要素
    • 4.3 执行事件的步骤
  • 5 操作元素
    • 5.1 改变元素内容
    • 5.2 常用元素的属性操作
    • 5.3 表单元素的属性操作
    • 5.4 样式属性操作
      • 5.4.1 element.style
      • 5.4.2 element.className
    • 5.5 操作元素小结
    • 5.6 排他思想
    • 5.7 自定义属性的操作
      • 5.7.1 获取属性值
      • 5.7.2 设置属性值
      • 5.7.3 移除属性
    • 5.8 H5自定义属性
      • 5.8.1 设置H5自定义属性
      • 5.8.2 获取H5自定义属性
  • 6 节点操作
    • 6.1 为什么学节点操作
    • 6.2 节点概述
    • 6.3 节点层级
      • 6.3.1 父级节点
      • 6.3.2 子节点
      • 6.3.3 兄弟节点
    • 6.4 创建和添加节点
    • 6.5 删除节点
    • 6.6 复制节点(克隆节点)
    • 6.7 三种动态创建元素区别
  • 7 DOM重点核心

1 本节目标

  • 说出什么是 DOM
  • 获取页面元素
  • 给元素注册事件
  • 操作 DOM 元素的属性
  • 创建元素
  • 操作 DOM 节点

2 DOM 简介

2.1 什么是DOM

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

2.2 DOM 树

【DOM】_第1张图片

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

3 获取元素

3.1 如何获取页面元素

  • DOM 在实际开发中主要用来操作元素。
  • 获取页面中的元素可使用以下几种方式:
    1>根据 ID 获取;
    2>根据标签名获取;
    3>通过HTML5新增的方法获取;
    4>特殊元素获取。

3.2 根据 ID 获取

  • 使用getElementById()方法可以获取带有ID的元素对象。
  • console.dir()打印我们返回的元素对象,更好查看里面的属性和方法
    【DOM】_第2张图片

3.3 根据标签名获取

  • 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
  • 还可以获取某个元素(父元素)内部所有指定标签名的子元素。
    注意:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己。
    element.getElementsByTagName('标签名');
    【DOM】_第3张图片

3.4 通过HTML5新增的方法获取

  • document.getElementsByClassName('类名');根据类名返回元素对象集合。
  • document.querySelector('选择器');根据指定选择器返回第一个元素对象。
  • document.querySelectorAll('选择器');根据指定选择器返回。
    【DOM】_第4张图片

3.5 获取特殊元素(body,html)

3.5.1 获取body元素

  • document.body:返回body元素对象

3.5.2 获取html元素

  • document.documentElement:返回html元素对象
    【DOM】_第5张图片

4 事件基础

4.1 事件概述

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

4.2 事件三要素

  • 事件由三部分组成:事件源、事件类型、事件处理程序。
    【DOM】_第6张图片

4.3 执行事件的步骤

  • 获取事件源
  • 注册事件(绑定事件)
    【DOM】_第7张图片
  • 添加事件处理程序(采取函数赋值形式)
    【DOM】_第8张图片

5 操作元素

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

5.1 改变元素内容

  • element.innerText:从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。
  • 点击按钮前:
    【DOM】_第9张图片
    点击按钮后:
    【DOM】_第10张图片
  • element.innerHTML:起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。
  • innerTextinnerHTML区别:
    1>innerText不识别html标签,innerHTML识别html标签;
    【DOM】_第11张图片
    2>innerText去除空格和换行,innerHTML保留空格和换行。
    【DOM】_第12张图片

5.2 常用元素的属性操作

  • innerTextinnerHTML 改变元素内容
  • srchref
  • idalttitle
    【DOM】_第13张图片
    【DOM】_第14张图片

5.3 表单元素的属性操作

  • 利用DOM可以操作如下表单元素的属性:type、value、checked、selected、disabled
  • 点击前:
    【DOM】_第15张图片
    点击后:
    【DOM】_第16张图片

5.4 样式属性操作

  • 可通过JS修改元素的大小、颜色、位置等样式。
  • element.style:行内样式操作
  • element.className:类名样式操作

5.4.1 element.style

  • 点击前:
    【DOM】_第17张图片
    点击后:
    【DOM】_第18张图片
  • 注意:
    1>JS里面的样式采取驼峰命名法,如:fontSize、backgroundColor;
    2>JS修改style样式操作,产生的是行内样式,CSS权重比较高。

5.4.2 element.className

点击前:
【DOM】_第19张图片
点击后:
【DOM】_第20张图片

  • 注意:
    1>如果样式修改较多,可采取操作类名方式更改元素样式;
    2>class因为是个保留字,因此使用className来操作元素类名属性;
    3>className会直接更改元素的类名,会覆盖原先的类名;
    4>如果想要保留原先的类名,我们可以写为:this.className = '原先的类名 修改后的类名';

5.5 操作元素小结

【DOM】_第21张图片

5.6 排他思想

  • 首先先排除其他人,然后才设置自己的样式,这种排除其他人的思想称为排他思想。
  • 如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法。
  • 步骤:
    1>所有元素全部清除样式(干掉其他人)
    2>给当前元素设置样式(留下自己)
    3>注意顺序不能颠倒,首先干掉其他人,再设置自己
    【DOM】_第22张图片

5.7 自定义属性的操作

5.7.1 获取属性值

  • element.属性:获取属性值
  • element.getAttribute('属性');:获取属性值
  • 区别:
    element.属性:获取内置属性值(元素本身自带的属性)
    element.getAttribute('属性');:主要获取自定义的属性(标准) 程序员自定义的属性

5.7.2 设置属性值

  • element.属性 = '值':设置内置属性值
  • element.setAttibute('属性','值');:主要针对于自定义属性

5.7.3 移除属性

  • element.removeAttribute('属性');
    【DOM】_第23张图片

5.8 H5自定义属性

  • 自定义属性目的:是为了保存使用数据,有些数据可以保存到页面中而不用保存到数据库中。
  • 但有些自定义属性容易引起歧义,不易判断是元素的内置属性还是自定义属性。
  • H5新增了自定义属性。

5.8.1 设置H5自定义属性

  • H5规定自定义属性data-开头作为属性名并且赋值。
  • 比如:
    或者使用JS设置element.setAttribute('data-index' , 2)

5.8.2 获取H5自定义属性

  • 兼容性获取:element.getAttribute('data-index');
  • H5新增element.dataset.indexelement.dataset['index']
    【DOM】_第24张图片

6 节点操作

6.1 为什么学节点操作

  • 获取元素通常使用两种方式:
    1>利用DOM提供的方法获取元素
    document.getElementById()
    document.getElementByTagName()
    document.querySelector()
    以上方法逻辑性不强且繁琐
    2>利用节点层级关系获取元素
    利用父子兄节点关系获取元素
    此方法逻辑性强,但兼容性稍差

6.2 节点概述

  • 网页中所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。
  • HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。
  • 一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
  • 元素节点 nodeType 为1
  • 属性节点 nodeType 为2
  • 文本节点 nodeType 为3(文本节点包含文字、空格、换行等)
  • 在实际开发中,节点操作主要操作的是元素节点。
    【DOM】_第25张图片

6.3 节点层级

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

6.3.1 父级节点

  • node.parentNode
  • parentNode属性可返回某节点的父节点,注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回null
    【DOM】_第26张图片

6.3.2 子节点

  • parentNode.childNodes(标准)
  • 返回包含指定节点的子节点的集合,该集合为即时更新的集合。
  • 注意:返回值里包含了所有的子节点,包括元素节点、文本节点等。
  • 如果只想要获得里面的元素节点,则需专门处理,所以我们一般不提倡使用childNodes
    【DOM】_第27张图片
  • parentNode.children(非标准)
  • 是一个只读属性,返回所有的子元素节点,它只返回子元素节点,其余节点不返回
  • 虽是非标准,但可放心使用
    【DOM】_第28张图片
  • parentNode.firstChild返回第一个子节点,找不到则返回null,同样也是包含所有的节点。
  • parentNode.lastChild返回最后一个子节点,找不到则返回null,同样也是包含所有的节点。
  • parentNode.firstElementChild返回第一个子元素节点
  • parentNode.lastElementChild返回最后一个子元素节点
    在这里插入图片描述
    【DOM】_第29张图片

6.3.3 兄弟节点

  • node.nextSibling返回当前元素的下一个兄弟节点,找不到则返回null,同样也是包含所有的节点。
  • node.previousSibling返回当前元素的上一个兄弟节点,找不到则返回null,同样也是包含所有的节点。
  • node.nextElementSibling返回当前元素的下一个兄弟元素节点
  • node.previousElementSibling返回当前元素的上一个兄弟元素节点
    【DOM】_第30张图片

6.4 创建和添加节点

  • 想要页面添加一个新的元素:1.创建元素2.添加元素
  • 创建节点:document.createElement('tagName')方法创建由tagName指定的HTML元素,因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
  • 添加节点:
    node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾,类似于css里面的after伪元素或类似于数组中的push。
    node.insertBefore(child,指定元素)方法将一个节点添加到指定父节点的子节点前面,类似于css里面的before伪元素。
    【DOM】_第31张图片

6.5 删除节点

  • node.removeChild(child)方法从DOM中删除一个子节点,返回删除的节点。
    【DOM】_第32张图片
    【DOM】_第33张图片

6.6 复制节点(克隆节点)

  • node.cloneNode()方法返回调用该方法的节点的一个副本,也称为克隆节点/拷贝节点。
  • 注意:
    1>如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点,只复制标签不复制里面的内容。
    2>如果括号参数为true,则是深拷贝,会复制节点本身以及里面所有的子节点,既复制标签还复制里面的内容。
    【DOM】_第34张图片

6.7 三种动态创建元素区别

  • document.write()
  • element.innerHTML
  • document.createElement()
  • 区别:
    1>document.write()是直接将内容写入页面的内容流,但是文档流执行完毕,它会导致页面全部重绘。
    2>innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘。
    3>innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂。
    4>createElement()创建多个元素效率稍低一点点,但是结构更清晰。
    5>总结:不同浏览器下,innerHTML效率要比createElement()
    【DOM】_第35张图片

7 DOM重点核心

【DOM】_第36张图片
【DOM】_第37张图片

你可能感兴趣的:(JavaScript,javascript,前端)