DOM基础

DOM

DOM标准：W3C指定和维护

一、DOM Tree

什么是：一个网页的所有内容，在浏览器督导内存之后，都是以树形结构保存

如何：

  • 浏览器每读到一个网页文件，就会先在内存中创建一个树根对象——documnet对象

  • 浏览器一次扫描网页文件中的html元素、文本等内容。每扫描到一项内容，就创建一个“节点对象”，保存元素或文本的内容和属性。然后将节点对象挂到DOM树中指定的位置

二、事件绑定

什么是事件：浏览器自己触发的或用户手动触发的页面中元素内容或状态的改变

什么是事件处理函数：事件发生时自动执行的一项函数

什么是事件绑定：提前将事件处理函数保存在元素对象的对应事件属性中

三、查找元素：4种

1. 不需要查找就可以直接获得的4种节点对象（一个页面中只能拿到1个）

document对象——根节点
document.documentElement对象——<html>元素对象
document.head对象——<head>元素对象
document.body对象——<body>元素对象

DOM 中console.log输出的是DOM树结构（节点间关系）；console.dir()输出的是一个节点对象在内存中的属性结构

2. 按节点间关系查找（2大类关系，6个属性）

什么是：按照元素在DOM树中的上下级或平级关系查找其他元素

节点树：包含所有网页内容的完整树结构，会将看不见的回车、空格等空字符也创建位节点对象，故几乎不用节点树

节点树2大类关系，6个属性：

  • 父子关系：4个属性

    // 获得一个节点对象的父级节点对象
节点对象.parentNode
// 获得一个节点对象下的所有直接子节点对象的类数组对象
节点对象.childNodes
// 获得一个节点对象下的第一个直接子节点对象
节点对象.firstChild
// 获得一个节点对象下的最后一个直接子节点对象
节点对象.lastChild

  • 兄弟关系：2个属性

    // 获得一个节点对象相邻的前一个兄弟节点对象
节点对象.previousSibling
// 获得一个节点对象相邻的下一个兄弟节点对象
节点对象.nextSibling

元素树：仅包含元素节点的属性结构

元素树2大类关系，6个属性：

  • 父子关系：4个属性

    // 获得一个节点对象的父级节点对象
节点对象.parentElement
// 获得一个节点对象下的所有直接子节点对象的类数组对象
节点对象.children
// 获得一个节点对象下的第一个直接子节点对象
节点对象.firstElementChild
// 获得一个节点对象下的最后一个直接子节点对象
节点对象.lastElementChild

  • 兄弟关系：2个属性

    // 获得一个节点对象相邻的前一个兄弟节点对象
节点对象.previousElementSibling
// 获得一个节点对象相邻的下一个兄弟节点对象
节点对象.nextElementSibling

3. 按HTML特征查找（4个函数）

按id名查找一个元素：

var 一个元素对象 = document.getElementById('id名')

返回值：找到则返回一个元素对象，否则返回null

按标签名查找多个元素：

var 类数组对象 = 任意父元素.getElementsByTagName('标签名')

返回值：找到返回类数组对象，否则空的类数组对象（length==0）

按照class名查找多个元素

var 类数组对象 = 任意父元素.getElementsByClassName('class名')

返回值：找到返回类数组对象，否则空的类数组对象（length==0）

按照name名查找多个表单元素

var 类数组对象 = document.getElementsByName('name名')

返回值：找到返回类数组对象，否则空的类数组对象（length==0）

4. 按选择器查找

只查找一个符合要求的元素

var 一个元素对象 = 任意父元素.querySelector('选择器')

查找多个符合要求的元素

var 类数组对象 = 任意父元素.querySelectorAll('选择器')

四、修改元素

1. 修改内容

获取或修改元素开始标签到结束标签之间的原始的HTML内容

元素对象.innerHTML

获取或修改元素开始标签到结束标签之间的原始的纯文本内容

元素对象.textContent

innerHTML和textContent区别：

  • 获取元素内容时：innerHTML原样返回HTML代码中的html内容，不做任何加工；textContent去掉内嵌的标签，并将特殊符号转为正文，然后再返回修改后的内容
  • 修改元素内容时：innerHTML会先将字符串内容交给浏览器解析，然后将解析后的内容显示再页面上；textContent不会将字符串内容交给浏览器解析，直接保持字符串的原样内容输出

获取或修改表单元素的内容

表单元素.value

2. 修改属性

字符串类型的HTML标准属性：HTML中规定的，属性值为字符串的属性

