导航：首页 > 开发技术 >

javascript如何获取html文件的节点

发表于：2025-01-21 作者：千家信息网编辑

千家信息网最后更新 2025年01月21日，本篇文章为大家展示了javascript如何获取html文件的节点，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。本教程操作环境：windows7系统、java

千家信息网最后更新 2025年01月21日javascript如何获取html文件的节点

本篇文章为大家展示了javascript如何获取html文件的节点，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

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. 通过父级节点获取

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

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").nextSiblingdocument.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")[xss_clean]

特点：返回指定节点的父节点,如果指定节点没有父节点，则返回 null。

示例：

  var box=document.getElementById("box2")[xss_clean];  console.log(box);

JavaScript有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

上述内容就是javascript如何获取html文件的节点，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。

很赞哦！