js document 节点增删改查、样式设计全解析

DOMDocument Object Model 文档对象模型是HTML和XML文档的编程接口文档树可以快捷方便的操作整个html页面一、创建节点document.createElement()使用document.createElement可以创建一个节点。注意此节点只在script上下文中生效必须经过新增节点之后才会在页面中生效。let div1document.createElement(div);//创建一个div节点 let div2 document.createElement(div);//创建一个div节点 let text3 document.createTextNode(hello world);//创建一个文本节点二、查找节点使用document.getElementById、document.getElementsByTagName、document.getElementsByClassName、document.getElementByName、document.querySelector和document.querySelectorAll来查找节点。div div idmyId/div div classmy-class/div div classmy-class/div /div let elementdocument.getElementById(myId);//查找id为myId的节点元素若不存在返回null let eleSons element.children();//使用children可以获取节点所有子节点 let elements document.getElementsByTagName(div);//.查看标签为div的节点元素返回节点数组 let elements1document.getElementsByClassName(my-class);//查找类名为myClassde节点元素返回节点数组 let elements2document.getElementsByName(goods);//查找所有具有goods属性的节点返回节点数组。属性查看下方节点内部属性 let element2document.querySelector(#myId);//静态查找id名为myId的节点元素若不存在返回null let element3document.querySelector(.my-class);//静态查找类名为myClass的节点元素若查找道则返回第一个 let elements3 document.querySelectorAll(.my-class);//静态查找类名为myClass的节点元素返回节点数组querySelectorAll方法详解querySelectorAll是 DOM API 中一个强大的方法它允许开发者通过 CSS 选择器来查找和获取文档中的元素集合。基本语法let elements document.querySelectorAll(selectors);selectors: 一个包含一个或多个 CSS 选择器的字符串返回值: 返回一个静态的NodeList集合不是实时更新的使用示例1. 基本选择器// 获取所有段落元素 let paragraphs document.querySelectorAll(p); // 获取所有类名为note的元素 let notes document.querySelectorAll(.note); // 获取ID为header的元素 let header document.querySelectorAll(#header);2. 组合选择器// 获取div元素下的所有p元素 let divParagraphs document.querySelectorAll(div p); // 获取类名为active的li元素 let activeItems document.querySelectorAll(li.active); // 获取直接子元素 let directChildren document.querySelectorAll(ul li);3. 属性选择器// 获取有data-id属性的元素 let dataElements document.querySelectorAll([data-id]); // 获取data-status为completed的元素 let completed document.querySelectorAll([data-statuscompleted]);4. 伪类选择器// 获取第一个段落 let firstPara document.querySelectorAll(p:first-child); // 获取奇数行的表格行 let oddRows document.querySelectorAll(tr:nth-child(odd));重要特性返回静态 NodeList:与getElementsByClassName等方法不同querySelectorAll返回的 NodeList 是静态的文档变化时不会自动更新性能考虑:复杂选择器可能影响性能对于大量元素考虑缩小查询范围遍历结果:// 使用forEach遍历 document.querySelectorAll(.item).forEach(item { item.classList.add(highlight); }); // 或者转换为数组 let itemsArray Array.from(document.querySelectorAll(.item));实际应用场景表单验证:// 获取所有必填字段 let requiredFields document.querySelectorAll([required]);动态内容操作:// 为所有外部链接添加图标 document.querySelectorAll(a[href^http]).forEach(link { link.insertAdjacentHTML(beforeend, ↗); });响应式设计:// 根据屏幕尺寸调整元素 if (window.innerWidth 768) { document.querySelectorAll(.desktop-only).forEach(el { el.style.display none; }); }浏览器兼容性querySelectorAll在现代浏览器中广泛支持包括Chrome 1Firefox 3.5Safari 3.2Opera 10IE 8 (有限支持CSS2选择器)对于旧版IE可能需要使用传统的DOM方法如getElementsByTagName作为备选方案。的主要区别是前者是静态获取后者是动态获取例如div ullia/li/ul /div script let ul1 document.getElementsByTagName(ul); let ul2 document.querySelectorAll(ul) ul1[0].appendChild(document.createElement(li)); ul2[0].appendChild(document.createElement(li)); console.log(ul1.length); // 输出0 console.log(ul2.length); // 输出2 /script当然querySelctor选择器参数需要加.或#所以当我们不再动态修改document时候推荐使用querySelector选择器效率更高否则则使用document.getElementByxx选择保证每次操作都能被更新到文档querySelector还有更多选择器let ele1 document.querySelector(div[name]);//返回具有name属性的第一个div let ele2 document.querySelector(div.my-class);//返回classmy-class的第一个div let ele3 document.querySelector(div#myId);//返回idmyId的第一个div三、添加节点document.appendChild()document.insertBefore()document.preppend()div1.appendChild(div2);//在div节点下尾部添加1个子节点类似于css伪类:after let ele3 document.createElement(p); div1.insertBefore(ele3,div2);//在div节点下的指定节点的前面添加一个节点 let ele4 document.createElement(span); div1.prepend(ele4);//与appendChild相反在div节点下头部添加1个子节点类似于css伪类:before div span/span p/p div/div /div四、删除节点document.removeChild()document.remove()div1.removeChild(document.getElementById(myId));//从div1这个节点下删除ID为myId的子节点 或者 let ele document.getElementById(myId); ele.remove();//直接删除这个节点五、操作节点内部属性setAttribute()getAttribute()removeAttribute和attributes;let ele document.querySelector(div); ele.setAttribute(class,abc);//添加class ele.setAttribute(id,myId);//添加ID ele.setAttribute(style,font-size:24px;border:1px solid grey);//添加样式属性 ele.getAttribute(id);//获取id的属性值 ele.removeAttribute(id);//去掉ID let eleArrtibures ele.attributes;//返回节点的所有属性结合六、节点内容innerHTML和innerTEXTlet ele document.getElementById(myId); let html ele.innerHTML;//返回节点开始和结束标签内部的所有html内容 let text ele.innerTEXT;//返回节点中去除所有标签后的内容 ele.innerHTMLspanabc/span;//设置新的元素内部html内容七、元素样式 style注意要将css中的样式由下划线改成驼峰形式let ele document.getElementById(myId); ele.style.width200px; ele.style.backgroundColorred; ele.style.textAligncenter;