js document 节点增删改查、样式设计全解析

DOM（Document Object Model）文档对象模型，是HTML和XML文档的编程接口，文档树可以快捷方便的操作整个html页面

一、创建节点

document.createElement()

使用document.createElement可以创建一个节点。注意此节点只在script上下文中生效，必须经过新增节点之后才会在页面中生效。

javascript 复制代码

 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

来查找节点。

javascript 复制代码

<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 选择器来查找和获取文档中的元素集合。

基本语法

javascript 复制代码

let elements = document.querySelectorAll(selectors);

selectors: 一个包含一个或多个 CSS 选择器的字符串
返回值: 返回一个静态的 NodeList 集合（不是实时更新的）

使用示例

1. 基本选择器

javascript 复制代码

// 获取所有段落元素
let paragraphs = document.querySelectorAll('p');

// 获取所有类名为"note"的元素
let notes = document.querySelectorAll('.note');

// 获取ID为"header"的元素
let header = document.querySelectorAll('#header');

2. 组合选择器

javascript 复制代码

// 获取div元素下的所有p元素
let divParagraphs = document.querySelectorAll('div p');

// 获取类名为"active"的li元素
let activeItems = document.querySelectorAll('li.active');

// 获取直接子元素
let directChildren = document.querySelectorAll('ul > li');

3. 属性选择器

javascript 复制代码

// 获取有data-id属性的元素
let dataElements = document.querySelectorAll('[data-id]');

// 获取data-status为"completed"的元素
let completed = document.querySelectorAll('[data-status="completed"]');

4. 伪类选择器

javascript 复制代码

// 获取第一个段落
let firstPara = document.querySelectorAll('p:first-child');

// 获取奇数行的表格行
let oddRows = document.querySelectorAll('tr:nth-child(odd)');

重要特性

返回静态 NodeList:

与 getElementsByClassName 等方法不同，querySelectorAll 返回的 NodeList 是静态的
文档变化时不会自动更新

性能考虑:

复杂选择器可能影响性能
对于大量元素，考虑缩小查询范围

遍历结果:

javascript 复制代码

// 使用forEach遍历
document.querySelectorAll('.item').forEach(item => {
  item.classList.add('highlight');
});

// 或者转换为数组
let itemsArray = Array.from(document.querySelectorAll('.item'));

实际应用场景

表单验证:

javascript 复制代码

// 获取所有必填字段
let requiredFields = document.querySelectorAll('[required]');

动态内容操作:

javascript 复制代码

// 为所有外部链接添加图标
document.querySelectorAll('a[href^="http"]').forEach(link => {
  link.insertAdjacentHTML('beforeend', ' ↗');
});

响应式设计:

javascript 复制代码

// 根据屏幕尺寸调整元素
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 作为备选方案。

的主要区别是前者是静态获取，后者是动态获取，例如：

javascript 复制代码

<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还有更多选择器

javascript 复制代码

    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()

javascript 复制代码

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()

javascript 复制代码

div1.removeChild(document.getElementById("myId"));//从div1这个节点下删除ID为myId的子节点

或者

let ele = document.getElementById("myId");

ele.remove();//直接删除这个节点

五、操作节点内部属性

setAttribute()

getAttribute()

removeAttribute和attributes;

javascript 复制代码

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

javascript 复制代码

let ele =document.getElementById("myId);

let html = ele.innerHTML;//返回节点开始和结束标签内部的所有html内容；

let text = ele.innerTEXT;//返回节点中去除所有标签后的内容

ele.innerHTML="<span>abc</span>";//设置新的元素内部html内容

七、元素样式 style

注意要将css中的样式由下划线改成驼峰形式

javascript 复制代码

let ele =document.getElementById("myId);

ele.style.width="200px";

ele.style.backgroundColor="red";

ele.style.textAlign="center";

js document 节点增删改查、样式设计全解析

一、创建节点

二、查找节点

querySelectorAll 方法详解

基本语法

使用示例

1. 基本选择器

2. 组合选择器

3. 属性选择器

4. 伪类选择器

重要特性

返回静态 NodeList:

性能考虑:

遍历结果:

实际应用场景

表单验证:

动态内容操作:

响应式设计:

浏览器兼容性

三、添加节点

四、删除节点

五、操作节点内部属性

六、节点内容

七、元素样式 style

`querySelectorAll` 方法详解