DOM文档对象模型

DOM Document Object Model 文档对象模型

操作页面元素
=》操作html元素（增删改查）
=》操作元素的样式
=》操作元素的属性
=》操作元素添加事件
=》…
DOM一树状结构出现
=》顶层是document
=> 最大的标签是html
=>下面分成head 和 body
=> 操作dom就是对这个树上

获取元素

获取非常规标签
1. html
=> document.documentElement
=>得到的就是该页面的html标签
2. head
=> document.head
3. body
=> document.body

获取常规标签

1. id document.getElementById(‘id名称’)
   =》 如果页面中有id对应的元素，那么就是这个元素
   =》如果页面中无id对应的元素，那么就是null
2. 根据类名获取元素 document.getElementsByClassName(“类名”)
   返回值：必然是一个伪数组
   =》 如果页面中有类名对应的元素，那么有多少获取多少，放到伪数组中
   =》 如果页面中无类名对应的元素，那么就是空的伪数组
   =》 注意：拿到的不是这个元素，而是一个集合，集合内的[n]才是元素
3. 根据标签名 获取元素 document.getElementsByTagName(‘标签名’)
   返回值：必然是一个伪数组
   =》 如果页面中有标签名对应的元素，那么有多少获取多少，放到伪数组中
   =》 如果页面中无标签名对应的元素，那么就是空的伪数组
4. 根据 name 属性来获取元素 document.getElementsByName(‘name属性’)
   返回值：必然是一个伪数组
   =》 如果页面中有name属性对应的元素，那么有多少获取多少，放到伪数组中
   =》 如果页面中无name属性对应的元素，那么就是空的伪数组
5. 根据 选择器 获取一个元素 document.querySelector(‘选择器’)
   选择器：就是css中捕获元素的内容 .box #box div li:nth-child(1)…
   返回值：
   =>如果页面上有该选择器对应的元素，那么就是满足条件的第一个
   =>如果页面上没有该选择器对应的元素，返回值为null
   document.querySelector(‘ul > li:nth-child(3)’) css怎么写，里面可以怎么写
6. 根据 选择器 获取一组元素 document.querySelectorAll(‘选择器’)
   返回值：必然是一个伪数组
   =》 如果页面中有该选择器对应的元素，那么有多少获取多少，放到伪数组中
   =》 如果页面中无该选择器对应的元素，那么就是空的伪数组

操作元素内容

1. innerText
   是一个读写的属性
   读： 语法：元素.innerText 得到：该元素内的所有文本内容
   写： 语法：元素.innerText=‘值’ 完全覆盖掉的书写该元素内的文本内容
   html不会被解析，直接显示
2. innerHTML
   是一个读写的属性
   读： 语法：元素.innerHTML 得到：该元素内的所有内容
   写： 语法：元素.innerText=‘值’ 完全覆盖掉的书写该元素内的超文本内容
   如果你设置的是一个html格式的字符串，会把标签内容解析出来
3. value
   是一个读写的属性
   读： 语法：表单元素.value 得到该标签元素的value值
   写： 语法：表单元素.value = “值” 完全覆盖表单元素value的值

操作元素属性

认识属性的分类，大致分三类

1. 原生属性，在html规范内有的属性
   =》比如id,class style type
   =>对于标签有特殊意义
2. 自定义属性，在html规范内没有的属性
   =》我们自己随便书写的一个属性名，对于标签没有特殊意义
   =》只是为了标注一些内容在标签身上
3. H5自定义属性
   =》H5标准下提出的一个自定义属性的书写方式
   =》书写规则：data-开头
   =》属性名：a 属性值100 data-a=“100”

操作元素属性

1. 元素.属性名
   读： 元素.属性名 得到该元素对应的属性值
   写： 元素.属性名 = 属性值 修改该元素的该属性的值 原来没有属性就是增加，原先有就是修改

var box = document.getElementById("box");
console.log(box.id);

2. 操作自定义属性
   =》 元素.getAttribute(‘属性名’)
   =》 返回值：该元素内该属性名对应的属性值
   =》 设置： 元素.setAttribute(‘属性名’，‘属性值’)；也可以设置原生属性
   =》 删除自定义属性： 元素.removeAttribute(‘属性名’) 删除元素的某一个属性

3. 操作H5自定义属性
   在元素身上有一个叫做dataset的成员
   是一个类似对象的数据类型
   里面存储这所有的元素身上以data-开头的H5自定义属性
   我们对于H5自定义属性的操作，就是对这个类似对象数据的操作

console.log(box.dataset.a)
box.dataset.a = '200'  // 增加或修改
// 删除  delete box.dataset.a 

操作元素样式

1. 设置元素的行内样式
   元素.style.样式名 = 样式值 样式名中带有中划线的名字，需要写驼峰式
2. 获取元素的行内样式（只能获取到行内样式）
   元素.style.样式名 只能拿到行内样式的值，非行内样式是拿不到值的，样式名中带有中划线的名字，需要写驼峰式
3. 获取元素非行内样式（可以获取行内样式也可以获取非行内样式）
   • 标准浏览器
     window.getComputedStyle(要获取样式的元素).样式名
     返回值：该元素指定样式对应的值
     行内和非行内都能拿到样式值，但是只能在标准浏览器下使用
   • IE低版本
     元素.currentStyle.样式名
     只能在IE低版本使用

操作元素类名

1. className

