DOM

DOM

节点的名称

节点类型 nodeName

元素节点的 标签名相同

属性节点的 属性名相同

文本节点的 #text

文档节点的 #document

节点的值

节点类型 nodeValue

元素节点的 是 undefifined 或 null

文本节点的 文本本身

属性节点的 属性值

节点的类型

元素类型 nodeType

元素 1

属性 2

文本 3

注释 8

文档 9

节点操作

a)获取节点

通过ID获取节点 【返回具体某个节点】

getElementById

通过标签名获取节点 【返回节点数组，即使只有一个】

getElementsByTagName

通过标签的name值获取节点 【返回节点数组】

getElementsByName

通过class值来获取节点 【返回节点数组】

getElementsByClassName

根据选择器返回找到结果集中的第一个

querySelect(“选择器”)

根据选择器返回找到的结果集，是个节点数组

querySelectAll(“选择器”)

创建节点

简介写法

var oDiv = document.createElement('div'); // 创建元素节点

oDiv.setAttribute('class','wrapper box'); // 为元素节点添加属性及属性值

oDiv.innerHTML = '创建DOM元素的简洁写法';  // 为元素节点设置文本内容

document.body.appendChild(oDiv); // 将创建的元素节点添加到文档中

插入节点

b.在内部添加DOM节点
​ append() 在内部的最后添加DOM
​ appendTo() 将DOM添加到内部的最后
​ prepend() 在内部的最前面添加DOM
​ prependTo() 将DOM添加到内部的最前面
​
c.在外部添加DOM节点
​ before() 在当前DOM前添加（同级添加）
​ insertBefore() 把DOM添加到当前元素之前（同级添加）
​ after() 在当前DOM之后添加（同级添加）
​ insertAfter() 把DOM添加到当前元素之后（同级添加）
１.插入内部的尾部

父节点.appendChild(创建的节点)

２.插入内部的某个前面

父节点.insertBefore(创建的节点,已知的子节点)

替换节点

替换节点是我们将某个子节点替换成我们自己想要的节点。

父节点.replaceChild(新节点，老节点)

克隆节点

d.复制DOM节点
​ clone() 只复制DOM元素
​ clone(true) 复制DOM及绑定在它上面的事件

深度克隆： 包含子节点一起克隆。

浅克隆： 只会将找到的这个节点克隆，子节点不会克隆

需要被复制的节点. cloneNode(true/false);

true: 复制当前节点以及所有子节点 （深度克隆）

false: 仅复制当前节点（浅克隆）

删除节点

删除当前节点及子节点 节点.remove（）

删除字节点 父节点.removeChild(子节点)
remove(dom节点) 在同级DOM中删除指定的DOM
​ empty() 删除当前DOM下的子元素，保留当前DOM

节点属性操作

​ i)获取属性值
​ DOM节点.属性名 // 不能获取用户自定义属性的值
​ DOM节点.getAttribute(属性名) // 获取所有属性（用户自定义属性）的值
​ ii)设置属性值
​ DOM节点.属性名 = 属性值 // 不能设置用户自定义属性的值
​ DOM节点.setAttribute(属性名, 属性值) // 设置所有属性（用户自定义属性）的值
​ iii)删除属性值
​ DOM节点.属性名 = ‘’ // 不能删除用户自定义属性
​ DOM节点.removeAttribute(属性名) // 删除所有属性（用户自定义属性）

DOM节点样式操作

  i)添加类

​ addClass(‘类名’) 添加一个类名
​ 或：
​ addClass(‘类名1 类名2 …’) 添加多个类名
​ ii)删除类
​ removeClass() 清空类名
​ 或：
​ removeClass(‘类名’) 清除指定的类名
​ 或：
​ removeClass(‘类名1 类名2 …’) 清除指定的多个类名
a)操作样式class
​ i)获取class
​ 节点.className 获取节点的所有class
​ 节点.getAttribute(“class”) 获取节点的所有class
​ ii)设置class
​ 节点.className = 值
​ 节点.setAttribute(“class”,值)
​ iii)其它方法
​ 节点.classList.add(value); //为元素添加指定的类
​ 节点.classList.contains(value); // 判断元素是否含有指定的类，如果存在返回true
​ 节点.classList.remove(value); // 删除指定的类
​ 节点.classList.toggle(value); // 有就删除，没有就添加指定类
​ b)操作内联样式
​ i)获取内联样式
​ 节点.style.样式属性名 // 获取某个具体的内联样式
​ 节点.style.cssText // 获取某个节点的所有内联样式，返回字符串
​ ii)设置内联样式
​ 节点.style.样式属性名 = 属性值 // 设置某个具体的内联样式
​ 节点.style.cssText = 属性值或属性值列表 // 设置某个节点的所有内联样式

DOM操作

1）属性操作

​ a.获取属性值
​ attr(属性名)
​ b.设置属性
​ attr(属性名,属性值)
​ c.删除属性
​ removeAttr(属性名)

2）文本内容操作

​ a.获取文本及表单组件内容
​ html() 可以操作标签
​ text() 只能操作文本内容，不操作标签
​ val() 只能用于表单组件
​ b.设置（修改）文本及表单组件内容
​ html(内容)
​ text(内容)
​ val(内容)
​ c.删除文本及表单组件内容
​ html(’’)
​ text(’’)
​ val(’’)