9,dom

DOM
DOM 全称（document object model）文档对象模型（文档指定为对应html文档），对应的DOM就
是操作HTML文档的（增删改查）

document 文档对象

1.获取全局的内容

• document.getElementById() //通过id属性来获取元素，返回的是一个元素 （Element）
• document.getElementsByClassName() //通过class属性名来获取元素 ，返回是一个伪数组（HTMLCollection）
• document.getElementsByTagName() //通过标签名获取元素,返回是一个伪数组  (  HTMLCollection）
• document.getElementsByName() //通过name属性来获取元素返回的是一个伪数组（NodeList）
• document.querySeletorAll() //通过对应的选择器进行获取，返回的是一个伪数组 (NodeList)
• document.querySeletor() //通过选择器获取元素 ，返回的是第一个查找到的元素 （Element）
• document.getRootNode() //获取根节点

2.创建全局的内容

• 创建元素 document.createElement() 返回的是一个元素
• 创建属性节点 document.createAttribute() 返回的是一个属性对象
• 创建文本节点 document.createTextNode() 返回的是一个文本节点对象

 

属性

• document.head //获取head标签
• document.body //获取body标签
• document.forms //获取所有的表单标签 返回的是一个HTMLCollection

 

Element 元素对象

方法

1.获取元素 (document的相关方法 element也可以使用)

2.替换元素（replace）
replaceChild （用一个新的元素来替换里面的子元素）
replaceChildren （用一个元素来替换里面所有的子元素）

3.插入元素 （插入对应的子元素）
append 插入任意的子元素到对应的父元素内 插入到后面
appendChild 插入一个子元素到对应的父元素内容 插入到后面
insertBefore 插入一个元素到另一个子元素的前面

4.删除元素

div.remove() 全部删除 包括自己

5.对于的属性的操作方法

setAttribute不仅可以操作 后续定义的属性 也可以操作本身就有的属性

 

节点操作

节点分类

• 元素节点 （element）
• 属性节点 （attribute）
• 文本节点 （text）

 

节点相关属性

• parentElement 父元素（只能是element）
• parentNode 父节点 （一般也是element）
• childNodes 子节点 （伪数组 （nodeList）文本节点及元素节点）
• children 子元素节点 （HTMLCollection element）
• previousElementSibling 上一个兄弟元素节点 （element 元素节点）
• previousSibling 上一个兄弟节点
  （文本节点 元素节点）
• nextElementSibling 下一个兄弟元素节点 （element 元素节点）
• nextSibling 下一个兄弟节点 （文本节点 元素节点）
• lastChild 最后一个子节点 （文本节点 元素节点）
• firstChild 第一子节点 （文本节点 元素节点）

 

 

相关的方法

• cloneNode 方法 （克隆所有节点）
• append 添加节点
• appendChild 添加节点
• replaceChild 替换节点
• replaceChildren 替换所有的子节点
• insertBefore 插入节点
• removeChild 移除子节点
• 属性节点操作的相关方法
• setAttributeNode 设置属性节点
• getAttributeNode 获取属性节点
• removeAttributeNode 删除属性节点