• 元素.className
• 元素.className = '类名’完全覆盖
• 元素.className += ’ 类名’追加

2. classList

• 每一个元素有一个属性叫做 classList
• 是一个类似数组的集合，里面记录了元素所有的类名
• 添加类名：元素.classList.add(‘要添加的类名’)
• 删除类名：元素.classList.remove(‘要删除的类名’)
• 切换一个类名：元素.classList.toggle(‘要切换的类名’) 有就删除，没有就添加

console.log(ele.className)

获取元素尺寸

1. offsetWidth 和 offsetHeight
   元素.offsetWidth 元素.offsetHeight 内容+padding+border区域的尺寸
   不管盒子模型是什么状态，都是 内容+padding+border区域的尺寸
   当display:none拿不到尺寸 visibility:hidden能拿到
   box-sizing: content-box|border-box|inherit;
   content-box: 宽度和高度分别应用到元素的内容框, 在宽度和高度之外绘制元素的内边距和边框。
   border-box: 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
2. clientWidth 和 clientHeight
   元素.clientWidth 元素.clientHeight 内容+padding区域的尺寸
   当display:none拿不到尺寸 visibility:hidden能拿到

获取元素偏移量

1. offsetLeft 和 offsetTop
   该元素相对于参考元素 左边和上边的距离

获取窗口尺寸

document.documentElement.clientWidth
document.documentElement.clientHeight 可视窗口的高度和宽度，不包含滚动条的尺寸

节点操作

节点：元素节点、文本节点、属性节点、注释节点。。。
节点操作：创建、插入、删除、替换、克隆

1. 获取节点

   1. 获取元素节点
      非常规 htm body head
      常规 document.getElementById getElementsByClassName getElementsByTagName getElementsByName querySelector() querySelectorAll()
   2. 获取节点（包含但不限于元素节点）
      2-1: childNodes
      语法：父节点.childNodes
      得到：是一个伪数组，内部包含该父节点下的所有子一级节点
      2-2：children
      语法：父节点.children
      得到：是一个伪数组，内部包含该父节点下的所有子一级 元素节点
      2-3：firstChild
      语法：父节点.firstChild
      得到：该父节点下的第一个子节点
      2-4：firstElementChild
      语法：父节点.firstElementChild
      得到：该父节点下的第一个子元素节点
      2-5: lastChild
      语法：父节点.lastChild
      得到：该父节点下的最后一个子节点
      2-6: lastElementChild
      语法：父节点.lastElementChild
      得到：该父节点下的最后一个子元素节点
      2-7：previousSibling
      语法：*节点.previousSibling *
      得到：该节点的上一个兄弟节点
      2-8：previousElementSibling
      语法：*节点.previousElementSibling *
      得到：该节点的上一个兄弟元素节点
      2-9：nextSibling
      语法：*节点.nextSibling *
      得到：该节点的下一个兄弟节点
      2-10：nextElementSibling
      语法：*节.nextElementSibling *
      得到：该节点的下一个兄弟元素节点
      2-11: parentNode
      语法：节点.parentNode
      得到：该节点的父亲节点
      2-12: parentElement
      语法：节点.parentElement
      得到：该节点的父亲元素节点
      2-13： atrributes
      语法：节点.atrributes
      得到：是一个类似于数组的数据结构，里面包含该元素的所有属性节点

2. 创建节点

   1. 创建元素节点 document.createElement(‘你要创建的标签名’)
      可以创建w3c规范内的标签，也可以创建自定义标签
      返回值：一个元素节点
   2. 创建文本节点 document.createTextNode(‘文本内容’)
      返回值：就是一个文本节点，不是字符串,是一个对象

3. 插入节点
   把一个节点插入到另一个节点内容，不一定非要插入到页面上

   1. appendChild()
      语法：父节点.appendChild(子节点)
      作用：把该子节点插入到父节点内容，并且排列在最后的位置
   2. insertBefore()
      语法：父节点.insertBefore(子节点，谁的前面)
      作用：把该子节点插入到父节点内部，并且排列在哪一个节点的前面

4. 删除节点

   1. removeChild()
      语法：父节点.removeChild(子节点)
      作用：把该子节点从父节点内移除
   2. remove()
      语法：节点.remove()
      作用：自杀，直接把自己移除

5. 替换节点

   1. replaceChild()
      语法：父节点.replaceChild(换上节点，换下节点)
      作用：在该父节点内，使用换上节点替换掉换下节点

6. 克隆节点
   cloneNode()
   语法：节点.cloneNode(参数)
   参数选填，
   默认是false,表示为不克隆后代节点
   选填是true，表示克隆后代节点
   返回值：该节点复制了一份一模一样的

   节点属性

   nodeType: 表示节点的类型（用数字表示）
   1. 元素节点.nodeType :1
   2. 属性节点： 2
   3. 文本节点：3
   4. 注释节点：8
   nodeName: 每一个节点的名称
   1. 元素节点.nodeName: 大写标签名
   2. 属性节点.nodeName: 属性名
   3. 文本节点.nodeName: #text
   4. 注释节点.nodeName: #comment
   nodeValue: 每一个节点的值
   1. 元素节点.nodeValue: null
   2. 属性节点.nodeValue: 属性值
   3. 文本节点.nodeValue: 文本内容（包含换行和空格）
   4. 注释节点.nodeValue: 注释内容（包含换行和空格）