JS中获取以及操作DOM中的节点

获取DOM中节点

节点的作用:节点是描述页面中每一部分之间的关系的。

所以我们就要通过相关的属性和方法获取到页面中所有的节点。

childNodes

获取当前元素的所有子节点(节点集合:类数组)
在这里需要注意的是:不仅仅是元素节点,注释节点、文本节点等都会包含在内,格外需要注意的是 子节点只在儿子辈分中查找!!!

children

获取所有的元素子节点(元素集合)
在IE6~8中不兼容(会把注释节点当做元素节点获取到)

parentNode

获取当前元素的父节点(元素对象)

previousSibling / nextSibling

previousSibling :获取当前节点的上一个哥哥节点(不一定是元素节点也可能是文本或者注释节点)
nextSibling: 获取当前节点的下一个弟弟节点

previousElementSibling / nextElementSibling

previousElementSibling :获取当前节点的上一个哥哥元素节点
nextElementSibling:获取当前节点的下一个弟弟元素节点

在这里需要注意的是:在IE6~8下不兼容

firstChild / lastChild

firstChild:当前元素所有子节点中的第一个(也不一定是元素节点,也可能是文本或者注释)
lastChild:当前元素所有子节点中的最后一个。

firstElementChlid / lastElementChild

firstElementChild:获取当前元素所有子元素节点中的第一个。
lastElementChild:获取当前元素所有子元素节点中的最后一个。
在这里主要注意的是:IE6~8中不兼容

操作DOM中的节点

所谓操作DOM中的节点,其实就是DOM的增、删、改

document.createElement

在JS中动态创建一个HTML标签
在项目中,我们偶尔会在JS中动态的创建HTML标签,然后增加到页面中

appendChild

容器.appendChild(新元素)
把当前创建的新元素添加到容器的末尾位置

insertBefore

容器.insertBefore(新元素,老元素)
当前容器中,把新创建的元素增加到老元素之前

removeChild

容器.removeChild(元素)
把当前元素中的某一个元素移除掉。

replaceChild

容器.replaceChild(新元素,老元素)
当前容器中,拿新元素替换老元素

cloneNode

元素.cloneNode(false/true)
把原有的元素克隆一份一模一样的。false:只克隆当前元素本身。true:深度克隆,把当前元素本身以及元素的所有后代都进行克隆

[set/get/remove]Attribute

给当前元素设置、获取、移除属性。(一般操作的是它的自定义属性

box.setAttribute(‘myIndex’,0) 
box.getAttribute(‘myIndex’) 
box.removeAttribute(‘myIndex’)
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值