目录
  1. 1. 原生js节点操作
    1. 1.1. 节点属性值
    2. 1.2. 节点方法
原生js节点操作

原生js节点操作

节点属性值

1 获取上级节点

1
2
Node.parentNode     //返回父节点
Node.ownerDocument //返回祖先节点

2 获取下级节点

1
2
3
4
Node.childNodes     //返回相邻后代的元素节点和文本节点对象的集合(换行算作文本节点)
Node.children //返回相邻后代的元素节点集合
Node.firstChild //返回相邻后代第一个的元素节点
Node.lastChild //返回相邻后代最后一个的元素节点

3 获取同级节点

1
2
Node.previousSibling   // 返回前一个节点
Node.nextSibling // 返回后一个节点

节点方法

1 创建

1
2
3
document.createElement('li')           //创建元素节点
document.createAttribute("class") //创建属性节点
document.createTextNode("Hello World") //创建文本节点

2 复制

1
2
3
var newNode=Node.cloneNode(Boolean)    
//Boolean:true 返回Node及其全部子孙节点
//Boolean:false 只返回Node节点

3 增加

1
2
3
4
parentNode.appendChild(newNode)     //增加节点至子节点末尾
parentNode.insertBefore(newNode,targetNode) //增加节点至targetNode之前
parentNode.innerHTML+='<li></li>' //增加元素节点至子节点末尾
parentNode.innerText+='Hello World' //增加文本节点至子节点末尾

4 删除

1
2
parentNode.removeChild(childNode)     //已知父节点
node.parentNode.removeChild(childNod) //未知父节点

5 获取

1
2
3
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
文章作者: Niko Yu
文章链接: https://www.nikoyu.asia/%E5%8E%9F%E7%94%9Fjs%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Niko Yu Blog
打赏
  • 微信支付
  • 支付宝
  • 私人微信

评论