原生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='<span>插入的标签</span>' //可以插入带标签
h1.innertext = '文字' //只能插入文字
 

表单

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


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

获取自定义属性

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

原文地址:https://www.cnblogs.com/xiaoqi2018/p/10447088.html