DOM（Document Object Model） 文档对象模型，是HTML和XML文档的编程接口，文档树可以快捷方便的操作整个html页面
一、创建节点
document.createElement()
使用document.createElement可以创建一个节点。注意此节点只在script上下文中生效，必须经过新增节点之后才会在页面中生效。
let div1=document.createElement("div);//创建一个div节点 let div2 =document.createElement("div);//创建一个div节点 let text3= document.createTextNode("hello world");//创建一个文本节点二、查找节点
使用
document.getElementById、document.getElementsByTagName、document.getElementsByClassName、document.getElementByName、document.querySelector和document.querySelectorAll
来查找节点。
<div> <div id="myId"></div> <div class="my-class"></div> <div class="my-class"></div> </div> let element=document.getElementById("myId);//查找id为myId的节点元素，若不存在返回null let eleSons = element.children();//使用children可以获取节点所有子节点 let elements =document.getElementsByTagName("div);//.查看标签为div的节点元素，返回节点数组 let elements1=document.getElementsByClassName("my-class");//查找类名为myClassde节点元素，返回节点数组 let elements2=document.getElementsByName("goods");//查找所有具有goods属性的节点，返回节点数组。属性查看下方节点内部属性 let element2=document.querySelector("#myId");//静态查找id名为myId的节点元素，若不存在返回null let element3=document.querySelector(".my-class");//静态查找类名为myClass的节点元素，若查找道则返回第一个 let elements3 =document.querySelectorAll(".my-class");//静态查找类名为myClass的节点元素，返回节点数组querySelectorAll方法详解
querySelectorAll是 DOM API 中一个强大的方法，它允许开发者通过 CSS 选择器来查找和获取文档中的元素集合。
基本语法
let elements = document.querySelectorAll(selectors);selectors: 一个包含一个或多个 CSS 选择器的字符串- 返回值: 返回一个静态的
NodeList集合（不是实时更新的）
使用示例
1. 基本选择器
// 获取所有段落元素 let paragraphs = document.querySelectorAll('p'); // 获取所有类名为"note"的元素 let notes = document.querySelectorAll('.note'); // 获取ID为"header"的元素 let header = document.querySelectorAll('#header');2. 组合选择器
// 获取div元素下的所有p元素 let divParagraphs = document.querySelectorAll('div p'); // 获取类名为"active"的li元素 let activeItems = document.querySelectorAll('li.active'); // 获取直接子元素 let directChildren = document.querySelectorAll('ul > li');3. 属性选择器
// 获取有data-id属性的元素 let dataElements = document.querySelectorAll('[data-id]'); // 获取data-status为"completed"的元素 let completed = document.querySelectorAll('[data-status="completed"]');4. 伪类选择器
// 获取第一个段落 let firstPara = document.querySelectorAll('p:first-child'); // 获取奇数行的表格行 let oddRows = document.querySelectorAll('tr:nth-child(odd)');重要特性
返回静态 NodeList:
- 与
getElementsByClassName等方法不同，querySelectorAll返回的 NodeList 是静态的 - 文档变化时不会自动更新
- 与
性能考虑:
- 复杂选择器可能影响性能
- 对于大量元素，考虑缩小查询范围
遍历结果:
// 使用forEach遍历 document.querySelectorAll('.item').forEach(item => { item.classList.add('highlight'); }); // 或者转换为数组 let itemsArray = Array.from(document.querySelectorAll('.item'));
实际应用场景
表单验证:
// 获取所有必填字段 let requiredFields = document.querySelectorAll('[required]');动态内容操作:
// 为所有外部链接添加图标 document.querySelectorAll('a[href^="http"]').forEach(link => { link.insertAdjacentHTML('beforeend', ' ↗'); });响应式设计:
// 根据屏幕尺寸调整元素 if (window.innerWidth < 768) { document.querySelectorAll('.desktop-only').forEach(el => { el.style.display = 'none'; }); }
浏览器兼容性
querySelectorAll在现代浏览器中广泛支持，包括：
- Chrome 1+
- Firefox 3.5+
- Safari 3.2+
- Opera 10+
- IE 8+ (有限支持CSS2选择器)
对于旧版IE，可能需要使用传统的DOM方法如getElementsByTagName作为备选方案。
的主要区别是前者是静态获取，后者是动态获取，例如：
<div> <ul><li>a</li></ul> </div> <script> let ul1 = document.getElementsByTagName('ul'); let ul2 = document.querySelectorAll('ul') ul1[0].appendChild(document.createElement('li')); ul2[0].appendChild(document.createElement('li')); console.log(ul1.length); // 输出0 console.log(ul2.length); // 输出2 </script>当然querySelctor选择器参数需要加.或#
所以当我们不再动态修改document时候，推荐使用querySelector选择器，效率更高，否则则使用document.getElementByxx选择，保证每次操作都能被更新到文档
querySelector还有更多选择器
let ele1= document.querySelector('div[name]');//返回具有name属性的第一个div let ele2= document.querySelector('div.my-class');//返回class=my-class的第一个div let ele3= document.querySelector('div#myId');//返回id=myId的第一个div三、添加节点
document.appendChild()
document.insertBefore()
document.preppend()
div1.appendChild(div2);//在div节点下尾部添加1个子节点，类似于css伪类:after let ele3 =document.createElement("p"); div1.insertBefore(ele3,div2);//在div节点下的指定节点的前面添加一个节点 let ele4 =document.createElement("span"); div1.prepend(ele4);//与appendChild相反，在div节点下头部添加1个子节点，类似于css伪类:before <div> <span></span> <p></p> <div></div> </div>四、删除节点
document.removeChild()
document.remove()
div1.removeChild(document.getElementById("myId"));//从div1这个节点下删除ID为myId的子节点 或者 let ele = document.getElementById("myId"); ele.remove();//直接删除这个节点五、操作节点内部属性
setAttribute()
getAttribute()
removeAttribute和attributes;
let ele =document.querySelector("div"); ele.setAttribute("class","abc");//添加class ele.setAttribute("id","myId");//添加ID ele.setAttribute("style","font-size:24px;border:1px solid grey");//添加样式属性 ele.getAttribute("id");//获取id的属性值 ele.removeAttribute("id");//去掉ID let eleArrtibures = ele.attributes;//返回节点的所有属性结合六、节点内容
innerHTML和innerTEXT
let ele =document.getElementById("myId); let html = ele.innerHTML;//返回节点开始和结束标签内部的所有html内容； let text = ele.innerTEXT;//返回节点中去除所有标签后的内容 ele.innerHTML="<span>abc</span>";//设置新的元素内部html内容七、元素样式 style
注意要将css中的样式由下划线改成驼峰形式
let ele =document.getElementById("myId); ele.style.width="200px"; ele.style.backgroundColor="red"; ele.style.textAlign="center";
