搞定浏览器的DOM

一.什么是DOM


🐻DOM:文档对象模型,将页面所有的内容表示为可以修改的对象,浏览器会对我们编写的HTML和CSS进行渲染,同时它又要考虑我们可能会通过JavaScript来对其进行操作:

  1. 于是浏览器将我们编写在HTML中的每一个元素都抽象成了一个个对象;
  2. 所有的这些对象都可以通过JavaScript来对其进行访问,那么我们就可以通过JavaScript来操作页面;
  3. 所以我们将这个抽象过程称之为文档对象模型。

😈在整个文档被抽象到document对象中:

  1. 比如document.documentElment对应的是html元素;
  2. 比如document.body对应的是body元素;
  3. 比如document.head对应的是head元素;

二.认识DOM Tree


🐻一个页面不只有html head body还有很多子元素,在html结构中最终会形成一个树结构,在抽象成DOM对象的时候,它会形成一个树结构,我们称之为DOM Tree

🤗DOM的学习顺序:DOM中有很多的API,在学习DOM的时候建议通过一下顺序学习。

  1. DOM元素之间的关系。
  2. 获取DOM元素。
  3. DOM的节点type tag content
  4. DOM节点的attributes properies等等。
  5. DOM节点的创建,插入,克隆,删除。
  6. DOM节点的样式,类。
  7. DOM元素/window的大小,滚动,坐标。

三.DOM的整体架构


🤡既然我们已经理解了DOM的本质是什么样的东西,那么我们来从DOM的整体架构上来了解DOM,DOM相当于是JavaScript和HTML,CSS之间的桥梁,通过浏览器提供给我们的API,我们可以对元素及其其中的内容做任何事情,DOM之间是有继承关系的,他们的继承关系如下。

🥰document对象:Document节点表示整个载入的网页,它的实例是全局的document对象:

  1. 对DOM的所有操作都是从document对象开始的。
  2. 它是DOM的入口点,可以从document开始去访问任何节点元素。

🙈对于最顶层的html head body元素,我们可以直接在document对象中获取到:

  1. html元素:=document.documentElement
  2. body元素:=document.body
  3. head元素:=document.head
  4. 文档声明<!DOCTYPE html>=document.doctype

🚨注意:关于一些疑问的解答.

四.节点,元素导航


😈当我们获取一个节点后,可以通过这个节点获取其他元素的节点,我们称之为节点之间的导航,节点的内容包含的很多,注释也是节点,元素仅仅包含HTML元素,这也就是元素和节点的区别。

  1. 父节点:parentNode
  2. 前兄弟节点:previousSibling
  3. 后兄弟节点:nextSibling
  4. 子节点:childNodes
  5. 第一个子节点:fristChild
  6. 最后一个子节点:lastChild

🐸当我们获取了一个元素,我们就可以通过这个元素获取其他的元素,这就是元素之间的导航。

  1. 父元素:parentElement
  2. 前兄弟节点:previousElementSibling
  3. 后兄弟节点:nextElementSibling
  4. 子节点:children
  5. 第一个子节点:firstElementChild
  6. 第二个子节点:lastElementChild

五.获取元素的方法


😈当元素彼此相邻的时候,DOM导航属性非常有用,但是在实际开发中,我们希望可以任意的获取到某一个元素,DOM为我们提供了获取元素的方法:

😀在开发中我们最常用的是querySelectorquerySelectorAll两个获取元素的方法,getElementById一般用来在一些低版本浏览器进行一些兼容。

六.Node节点的属性


🐻节点的属性-nodeType:目前我们已经可以获取节点了,接下来我们看一下节点中有哪些常见的属性,以下是节点的常用属性:


🤗节点的属性-nodeName,tagName

  1. nodeName:获取节点的名字,是为任意的Node定义的;
  2. tagName:获取元素的标签名词,属性仅适用于Element节点;

🤡节点属性-innerHTML,textContent

  1. innerHTML属性,将元素中的HTML获取为字符串的形式,设置元素中的内容。
  2. outerHTML属性,包含元素的完整HTML,innerHTML加上元素本身。
  3. textContent属性,仅仅获取元素的文本内容。

😈innerHTML和textContent的区别:

  1. 使用innerHTML,我们将其作为HTML插入,带有所有HTML标签
  2. 使用textContent,我们将其作为文本插入,所有符号均按字面意义处理。

🐻节点的属性-nodeValue:用于获取非元素节点的文本内容。

🤗元素节点的其他属性:

  1. hidden属性:也是一个全局属性,可以用于设置元素隐藏
  2. value属性:input select textarea的value
  3. href属性:<a href="...">的href
  4. id属性:所有的元素的id特性(attribute)的值

七.元素的特性attribute


🐻我们知道一个元素除了有开始标签,结束标签,内容以外还有很多属性。

