第十二章 文档对象模型（DOM）的介绍和使用

一、DOM介绍

1. DOM：文档对象模型，document，提供了网页的相关操作。
   • document是window的子对象之一，但是DOM不属于BOM
2. DOM的文档结构是由众多成份组成的一个树状关系模型，在这个关系模型中的任何一个成份都是节点，每一个节点的数据类型，都是对象
   • 元素节点
   • 属性节点
   • 文本节点
   • 注释节点
   • 根节点

• 操作流程：选择器->属性，样式，内容，元素

二、节点选择器

1. 元素节点选择器：
   • document.getElementById("id名")
   • document.getElementsByClassName("class名")
   • document.getElementsByTagName("tag名")
   • document.querySelector("css选择器")
   • document.querySelectorAll("css选择器")
   • 父元素.children
   • 父元素.firstElementChild
   • 父元素.lastElementChild
   • 子元素.parentNode
   • 元素.previousElementSibling
   • 元素.nextElementSibling
   • document.documentElement
   • document.head
   • document.body
   • document.forms
   • document.forms[0].elements
   • 注意：选择到的元素是单个？还是多个？
2. 其他节点选择器（了解）
   • 父元素.childNodes
   • 父元素.firstChild
   • 父元素.firstChild
   • 元素.previousSibling
   • 元素.nextSibling
   • 元素.attributes
   • document
3. 节点过滤
   • 节点.nodeType
   • 节点.nodeName
   • 节点.nodeValue

三、属性操作

1. html属性：写在标签上的属性
   • html属性语法：<div 属性名="属性值"></div>
   • 操作语法
     • 自定义：
       • 获取：元素.getAttribute("属性名")
       • 设置：元素.setAttribute("属性名","属性值")
       • 删除：元素.removeAttribute("属性名")
     • 内置：
       • 对象语法
       • 元素.xxxAttribute()系列
2. js属性：没有写在标签上的属性
   • 内置或自定义都可以直接使用对象的操作语法，进行操作
3. 一些内置属性
   • 样式属性：元素.style
   • class属性：元素.className
   • classList属性：元素.classList，数组形式
     • 添加class：元素.classList.add("class名")
     • 删除class：元素.classList.remove("class名")
     • 切换class：元素.classList.toggle("class名")
   • 内容属性：元素.innerHTML
     • 可以解析标签
   • 内容属性：元素.innerText
     • 不可以解析标签
   • 表单控件内容：元素.value
     • 表单控件的值
   • HTML5新增的自定义属性：元素.dataset.属性名
     • 对象类型，记录了当前元素身上所有的 data- 开头的自定义属性
     • 可以使用对象语法进行操作

四、样式操作

1. 设置：
   • 行内样式操作
     • 语法：元素.style.css属性名 = "css属性值"
2. 获取：
   • 非行内样式操作
     • 正常浏览器的语法：getComputedStyle(元素).css属性名
     • IE低版本浏览器的语法：元素.currentStyle.css属性名
   • 解决兼容

function getStyle(ele, attr){
    
    
  if( ele.currentStyle ){
    
    
    return ele.currentStyle[attr];
	}else{
    
    
    return getComputedStyle(ele)[attr];
  }
}

五、尺寸类属性的快速获取

1. 元素.clientWidth/Height
   • cont + padding
2. 元素.offsetWidth/Height
   • cont + padding + border
3. 元素.scrollWidth/Height
   • cont + padding + 可滚动的尺寸
4. 元素.offsetLeft/Top
   • 相对于包含块偏移的距离
5. 元素.scrollLeft/Top
   • 滚走了的距离，可设置
6. 补充：元素.offsetParent
   • 获取元素的偏移量参考父级（包含块）
   • 一个元素 绝对定位 的时候，它是根据谁来进行定位的，那么这个元素的偏移量参考父级就是谁

六、标签操作

1. 创建：var ele = document.createElement("标签名")
   • 插入节点：父元素.appendChild( ele );
2. 删除：
   • 元素.remove()
   • 父元素.removeChild(子元素)
3. 修改：
   • 元素.outerHTML = "<span>"+ 原标签内容 +"</span>"
4. 替换：
   • 父元素.replaceChild(新节点, 旧节点)
5. 克隆：
   • 元素.cloneNode(布尔)
     • 为true时表示克隆所有后代节点
6. 获取：选择器
7. 补充：
   • 创建文本节点：document.createTextNode('要写的文本内容')
   • 插入到指定节点之前：父元素.insertBefore(新节点, 基准节点);

八、练习

1. 选项卡切换
2. 使用html+css+js，模拟input的placeholder
3. 使用html+css+js，模拟alert弹出框功能
4. 使用html+css+js，模拟checkbox复选框
5. 使用html+css+js，模拟radio单选框
6. 密码强度
   • 数字，字母，特殊字符
   • 任意一种，弱
   • 任意两种，中
   • 三种，强
7. 模拟聊天对话框
8. 瀑布流布局