老张博客

前端必须掌握的DOM节点操作方法!

发布时间:11个月前热度: 650 ℃评论数:

DOM节点


DOM使用对象的表示方式来表示对应文档的结构和属性。


DOM节点分为元素节点、文本节点、注释节点等。


获取DOM节点


方法一:通过getElementByID获取节点,例如获取文档中id为yiguo的节点并将其保存在变量yiguo中,可以使用的语句为var yiguo=document.getElementByID(‘yiguo’);得到的是唯一的一个标签对象,因为文档中的ID是唯一的。


方法二:通过getElementByTagName获取节点,获取指定标签名的元素或元素集合。document.getElementByTagName(‘p’)可以得到文档中所有的p标签,使用document.getElementByTagName(‘p’)[i],可以逐一访问获取到的p标签。


方法三:通过getElementByClassName获取节点,获取文档中指定class名的标签。例如document.getElementByClassName(‘yiguo’)可以获取到文档中所有的class=yiguo的标签。


方法四:通过querySelector/querySelectorAll获取节点,获取到的是符合传入css选择器的第一个元素或者全部元素。


DOM节点遍历


获取到一个唯一的节点时,可以通过节点间的直接关系,来遍历DOM树。


var yiguo=document.getElementByID(‘yiguo’);


yiguo.parentNode;//获取父节点


yiguo.firstChild/yiguo.lastChild;//获取第一个或者最后一个子节点


yiguo.child Nodes/ yiguo.children;//获取所有的子节点/所有的子(元素节点)


yiguo.previousSibling/ yiguo.nextSibling;//获取前一个/后一个兄弟节点


yiguo.previousElement Sibling/yiguo.nextElementSibling;//获取前一个/后一个兄弟元素节点


创建DOM节点


yiguo=document.creatElement(tagname);//创建指定标签名称的节点


修改DOM节点


textContent获取节点及其后代节点的文本内容。


yiguo.textContent;//一锅


yiguo.textContent=“大锅”;//将一锅修改为大锅


innerText获取节点及其后代节点的文本内容。使用方法与textContent一样,但是兼容的浏览器不一致。


插入DOM节点


appendChild方法在指定元素后追加一个元素节点。


var h2=document.creatElement(h2);


h2.innerText=“一锅”;


yiguo.appendChild(h2);//在id为yiguo的标签下插入一个人h2标签,标签内容为“一锅”。


insretBefore方法在指定的节点前面插入一个节点。


yiguo.insertBefore(ul,h2)//在id为yiguo的标签中,h2标签前插入一个ul标签。


删除DOM节点


removeChild方法删除节点。


yiguo.removeChild(h2);//删除h2节点 等价于h2.parentNode.removeChild(h2);


innerHTML


innerHTML表示节点的HTML内容,可以批量创建节点、插入节点、删除节点。

JS,DOM,前端

手机扫码访问