🤢浏览器在进行解析HTML元素的时候,会将对应的attribute也创建出来放在对应的元素上面。

  1. 标准的attribute:某些attribute属性是标准的,比如id、class、href、type、value等;
  2. 非标准的attribute:某些attribute属性是自定义的,比如abc、age、height等;

🦥对所有的attribute都支持的操作。

  1. elem.hasAttribute(name) --- 检查特性是否存在。
  2. elem.getAttribute(name) --- 获取这个特性值。
  3. elem.setAttribute(name, value) --- 设置这个特性值。
  4. elem.removeAttribute(name) --- 移除这个特性。
  5. attributes:attr对象的集合,具有name、value属性;

🐻attribute具有以下属性:

  1. 它们的名字是大小写不敏感的(id 与 ID 相同)。
  2. 它们的值总是字符串类型的。

八.元素的属性property


🤢对于标准的attribute,会在DOM对象上创建与其对应的property属性(对象中的属性叫做property):

🐻在大多数情况下,它们是相互作用的

  1. 改变property,通过attribute获取的值,会随着改变;
  2. 通过attribute操作修改,property的值会随着改变;
  3. 但是input的value修改只能通过attribute的方法;
  4. 除非特别情况,大多数情况下,设置、获取attribute,推荐使用property的方式,这是因为它默认情况下是有类型的;

🐸HTML5的data-*自定义属性,那么它们也是可以在dataset属性中获取到的:

九.元素的class和style


🐻有时候我们会通过JavaScript来动态修改样式,这个时候我们有两个选择:

  1. 选择一:在CSS中编写好对应的样式,动态的添加class;
  2. 选择二:动态的修改style属性;

😀开发中如何选择呢?

  1. 在大多数情况下,如果可以动态修改class完成某个功能,更推荐使用动态class;
  2. 如果对于某些情况,无法通过动态修改class(比如精准修改某个css属性的值),那么就可以修改style属性;

🐻元素的className和classList:元素的class attribute,对应的property并非叫class,而是className:

  1. 这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性,所以DOM规范使用了className;
  2. 虽然现在JavaScript已经没有这样的限制,但是并不推荐,并且依然在使用className这个名称;
  3. 如果我们需要添加或者移除单个的class,那么可以使用classList属性。

🙈elem.classList 是一个特殊的对象:

  1. elem.classList.add (class) :添加一个类
  2. elem.classList.remove(class):添加/移除类。
  3. elem.classList.toggle(class) :如果类不存在就添加类,存在就移除它。
  4. elem.classList.contains(class):检查给定类,返回 true/false。
  5. classList是可迭代对象,可以通过for of进行遍历。

🥰元素的style属性:如果需要单独修改某一个CSS属性,那么可以通过style来操作:

  1. 对于多词(multi-word)属性,使用驼峰式 camelCase
  1. 多个样式的写法,我们需要使用cssText属性:

😈元素style的读取 - getComputedStyle,如果我们需要读取样式:

  1. 对于内联样式,是可以通过style.*的方式读取到的;
  2. 对于style、css文件中的样式,是读取不到的;

🤡这个时候,我们可以通过getComputedStyle的全局函数来实现:

十.元素的常见操作


🤢创建元素:我们进行元素的创建基本分为两个步骤

  1. 创建一个元素。
  2. 动态插入某个元素到DOM的某个位置。

🤗插入元素:插入元素的方式如下

  1. node.append(...nodes or strings) ------ 在 node 末尾 插入节点或字符串,
  2. node.prepend(...nodes or strings) ------ 在 node 开头 插入节点或字符串,
  3. node.before(...nodes or strings) ------ 在 node 前面 插入节点或字符串,
  4. node.after(...nodes or strings) ------ 在 node 后面 插入节点或字符串,
  5. node.replaceWith(...nodes or strings) ------ 将 node 替换为给定的节点或字符串。

🥰移除和克隆元素:

  1. 移除元素我们可以调用元素本身的remove方法:
  1. 如果我们想要复制一个现有的元素,可以通过cloneNode方法,可以传入一个Boolean类型的值,来决定是否是深度克隆,深度克隆会克隆对应元素的子元素,否则不会;

🙈旧的元素操作方法:很多时候我们也会看到很多旧的操作方法

  1. parentElem.appendChild(node):在parentElem的父元素最后位置添加一个子元素
  2. parentElem.insertBefore(node, nextSibling):在parentElem的nextSibling前面插入一个子元素;
  3. parentElem.replaceChild(node, oldChild):在parentElem中,新元素替换之前的oldChild元素;
  4. parentElem.removeChild(node):在parentElem中,移除某一个元素;

十一.元素的大小和滚动


十二.window的大小和滚动



相关推荐
baiduopenmap14 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish22 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i34 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_37 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun42 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali2 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网