javascript之dom查询操作2

冰暮流星2026-04-04 9:00

根据css选择器选取，一般是只能选第一个

语法

document.querySelector(选择器)

javascript 复制代码

let e =document.querySelector("div")

如果先要全选

语法是

document.querySelectorAll(选择器)

根据已有的节点选择子节点

html 复制代码

<ul id="myul">
        <li>l1</li>
        <li>l2</li>
        <li  id="li3">l3</li>
        <li>l4</li>
        <li>l5</li>
        <li>l6</li>
        <li>l7</li>
        <li>l8</li>
        
    </ul>

假定要选择ul标签下面的li标签内容

步骤，先选择父标签，然后选择子标签

javascript 复制代码

let g =document.getElementById("myul")
let l =g.getElementsByTagName("li")
console.log(l)

如果要从子标签查父标签内容，比如先找id值为li3的li标签，再找父标签

javascript 复制代码

let h=document.getElementById("li3")
let l=h.parentNode

这个属于访问属性了，从下面开始介绍的都是访问属性的操作

要查询ul标签下面的所有子节点

语法

父节点.children

javascript 复制代码

let h=document.getElementById("li3")
let l=h.parentNode
console.log(l.children)

如果要查询第一个节点或者查询最后一个节点

语法

第一个节点

父节点.firstElementChild

最后一个节点

父节点.lastElementChild

javascript 复制代码

let h=document.getElementById("li3")
let l=h.parentNode
console.log("获取第一个子节点")
console.log(h.parentNode.firstElementChild)
console.log("获取最后一个子节点")
console.log(h.parentNode.lastElementChild)

要查询当前节点的上一个节点

语法

当前节点.previousElementSibling

javascript 复制代码

let h=document.getElementById("li3")
console.log(h.previousElementSibling)

要查询当前节点的下一个节点

语法

当前节点.nextElementSibling

javascript 复制代码

let h=document.getElementById("li3")
console.log(h.nextElementSibling)