最新网站开发软件,做行业网站如何采集信息,WordPress 将您重定向的次数过多,江西做网站的文档对象模型#xff08;Document Object Model#xff0c;简称DOM#xff09; DOM 是哪种数据结构 #xff1f; DOM 的本质是浏览器通过HTML代码解析出来的一棵 树。 操作 DOM 常用的 API 有哪些 #xff1f; 获取 DOM 节点
//方式 1#xff1a;通过【id】获取#xf…文档对象模型Document Object Model简称DOM DOM 是哪种数据结构 DOM 的本质是浏览器通过HTML代码解析出来的一棵 树。 操作 DOM 常用的 API 有哪些 获取 DOM 节点
//方式 1通过【id】获取返回目标 DOM 元素
let div1 document.getElementById(box1); //方式 2通过【标签名】获取返回【类数组】
let arr_class_1 document.getElementsByTagName(div); //方式 3通过【样式类名】获取返回【类数组】
let arr_class_2 document.getElementsByClassName(hehe); //方式 4通过【CSS选择器】获取返回符合条件的第一个 DOM 元素
let div1 document.querySelector(selector) //方式 5通过【CSS选择器】获取返回符合条件的所有元素构成的【类数组】
let arr_class_23 document.querySelectorAll(selector) 修改 DOM 节点
property
property 方式按对象属性的方式操作 DOM
// 元素.style.样式名 新样式值
元素.style.width 300px;
// 含 - 的样式名需用驼峰写法
元素.style.backgroundColor red;
// 一次修改多个样式
元素.style.cssText width: 300px;height: 300px;background-color: green;
// 获取样式
元素.style.样式名attribute
attribute 方式使用setAttributegetAttribute 操作 DOM 的属性
// 元素节点.setAttribute(属性名, 新的属性值);
myNode.setAttribute(class,red);
myNode.getAttribute(class) // redproperty 和 attribute 的区别 property【推荐】 修改对象属性不会体现到 html 结构中可能会引起 DOM 重新渲染 更推荐使用 property 是因为浏览器的优化某些修改不会触发 DOM 重新渲染 attribute 修改 html 属性会改变 html 结构一定会引起 DOM 重新渲染
创建 DOM 节点
// document.createElement(标签名)
const newP document.createElement(p)
newP.innerHTML this is newP创建文档片段
const frag document.createDocumentFragment()使用范例如下 插入 DOM 节点
const div2 document.getElementById(div2)
// 插入节点
div1.appendChild(newP)移动 DOM 节点
// 移动节点
const p1 document.getElementById(p1)
div2.appendChild(p1)删除 DOM 节点
父节点.removeChild(子节点)获取父节点
子节点.parentNode获取子节点列表类数组
const div1 document.getElementById(div1)
// 父节点.childNodes
let div1ChildNodes div1.childNodes【考点】如何提升 DOM 的性能 DOM 渲染会阻断 js 的运行且对计算机的资源消耗很大所以需要尽量减少 DOM 操作来提升其性能具体方式如下 对 DOM 的查询做缓存 将频繁的 DOM 操作改为一次性操作 优化前 优化后
