原生js的dom操作(常用的整理)

父节点
parentNode

 

第一个子节点 只会获取到元素节点

firstElementChild ★★★★★    ​

 

第一个子节点 (如果有文本节点将会获取到文本节点)

firstChild

​ 

最后一个节点 只会获取到元素节点

lastElementChild ★★★★★

 

最后一个子节点 (如果有文本节点将会获取到文本节点)

lastChild    ​ 

当前节点的后一个（下一个）节点 注：只会获取到元素节点(dom操作推荐使用这种方法,IE9测试兼容,IE8未测试)

nextElementSibling ★★★★★

 

​ ​ 当前节点的后一个（下一个）节点 (如果下一个节点是文本节点的话将获取到文件节点)

nextSibling

​ 当前节点的前一个（上一个）节点 注：只会获取到元素节点(dom操作推荐使用这种方法,IE9测试兼容,IE8未测试)

previousElementSibling ★★★★★

 

​ 当前节点的前一个（上一个）节点 注：如果上一个节点是文本节点的话将获取到文件节点

previousSibling

当前节点的子节点 注：只会获取到元素节点(IE9测试兼容,IE8未测试)

children ★★★★★

当前节点的子节点 注：子节点中如果有文本节点，那么也会同时获取到

childNodes

 

​ 节点（元素）的属性

attributes

      li.attributes           //将会输出li节点的所有属性值     注：是属性和值
      li.attributes.id        //将会输出li节点的id属性值    注：是属性和值

 

​ 把指定属性设置或修改为指定的值。

setAttribute()

  
  li.setAttribute("要修改的属性","修改的值")

 

创建一个节点（元素）

document.createElement("div")

 

 在指定的子节点前面插入新的子节点。

insertBefore()

  
  "父元素".insertBefore("要插入的节点","父元素.children[0]");//将元素插入到父元素的第一个子元素

 

插入新的子节点

appendChild(node)

  
  ul.appendChild(li) //将li节点插入到ul子节点的最后

 

删除子节点

removeChild(node)

  
  ul.removeChild(li) 删除ul的子节点中的li节点

 

删除当前节点  注：IE9不兼容

remove()

 

替换元素节点

  
  //父元素.replaceChild (新元素,旧元素 ) 
  node.replaceChild (newnode,oldnode )

 

插入HTML或者字符串

innerHTML && innerText

  
  h1.innerHTML='插入的标签' //可以插入带标签
  h1.innertext = '文字' //只能插入文字

 

表单

td&&tr 获取到自己所在的索引

  
  td.cellIndex//返回td所在tr的索引
  tr.rowIndex//返回tr所在tbody的索引

 

获取自定义属性

  
  '要获取自定义属性的对象'.getAttribute ( 'data-name' )

来源地址:https://www.liuyjuan.com/197.html