一、DOM以及DOM是哪种数据结构
文档对象模型(DOM)是 HTML 和 XML 文档的编程接口,提供了文档的结构化的表述
文档对象模型DOM是树结构(DOM树)
二、DOM操作常用API
1.DOM节点操作
1)获取DOM节点:
document.getElementById('id属性值');返回拥有指定id的对象的引用 document.getElementsByClassName('class属性值');返回拥有指定class的对象集合 document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合 document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合 document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素 document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素 document.documentElement; 获取页面中的HTML标签 document.body; 获取页面中的BODY标签 document.all['']; 获取页面中的所有元素节点的对象集合型
2)获取和修改DOM属性:
property:通过property 修改和获取DOM的属性
const pList = document.querySelectorAll('p') const p1 = pList[0] p1.style.width = '100px' console.log(p1.style.width)
attribute:通过setAttribute 修改 和 getAttribute 获取 DOM属性
p1.setAttribute('style','font-size:50px') p1.setAttribute('data-name','imook') console.log(p1.getAttribute('data-name'))
2.DOM结构操作
1.创建节点
三、attribute 和 property 的区别
- property:只能获取或修改 DOM对象自身的属性
- attribute:即可以获取和修改DOM对象自身的属性,也可以获取和修改自定义属性
四、一次插入多个节点,考虑性能