好久不见今天让我们一起来学习document object model文档对象模型。简称DOM它是一种允许程序动态地访问或更新HTML文档的内容、结构和样式且提供一系列函数和对象来实现增删改查操作。一获取DOM节点我们要对页面元素进行修改或增加第一步必须获取对应DOM节点。其核心原理有两点①浏览器的渲染机制决定必须通过DOM操作②DOM节点是内存中对象引用。获取DOM节点有四种方法1通过ID名去获取getElementById作用通过唯一ID精准获取元素性能最高。const p3 document.getElementById(p1); console.log(p1);2.通过标签名去获取getElementsByTagName作用根据指定的 HTML 标签名获取当前文档或指定父元素下所有匹配的元素。body p classpp我是段落1/p p classpp我是段落2/p p classpp idp1我是段落1/p /body3.通过class名去获取getElementsByClassName作用根据指定的 CSS 类名获取当前文档或指定父元素下所有匹配的元素const p2 document.getElementsByClassName(pp); console.log(p3); console.log(p2[1]); console.log(p2[2]); console.log(p2[3]);4.通过CSS选择器获取方法①querySelector(获取单个节点)返回值为匹配到的第一个元素对象如果找不到返回nullconst p1 document.querySelector(.pp);方法②querySelector(获取多个节点)返回值为一个包含所有匹配元素的 静态 NodeList 集合。如果没有匹配项返回一个空的 NodeList而不是null。const p2 document.querySelectorAll(.pp); console.log(p2); console.log(p2[0]); console.log(p2[1]); console.log(p2[2]);二DOM节点的属性修改作用在不刷新页面的情况下动态改变元素的特征、状态、样式或内容从而实现丰富的用户交互和动态数据展示。①查看元素节点的属性并修改属性const p3 document.getElementById(p3); console.log(旧属性值:, p3.className); console.log(旧属性值:, p3.id); p3.className pp jj yy xx; p3.id _p_3; console.log(新属性值:, p3.className); console.log(新属性值:, p3.id);②classList对象的操作const p4 document.getElementById(p4); p4.classList.add(zz); console.log(p4.classList); 4.classList.remove(xx); console.log(p4.classList); console.log(p4.classList.contains(jj)); console.log(p4.classList.contains(zz)); p4.classList.toggle(dark-mode);③其他属性的查看与修改const img document.getElementById(img1); console.log(修改前:, img.src); img.src ./img_src/logo1.png; console.log(修改后:, img.src);三节点的创建、插入与删除1.创建节点script var ele document.createElement(p); var txt document.createTextNode(我是用Javascript创建的新节点); console.log(txt); var attr document.createAttribute(class); attr.value hello world; console.log(attr); /script2.插入节点script ele.appendChild(txt); ele.setAttributeNode(attr); const body_node document.getElementsByTagName(body)[0]; body_node.appendChild(ele); /script3.删除节点script const p3 document.getElementById(p1); body_node.removeChild(p1); /script四小结DOM是连接JS与网页的桥梁。本章博客讲解了DOM核心操作通过ID、标签、类名及CSS选择器精准获取节点利用属性赋值与classList动态修改元素状态与样式掌握节点的创建、插入与删除方法。
HTML DOM 基础：如何正确获取与修改博客标题？
好久不见今天让我们一起来学习document object model文档对象模型。简称DOM它是一种允许程序动态地访问或更新HTML文档的内容、结构和样式且提供一系列函数和对象来实现增删改查操作。一获取DOM节点我们要对页面元素进行修改或增加第一步必须获取对应DOM节点。其核心原理有两点①浏览器的渲染机制决定必须通过DOM操作②DOM节点是内存中对象引用。获取DOM节点有四种方法1通过ID名去获取getElementById作用通过唯一ID精准获取元素性能最高。const p3 document.getElementById(p1); console.log(p1);2.通过标签名去获取getElementsByTagName作用根据指定的 HTML 标签名获取当前文档或指定父元素下所有匹配的元素。body p classpp我是段落1/p p classpp我是段落2/p p classpp idp1我是段落1/p /body3.通过class名去获取getElementsByClassName作用根据指定的 CSS 类名获取当前文档或指定父元素下所有匹配的元素const p2 document.getElementsByClassName(pp); console.log(p3); console.log(p2[1]); console.log(p2[2]); console.log(p2[3]);4.通过CSS选择器获取方法①querySelector(获取单个节点)返回值为匹配到的第一个元素对象如果找不到返回nullconst p1 document.querySelector(.pp);方法②querySelector(获取多个节点)返回值为一个包含所有匹配元素的 静态 NodeList 集合。如果没有匹配项返回一个空的 NodeList而不是null。const p2 document.querySelectorAll(.pp); console.log(p2); console.log(p2[0]); console.log(p2[1]); console.log(p2[2]);二DOM节点的属性修改作用在不刷新页面的情况下动态改变元素的特征、状态、样式或内容从而实现丰富的用户交互和动态数据展示。①查看元素节点的属性并修改属性const p3 document.getElementById(p3); console.log(旧属性值:, p3.className); console.log(旧属性值:, p3.id); p3.className pp jj yy xx; p3.id _p_3; console.log(新属性值:, p3.className); console.log(新属性值:, p3.id);②classList对象的操作const p4 document.getElementById(p4); p4.classList.add(zz); console.log(p4.classList); 4.classList.remove(xx); console.log(p4.classList); console.log(p4.classList.contains(jj)); console.log(p4.classList.contains(zz)); p4.classList.toggle(dark-mode);③其他属性的查看与修改const img document.getElementById(img1); console.log(修改前:, img.src); img.src ./img_src/logo1.png; console.log(修改后:, img.src);三节点的创建、插入与删除1.创建节点script var ele document.createElement(p); var txt document.createTextNode(我是用Javascript创建的新节点); console.log(txt); var attr document.createAttribute(class); attr.value hello world; console.log(attr); /script2.插入节点script ele.appendChild(txt); ele.setAttributeNode(attr); const body_node document.getElementsByTagName(body)[0]; body_node.appendChild(ele); /script3.删除节点script const p3 document.getElementById(p1); body_node.removeChild(p1); /script四小结DOM是连接JS与网页的桥梁。本章博客讲解了DOM核心操作通过ID、标签、类名及CSS选择器精准获取节点利用属性赋值与classList动态修改元素状态与样式掌握节点的创建、插入与删除方法。