/* 旧的核心DOM4个函数 */
// 1. 获取属性值
元素对象.getAttribute('属性名')
// 2. 修改属性值
元素对象.setAttribute('属性名', 新值)
// 3. 判断是否包含某个属性
元素对象.hasAttribute('属性名')
// 4. 移除属性
元素对象.removeAttribute('属性名')

/* 新的简化版 HTML DOM */
// 新的 HTML DOM 已经将所有HTML标准属性，提前保存在了内存中的元素对象身上，默认值为 ""
// 1. 获取属性值
元素对象.属性名
// 2. 修改属性值
元素对象.属性名 = 属性值
// 3. 判断是否包含某个属性
元素对象.属性名 !== '' 说明包含该属性
// 4. 移除属性
错误做法：delete 元素对象.属性名
正确：元素对象.属性名 = ''

特例：class属性

ES6语法已经将class定义为关键字，故获取元素的class属性写为.className

bool类型的HTML标准属性：HTML标准规定的，不需要写属性值，只靠属性名就可发挥作用

比如：checked disabled

这种只能用新 HTML DOM 来操作

补：css状态伪类选择器：

选择选中的元素：:checked
选择未选中的元素：:not(:checked)
选择禁用的元素：:disabled

自定义扩展属性：HTML标准中没有规定的，程序员根据自身的需要，自发添加的自定义属性

两种情况下会使用：

  1. 经常用于代替 id选择器 / class选择器 / 元素选择器，作为查找触发事件的元素的条件。id选择器只能选1个；class选择器，class的本职工作是定义样式，而样式修改极其频繁，如果用class选择器查找元素绑定事件，一旦样式发生变化，程序出错；元素选择器，因为实现同一种效果，可选的标签有很多，没有统一的规定。如果用元素选择器查找触发事件的元素，绑定事件，则元素一改，功能出错。解决：使用属性选择器

  2. 在客户端临时缓存部分业务数据，避免频繁向服务器发送请求。

    <button data-age="16">粒粒</button>

/* 自定义属性不能用.访问，因为原来的元素对象中不包含自定义扩展属性 */
// 可以用旧的核心DOM
元素.getAttribute('自定义属性名')
元素.setAttribute('自定义属性名', 新值)
// HTML5规定自定义属性名都以 data-开头
<元素 data-自定义属性名="属性值">
元素.dataset.自定义属性名

3. 修改样式

修改内联样式

元素.style.css属性 = "属性值" // 记得加单位

注：所有待-的css属性名必须去-变驼峰

获取样式

使用元素.style.scc属性的方式，只能获取内联样式，无法获得内部或外部样式表中层叠或继承来的css属性

获得计算后的样式对象：

var style = getComputedStyle(元素对象)

注意：计算后的样式对象中的css属性是只读的

修改class

五、添加删除元素

1. 添加一个新元素

// 1. 创建一个新的空元素对象
var 新元素对象 = document.createElement('标签名');
// 2. 为新元素添加必要的属性
元素.属性名 = 新值;
// 3. 必须将新元素添加到DOM树上指定的父元素下，浏览器才能显示出来

将创建好的元素放入DOM树上指定父元素下的三种方式：

// 1. 在父元素末尾追加新元素
父元素.appendChild(新元素)
// 2. 在父元素下插入到一个现有子元素之前
父元素.inserBefore(新元素, 现有子元素)
// 3. 替换父元素下的一个现有的子元素
父元素.replaceChild(新元素, 现有子元素)

页面加载过程：创建DOM树 --> 创建加载树（render Tree）--> 排版 --> 绘制

重排重绘：只要修改DOM树内容，几乎都会导致重排重绘，频繁重排重绘会降低页面加载的效率，故尽量减少修改DOM树的次数，但是内容不能少

修改DOM树减少重排重绘两种情况的解决方案：

  1. 如果同时条件父元素和子元素，应该先将子元素添加到父元素上，然后将父元素一次性添加到DOM树上
  2. 如果父元素已经在页面上了，要添加多个平级子元素。就要借助于文档片段对象（内存中临时保存多个子元素的虚拟父元素）

利用文档片段对象添加多个子元素的步骤：

// 1. 创建文档片段对象
var frag = documnet.createDocumentFragment();
// 2. 将子元素添加到文档片段对象中
frag.appedChild(子元素);
// 3. 将文档片段对象一次性添加到页面上
父元素.appendChild(frag);

删除元素

父元素.removeChild(子元素);

浏览器三大弹出框

  1. 输入框：var str = prompt('提示信息');
  2. 警告框：alert('警告信息');
  3. 确认框：var bool结果 = confirm('确认信息');
posted @ 2021-10-26 22:28  carla-cn  阅读(58)  评论(0)    收藏  举报