JavaScript获取节点的方法大全

您所在的位置：网站首页 › js删除dom元素的两种方法有哪些区别 › JavaScript获取节点的方法大全

JavaScript获取节点的方法大全

2024-07-15 00:26| 来源: 网络整理| 查看: 265

1. 通过document节点获取（直接获取）

案例：

一个二个三个四个

1.1 通过ID 语法：document.getElementById（“id属性值”）；特点：根据ID值获取元素，返回元素对象；(id唯一) 示例：

var one=document.getElementById("one"); console.log(one);

在这里插入图片描述

1.2 通过标签名语法：document.getElementsByTagName(“标签名字”);；特点：标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象；示例：

var li=document.getElementsByTagName("li") console.log(li);

在这里插入图片描述

1.3 通过name值语法：document.getElementsByName(“name属性的值”)；特点：根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象示例：

var name1=document.getElementsByName("name1")[0]; console.log(name1);

在这里插入图片描述

1.4 通过class 语法：document.getElementsByClassName(“类样式的名字”)；特点：据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象示例：

var classname=document.getElementsByClassName("classname")[0]; console.log(classname);//

在这里插入图片描述

1.5 通过选择器语法：document.querySelector(“选择器的名字”); 特点：根据选择器获取元素,返回来的是一个元素对象；示例：

var que1=document.querySelector("#one"); console.log(que1); //

在这里插入图片描述

1.6 通过所有选择器语法： document.querySelectorAll(“选择器的名字”) 特点：据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象；示例：

var queall=document.querySelectorAll("li"); console.log(queall); //

在这里插入图片描述

1.7 特殊元素获取语法：doucumnet.body 特点：返回body元素对象示例：

var body=document.body ; console.log(body);

在这里插入图片描述

1.8 HTML元素获取语法：document.documentElement 特点：html元素对象示例：

var dc=document.documentElement ; console.log(dc);

在这里插入图片描述

2. 通过父级节点获取

（一般在已经获取父节点，通过父节点来获取子字节）

一二三四五这是第二个div 这是第三个div

2.1 获取第一个节点语法：document.getElementById(“test”).firstElementChild; document.getElementById(“test”).firstChild; 特点：获取第一个节点示例：

var box=document.getElementById("digbox").firstElementChild; console.log(box); var box1=document.getElementById("digbox").firstChild; console.log(box1);

在这里插入图片描述

2.2 获取最后一个子节点语法：document.getElementById(“test”).lastElementChild;； document.getElementById(“test”).lastChild; 特点：获取最后一个子节点示例：

var box2= document.getElementById("digbox").lastElementChild; console.log(box2); var box3= document.getElementById("digbox").lastChild; console.log(box3);

在这里插入图片描述

2.3 获取所有子节点语法：document.getElementById(“test”).children[0]; document.getElementById(“test”).childNodes; document.getElementById(“test”).childElementCount; 特点：获取所有子节点示例：

var box4= document.getElementById("digbox").children[0]; console.log(box4); var box5= document.getElementById("digbox").childNodes; console.log(box5); var box6= document.getElementById("digbox").childElementCount; console.log(box6);

在这里插入图片描述

2.4 获取直接子节点语法：document.getElementById（“id”）；特点：获取直接子节点示例：

var box7= document.getElementById("digbox"); console.log(box7);

在这里插入图片描述

2.5 获取对应属性的节点语法：document.getElementById（“id”）.getElementsByClassName(“ul”)；特点：获取对应属性的节点(可以是ID，class，属性，标签)常用；示例：

var box8= document.getElementById("digbox").getElementsByClassName("ul"); console.log(box8);

在这里插入图片描述

3. 通过兄弟节点获取这是第一个标签这是第二个标签这是第三个标签

3.1 获取当前节点的前一个节点

语法：document.getElementById（“id”）.previousElementSibling； document.getElementById（“id”）.previousSibling 特点：返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。示例：

var box1=document.getElementById("box2").previousElementSibling; console.log(box1); var box2=document.getElementById("box2").previousSibling; console.log(box2);

在这里插入图片描述

3.2 获取当前节点的后一个节点

语法：document.getElementById（“id”）.nextSibling； document.getElementById（“id”）.nextElementSibling；

特点：返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。示例： var box3=document.getElementById("box2").nextElementSibling; console.log(box3); var box4=document.getElementById("box2").nextSibling; console.log(box4);

在这里插入图片描述

4. 通过子级节点获取

4.1 通过子节点获取父级节点

这是第二个标签

语法：document.getElementById（“id”）.parentNode；特点：返回指定节点的父节点,如果指定节点没有父节点，则返回 null。示例：

var box=document.getElementById("box2").parentNode; console.log(box);

在这里插入图片描述

【本文地址】

公司简介

联系我们