企业官网建设流程全解析

禹城网站定制,wordpress 运营商广告,做好中心网站建设工作总结,佛山百度seo点击软件你以为前端只是写写样式#xff1f;DOM操作才是让网页“活”起来的魔法#xff01;#x1f3af; 什么是DOM#xff1f; 想象一下#xff0c;你在玩乐高积木。每个积木块就像网页上的一个元素#xff08;按钮、图片、文字等#xff09;#xff0c;而**DOM#xff08;文…你以为前端只是写写样式DOM操作才是让网页“活”起来的魔法 什么是DOM想象一下你在玩乐高积木。每个积木块就像网页上的一个元素按钮、图片、文字等而**DOM文档对象模型**就是这份乐高搭建说明书告诉浏览器如何组织这些积木。// 简单说DOM是HTML的编程接口// HTML是静态的代码DOM是动态的对象树 DOM树网页的家族图谱每个网页都是一棵倒置的“家族树”html是爷爷body是爸爸div、p是孩子们文本和属性是孙辈们!-- 看这个简单的HTML --htmlheadtitle我的网站/title/headbodydividapph1欢迎/h1button点击我/button/div/body/html对应的DOM树是这样的Documenthtmlheadbodytitle文本: 我的网站div#apph1button文本: 欢迎文本: 点击我️ DOM操作四板斧1️⃣查找元素找到你要操作的积木// 方法一按ID找最精确constappDivdocument.getElementById(app);// 方法二按CSS选择器找最常用consttitledocument.querySelector(h1);constbuttonsdocument.querySelectorAll(button);// 方法三按类名找constitemsdocument.getElementsByClassName(item);// 方法四按标签名找constdivsdocument.getElementsByTagName(div);2️⃣修改内容给积木换颜色// 改文本title.textContent你好世界;title.innerHTMLspan你好/span世界;// 可以包含HTML// 改样式appDiv.style.backgroundColorskyblue;appDiv.style.fontSize20px;// 改属性constimgdocument.querySelector(img);img.setAttribute(src,new-image.jpg);img.alt新图片;3️⃣增删元素添加或移除积木// 创建新元素constnewButtondocument.createElement(button);newButton.textContent我是新的;// 添加到页面appDiv.appendChild(newButton);// 加在最后appDiv.insertBefore(newButton,title);// 插在title前面// 移除元素appDiv.removeChild(title);// 移除标题newButton.remove();// 更简单的方法4️⃣事件处理让积木“活”起来// 添加点击事件newButton.addEventListener(click,function(event){console.log(按钮被点了);this.style.backgroundColorred;// 事件冒泡从内到外传递event.stopPropagation();// 阻止冒泡});// 常见事件类型// click - 点击// mouseenter/mouseleave - 鼠标进出// keydown/keyup - 键盘按下/松开// submit - 表单提交// load - 页面加载完成 DOM操作完整流程图开始DOM操作第一步查找元素getElementById最精确querySelector最灵活其他选择器第二步要做什么修改内容/样式添加/删除元素添加事件监听更新界面用户交互完成 实战创建动态待办清单让我们用DOM操作做一个简单的待办事项应用!DOCTYPEhtmlhtmlheadstyle.completed{text-decoration:line-through;color:gray;}li{margin:10px 0;cursor:pointer;}/style/headbodyh2我的待办清单/h2inputidtodoInputtypetextplaceholder输入新任务buttonidaddBtn添加/buttonulidtodoList/ulscriptconsttodoInputdocument.getElementById(todoInput);constaddBtndocument.getElementById(addBtn);consttodoListdocument.getElementById(todoList);// 添加任务addBtn.addEventListener(click,(){consttaskTexttodoInput.value.trim();if(taskText){addTodoItem(taskText);todoInput.value;// 清空输入框}});// 按回车也可以添加todoInput.addEventListener(keypress,(e){if(e.keyEnter)addBtn.click();});functionaddTodoItem(text){// 创建列表项constlidocument.createElement(li);li.textContenttext;// 点击标记完成/未完成li.addEventListener(click,function(){this.classList.toggle(completed);});// 添加删除按钮constdeleteBtndocument.createElement(button);deleteBtn.textContent删除;deleteBtn.style.marginLeft10px;deleteBtn.addEventListener(click,function(e){e.stopPropagation();// 阻止触发li的点击事件this.parentElement.remove();});li.appendChild(deleteBtn);todoList.appendChild(li);}// 添加示例任务addTodoItem(学习DOM操作);addTodoItem(写博客文章);addTodoItem(喝杯咖啡休息一下);/script/body/html 性能小贴士减少DOM操作次数多次操作合并成一次// 不好操作了3次DOMelement.style.colorred;element.style.fontSize20px;element.style.margin10px;// 好只操作1次element.style.cssTextcolor: red; font-size: 20px; margin: 10px;;使用文档片段批量添加元素时constfragmentdocument.createDocumentFragment();for(leti0;i100;i){constlidocument.createElement(li);li.textContent项目${i};fragment.appendChild(li);}list.appendChild(fragment);// 只触发一次重排事件委托减少事件监听器数量// 不好每个按钮都加监听器buttons.forEach(btnbtn.addEventListener(click,handleClick));// 好父元素一个监听器搞定container.addEventListener(click,function(e){if(e.target.tagNameBUTTON){handleClick(e.target);}}); 总结DOM操作就像是给网页赋予生命的魔法查找是找到正确的积木修改是调整积木的外观增删是搭建或拆除结构事件是让积木能响应用户记住DOM操作是昂贵的性能角度所以要聪明地使用它。就像真正的乐高大师知道何时快速搭建何时精心调整。现在去创造属于你的动态网页吧 动手挑战用纯DOM操作创建一个简单的图片轮播组件。提示你需要createElement、appendChild、setAttribute和事件监听器