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添加到当前元素之后(同级添加)
1.插入内部的尾部
父节点.appendChild(创建的节点)
2.插入内部的某个前面
父节点.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(’’)