JS中DOM元素字符节点操作

最新推荐文章于 2022-09-14 21:17:54 发布

原创最新推荐文章于 2022-09-14 21:17:54 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用JavaScript进行DOM元素的操作，包括获取、创建、追加元素及事件绑定等。通过实例演示了如何获取DOM元素、子节点数量、节点类型、节点名称和值，以及如何动态创建和追加DOM元素，并为动态创建的元素添加事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul id="nav">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

js获取dom元素操作，dom元素的事件绑定

操作节点动态创建 dom元素

获取元素

var nav=document.getElementById("nav");

获取子节点
childElementCount 子节点个数
console.log(nav.childElementCount);
获取所有的节点childNodes 集合类型

nodeType 当前节点的类型

var nav = document.getElementById("nav");
    console.log(nav.childNodes[0].nodeType); =>3
    console.log(nav.childNodes[1].nodeType);=>
nodeType 当前节点的类型  3代表符号  元素类型是1

nodeName 节点名称

大写 tolowercase
nodevalue 节点的值
console.log(nav.childNodes);
找子元素
子元素children
console.log(nav.children);
//找同胞兄弟元素
var lilist = document.getElementById("lilist");
nextSibling 下一个节点
console.log(lilist.nextSibling);
nextElementSibling 下一个元素
console.log(lilist.nextElementSibling);
previousSibling上一个节点
console.log(lilist.previousSibling);
previousElementSibling 前一个元素
console.log(lilist.previousElementSibling);
获取父元素里面的第一个或者最后一个
firstElementChild 第一个元素
console.log(nav.firstElementChild);
firstChild 第一个节点
console.log(nav.firstChild);
lastChild 最后一个节点
console.log(nav.lastChild);
lastElementChild 最后一个元素
console.log(nav.lastElementChild);
元素的追加appendChild 追加到当前元素的内容之后
dom元素的动态创建
/* var str="<span>123</span>";
nav.innerText+=str;*/
var s = document.createElement("li");
s.innerHTML = "5";
s.className = "lilast"
//给动态创建的元素添加事件
/* s.οnclick=function (){
console.log(1);
}*/
nav.appendChild(s);