企业官网建设流程全解析

网站ui是平面设计吗,湖北百度seo排名,如何利用阿里云做网站,什么是网站开发时间进度表文章目录一.节点的类型与基础概念二.创建节点1.创建元素节点( createElement )2.创建文本节点( createTextNode )3.创建文档片段( createDocumentFragment )三.添加节点1.追加子节点( appendChild )2.插入节点到指定位置( insertBefore )3.追加多个节点( append ,ES6)四.删除节…文章目录一.节点的类型与基础概念二.创建节点1.创建元素节点( createElement )2.创建文本节点( createTextNode )3.创建文档片段( createDocumentFragment )三.添加节点1.追加子节点( appendChild )2.插入节点到指定位置( insertBefore )3.追加多个节点( append ,ES6)四.删除节点1.删除子节点( removeChild )2.节点自删除( remove,ES6)五.替换节点六.复制节点(克隆节点)七.查找节点关系八.常用节点操作表注意事项总结DOM 节点操作是 JavaScript 操作网页结构的核心,包括创建节点、添加节点、删除节点、替换节点、复制节点和查找节点关系等.这些操作能动态修改网页的 DOM 树结构,实现页面的动态交互.一.节点的类型与基础概念DOM 节点主要分为几类:元素节点(如div、p、ul):nodeType 1属性节点(如class、src):nodeType 2文本节点(如元素内的文本):nodeType 3注释节点:nodeType 8操作节点时,通常以元素节点为核心,以下示例均围绕元素节点展开.二.创建节点1.创建元素节点( createElement )用于创建新的 HTML 元素,是最常用的创建节点方法.// 创建一个 div 元素constnewDivdocument.createElement(div);// 为元素设置属性和内容newDiv.idnew-box;newDiv.classNamecontent;newDiv.textContent这是新创建的节点;2.创建文本节点( createTextNode )用于创建纯文本节点,可附加到元素节点中(也可直接用textContent/innerHTML替代).// 创建文本节点consttextNodedocument.createTextNode(Hello DOM);// 将文本节点添加到新创建的 div 中newDiv.appendChild(textNode);3.创建文档片段( createDocumentFragment )文档片段是轻量级的文档对象,用于批量添加节点,避免频繁操作 DOM 导致的性能损耗(仅需一次 DOM 重绘).// 创建文档片段constfragmentdocument.createDocumentFragment();// 批量创建 li 节点并添加到片段中for(leti0;i5;i){constlidocument.createElement(li);li.textContent列表项${i1};fragment.appendChild(li);}// 将片段一次性添加到 ul 中(片段本身不会被插入,仅插入其子节点)constuldocument.querySelector(ul);ul.appendChild(fragment);三.添加节点将创建好的节点添加到 DOM 树中,常用方法有appendChild、insertBefore.1.追加子节点( appendChild )将节点添加到父节点的子节点列表的末尾.// HTML:div idparent父节点/divconstparentdocument.getElementById(parent);// 创建子节点constchilddocument.createElement(p);child.textContent子节点;// 追加到父节点末尾parent.appendChild(child);// 结果:div idparent父节点p子节点/p/div2.插入节点到指定位置( insertBefore )将节点插入到父节点的某个子节点之前,语法:父节点.insertBefore(新节点, 参考节点).// HTML:div idparentp idold-child旧子节点/p/divconstparentdocument.getElementById(parent);constoldChilddocument.getElementById(old-child);constnewChilddocument.createElement(span);newChild.textContent新子节点;// 将新节点插入到旧子节点之前parent.insertBefore(newChild,oldChild);// 结果:div idparentspan新子节点/spanp idold-child旧子节点/p/div// 若参考节点为 null,则等同于 appendChildparent.insertBefore(newChild,null);3.追加多个节点( append ,ES6)append是比appendChild更灵活的方法,支持同时添加多个节点或文本,且可添加字符串(自动转为文本节点).parent.append(newChild,直接添加文本,anotherChild);四.删除节点1.删除子节点( removeChild )通过父节点删除子节点,语法:父节点.removeChild(子节点).// HTML:div idparentp idchild要删除的节点/p/divconstparentdocument.getElementById(parent);constchilddocument.getElementById(child);// 删除子节点parent.removeChild(child);// 若不确定父节点,可通过 node.parentNode 获取child.parentNode.removeChild(child);2.节点自删除( remove,ES6)更简洁的方法,节点可直接删除自身,无需通过父节点.child.remove();// 直接删除当前节点五.替换节点使用replaceChild将父节点中的某个子节点替换为新节点.语法:父节点.replaceChild(新节点, 旧节点)// HTML:div idparentp idold-node旧节点/p/divconstparentdocument.getElementById(parent);constoldNodedocument.getElementById(old-node);constnewNodedocument.createElement(h3);newNode.textContent新节点;// 替换节点parent.replaceChild(newNode,oldNode);// 结果:div idparenth3新节点/h3/div六.复制节点(克隆节点)使用cloneNode复制现有节点语法:节点.cloneNode(是否深克隆)浅克隆(false,默认):仅复制节点本身,不复制子节点和内容.深克隆(true):复制节点本身及所有子节点和内容.// HTML:div idoriginalp原始内容/p/divconstoriginaldocument.getElementById(original);// 浅克隆:仅复制 div 标签,不包含子节点constcloneShalloworiginal.cloneNode(false);console.log(cloneShallow);// div idoriginal/div// 深克隆:复制 div 及内部的 p 节点constcloneDeeporiginal.cloneNode(true);cloneDeep.idclone;// 避免 id 重复document.body.appendChild(cloneDeep);七.查找节点关系通过节点的属性获取其在 DOM 树中的关系节点,常用属性如下:属性作用parentNode获取当前节点的父元素节点(返回 null 表示无父节点)children获取当前节点的所有子元素节点(HTMLCollection,仅元素节点)childNodes获取当前节点的所有子节点(NodeList,包括文本、注释节点)firstChild获取第一个子节点(包括文本节点)firstElementChild获取第一个子元素节点(仅元素节点)lastChild获取最后一个子节点(包括文本节点)lastElementChild获取最后一个子元素节点(仅元素节点)previousSibling获取上一个兄弟节点(包括文本节点)previousElementSibling获取上一个兄弟元素节点(仅元素节点)nextSibling获取下一个兄弟节点(包括文本节点)nextElementSibling获取下一个兄弟元素节点(仅元素节点)// HTML:ul idlistli项1/lili iditem2项2/lili项3/li/ulconstlistdocument.getElementById(list);constitem2document.getElementById(item2);console.log(item2.parentNode);// ul idlist(父节点)console.log(list.children);// HTMLCollection(3) [li, li#item2, li](子元素节点)console.log(item2.previousElementSibling);// li项1/li(上一个兄弟元素)console.log(item2.nextElementSibling);// li项3/li(下一个兄弟元素)八.常用节点操作表操作场景原生 JS 方法创建元素节点document.createElement()追加子节点parent.appendChild(child)插入到指定位置parent.insertBefore(new, old)删除节点child.remove()/parent.removeChild(child)替换节点parent.replaceChild(new, old)克隆节点node.cloneNode(true)获取父节点node.parentNode获取子元素节点node.children注意事项性能优化批量添加节点时,优先使用文档片段(DocumentFragment)批量操作,减少 DOM 重绘次数.避免在循环中直接操作 DOM,可先拼接节点或使用片段,最后一次性插入.节点存在性检查操作节点前(如删除、替换),需检查节点是否存在,避免报错:constchilddocument.getElementById(child);if(child){child.remove();}克隆节点的 id 问题克隆节点时,若节点有唯一id,需修改克隆后的节点id,避免页面中 id 重复.事件绑定的影响使用remove()删除节点时,原生事件(如addEventListener)会被移除.文本节点的空白问题childNodes会包含空白文本节点(如换行、空格),若只需获取元素节点,优先使用children、firstElementChild等属性.总结原生 JavaScript 节点操作更底层、灵活,适合需要精细控制的场景,需熟悉节点关系和各类方法的语法.核心原则:减少不必要的 DOM 操作,批量操作优先使用文档片段,确保操作前节点存在,避免性能问题和报错.