节点操作
nodeType(节点类型)
元素节点:1 属性节点:2 文本节点:3(包含文字、空格、换行)
父级节点
node.parentNode
:离元素最近的父级节点
子级节点
parentNode.childNodes
:(标准)返回值里面包含了所有的子级节点,包括文本节点parentNode.children
:(非标准,常用)返回所有的子元素节点
parentNode.firstChild
:第一个子节点,包括所有节点类型parentNode.lastChild
:最后一个子节点,包括所有节点类型parentNode.firstElementChild
:第一个子元素节点,ie9以上支持
parentNode.lastElementChild
:最后一个子元素节点,ie9以上支持
parentNode.children[0]
:第一个子元素节点,实际开发写法
parentNode.children[parentNode.children.length - 1]
最后一个子元素节点,实际开发写法
兄弟节点
node.nextSibling
:返回下一个兄弟节点,包括文本节点node.previousSibling
:返回上一个兄弟节点,包括文本节点node.nextElementSibling
:返回下一个兄弟元素节点,ie9以上支持
node.previousElementSibling
:返回上一个兄弟元素节点,ie9以上支持
创建添加节点
document.createElement('tagName')
:动态创建元素节点
node.appendChild(child)
:将一个节点添加到父节点的子节点列表末尾
node.insertBefore(child, 指定元素)
:将一个节点添加到父节点的指定子节点之前
删除节点
node.removeChild(child)
:删除一个子节点,返回删除的节点
// 阻止链接跳转
<a href='javascript:void(0);'></a>
<a href='javascript:;'></a>