Javascript之DOM讲解

前端_贾公子
95 阅读4分钟

Javascript之DOM讲解

dom

元素也是对象

在html中叫做标签 在js中叫做元素js中的元素都是对象数据类型

文档:一个页面就是一个文档 dom使用document表示

元素:页面中所有的标签都是元素,dom使用element表示

节点:网页中所有的内容都是节点,dom中使用node表示

【dom树】 ：浏览器在加载页面的时候，首先就是dom的结构计算，它形式就像是一颗大树，有很多的分支，所以被称为 "dom tree

dom的基本功能

  • 查询某个元素
  • 查询某个元素的祖先,兄弟以及后代元素
  • 获取 修改元素内容
  • 创建 插入和删除元素

获取元素的方法

  1. document.getElementById("id名") :                                                                                         通过元素的id获取元素

  2. context.getElementsByTagName(''标签名'):                                                                           通过标签名获取一组元素得到 的是一个类数组没有数组的方法,可以基于索引获取

  3. context.getElementsByClassName(")                                                                                    通过类名获取元素集合

  4. context.getElements.ByName(")                                                                                                通过name获取一组元素集合 (另外，正常的规范中，咱们只会给表单元素起name值，如果给其它元素设置name，在ie9以下版本浏览器不兼容，是获取不到的，所以为了这种情况，咱们以后养成习惯，只给表单元素用name，非表单元素不用name)

  5. document.head                                                                                                                      获取Head元素对象

  6. document.body                                                                                                                       获取body元素对象

  7. document.documentElement                                                                                                  获取html元素对象

  8. context.querySelector("选择器")通过选择器获取指定的元素，即使匹配的有多个，也只会对第一个起作用，获取到的是一个对象(给咱们平时写样式时候写选择器是一样的)

  9. context.querySelectorAll()                                                                                                      通过指定的选择器获取一组节点结合

获取dom的clsaaName

  • 元素.classList:获取当前元素的class名列表
  • 元素.classList.add('class名')增加指定的class名
  • 元素.class.remove('class名')移除指定的class名
  • 元素.replaceChild(newnode,oldnode)

方法用新节点替换某个子节点这个新节点可以是某个已经存在的节点,或者也可以创建新节点

操作节点的属性

节点

页面中所有的东西都是节点,所有的节点都是对象

  • 元素节点就是页面中的标签
  • 文本节点包括内容 空格回车 换行
  • 注释节点就是你写的注释
  • 文档节点就是整个大文档

操作节点点的属性

childNodes:获取所有子节点

parentNode获取父节点

children 获取所有元素子节点(子元素标签集合)

firstChild 获取第一个子节点

lastChild:获取最后一个子节点

falstElementChild:获取第一个元素子节点

lastElementChild:获取最后一个元素子节点

previosSibling:获取上一个哥哥节点

nextSibling:获取下一个弟弟节点

previousElementSibling 获取上一个哥哥元素节点

nextElementSIbling:获取弟弟元素节点

js节点的增删改

createElement 创建元素节点

createTextNode:创建文本节点

容器.appendchild(节点):把节点插入到容器的末尾

容器.insertBefore(新节点,老节点)把新节点插入到老节点的前面

容器.removeChild(j节点)移除容器中的节点

js动态克隆节点

节点.cloneNode (true/false)

克隆节点,如果传参是true就是深克隆 如果不传参或者是false就是浅克隆(只复制外面的元素不复制里面的内容)

增加行内样式

setAttribute('属性名,属性值) :在元素结构中设置属性

getAttribute('属性名'):在元素结构中获取属性

removeAttribute(' 属性名'):在元素结构中移除属性

回流和重绘

  • 重绘(repaint) ：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此 损耗较少 。比如background-color
  • 回流(reflow) ：又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
  • 页面初次渲染
  • 浏览器窗口大小改变
  • 元素尺寸/位置/内容发生改变
  • 元素字体大小变化
  • 添加或者删除可见的 DOM 元素

补充

  1. style:操作元素的行内样式
  2. class操作元素的class名
  3. innerHTML操作的是元素内容(可以识别标签)
  4. innerText操作元素的内容(不可以识别标签)
  5. getComputedStyle(操作全部样式)

-------------------------------------------------完结--------------------------------------------------------------------------

-----------------------------接受大佬们的批改和指点,欢迎留言-----------------------------------------------------

avatar
文章
阅读
粉丝