获取节点
1.document
getElementById:
语法:document.getElementById(元素ID)
功能:通过元素ID获取节点
getElementsByName
语法:document.getElementsByName(元素name属性)
功能:通过元素的name属性获取节点
getElementsByTagName
语法:document.getElementsByTagName(元素标签)
功能:通过元素标签获取节点
2.节点指针
firstChild
语法:父节点.firstChild
功能:获取元素的首个子节点
lastChild
语法:父节点.lastChild
功能:获取元素的最后一个子节点
childNodes
语法:父节点.childNodes
功能:获取元素的子节点列表
previousSlibing
语法:兄弟节点.previousSlibing
功能:获取已知节点的前一个节点
parentNode
语法:子节点.parentNode
功能:获取已知节点的父节点
节点操作
1.创建节点
createElement
语法:document.createElement(元素标签)
功能:创建元素节点
createAttribute
语法:document.createAttribute(元素属性)
功能:创建属性节点
createTextNode
语法:document.createTextNode(文本内容)
功能:创建文本节点
2.插入节点
appendChild()
语法:appendChild(所添加的新节点)
功能:向节点的子节点列表的末尾添加新的子节点
insertBefore()
语法:insertBefore(所添加的新节点,已知子节点)
功能:在已知的的子节点前插入一个新的子节点
3.替换节点
replaceChild()
语法:replaceChild(要插入的新元素,将要被替换的老元素)
功能:将某个子节点替换成另一个
4.复制节点
cloneNode
语法:需要被复制的节点.cloneNode(true/false)
功能:创建指定节点的副本
参数:true:复制当前节点及所有子节点
false:仅复制当前节点
5.删除节点
removeChild
语法:removeChild(要删除的节点)
功能:删除指定的节点
属性操作
- 获取属性
getAttribute
语法:元素节点.getAttribute(元素属性名)
功能:获取元素节点中指定属性的属性值 - 设置属性
setAttribute
语法:元素节点.setAttribute(属性名,属性值)
功能:创建或改变元素节点的属性 - 删除属性
removeAttribute
语法:元素节点.removeAttribute(属性名)
功能:删除指定属性