广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript如何获取html文件的节点
  • 487

0
分享到

javascript如何获取html文件的节点

2024-04-02 19:04:59 487人浏览 八月长安
摘要

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

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

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

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

案例：

<body>
    <ul >
        <li id="one">一个</li>
        <li name="name1" >二个</li>
        <li class="classname">三个</li>
        <li>四个</li>
    </ul>
</body>

1.1 通过ID

语法：document.getElementById("id属性值")

特点：根据ID值获取元素，返回元素对象；(id唯一)
示例：

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

javascript如何获取html文件的节点

1.2 通过标签名

语法：document.getElementsByTagName("标签名字")

特点：标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象；

示例：

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

javascript如何获取html文件的节点

1.3 通过name值

语法：document.getElementsByName("name属性的值")

特点：根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
示例：

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

javascript如何获取html文件的节点

1.4 通过class

语法：document.getElementsByClassName("类样式的名字")

特点：据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
示例：

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

javascript如何获取html文件的节点

1.5 通过选择器

语法：document.querySelector("选择器的名字")

特点：根据选择器获取元素,返回来的是一个元素对象；
示例：

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

javascript如何获取html文件的节点

1.6 通过所有选择器

语法： document.querySelectorAll("选择器的名字")

特点：据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象；
示例：

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

javascript如何获取html文件的节点

1.7 特殊元素获取

语法：doucumnet.body

特点：返回body元素对象
示例：

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

javascript如何获取html文件的节点

1.8 HTML元素获取

语法：document.documentElement

特点：html元素对象
示例：

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

javascript如何获取html文件的节点

2. 通过父级节点获取

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

<body>
    <div id="digbox">
        <!-- 第一个 -->
        <div id="box1">
            <ul class="ul">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
            </ul>
        </div>
        <!-- 第二个 -->
        <div id="box2">
            <a href="#">这是第二个div</a>
        </div>

        <!-- 第三个 -->
        <div id="box3">
            <a href="#">这是第三个div</a>
        </div>
    </div>
</body>

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

javascript如何获取html文件的节点

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

javascript如何获取html文件的节点

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

javascript如何获取html文件的节点

2.4 获取直接子节点

语法：document.getElementById("id")

特点：获取直接子节点

示例：

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

javascript如何获取html文件的节点

2.5 获取对应属性的节点

语法：document.getElementById("id").getElementsByClassName("ul")；

特点： 获取对应属性的节点(可以是ID，class，属性，标签)常用；

示例：

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

javascript如何获取html文件的节点

3. 通过兄弟节点获取

<body>
    <div id="box">
        <p>这是第一个标签</p>
        <p id="box2">这是第二个标签</p>
       <div ><a href="">这是第三个标签</a></div>
    </div>
</body>

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

javascript如何获取html文件的节点

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

javascript如何获取html文件的节点

4. 通过子级节点获取

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

<body>
    <div id="box">
        <p id="box2">这是第二个标签</p>
    </div>
</body>

语法：document.getElementById("id").parentNode

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

示例：

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

javascript如何获取html文件的节点

JavaScript有什么特点

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

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: javascript如何获取html文件的节点

本文链接: https://www.lsjlt.com/news/88649.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • javascript如何获取html文件的节点
    本篇文章为大家展示了javascript如何获取html文件的节点，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。本教程操作环境：win...
    99+
    2022-10-19
  • JavaScript中怎么获取HTML的DOM节点
    JavaScript中怎么获取HTML的DOM节点，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。1. 通过顶层document...
    99+
    2022-10-19
  • JavaScript如何获取元素和节点
    本文小编为大家详细介绍“JavaScript如何获取元素和节点”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript如何获取元素和节点”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起...
    99+
    2022-10-19
  • javascript如何获取id属性的节点对象
    javascript中获取id属性的节点对象的方法：可以使用“getElementById”方法获取对象数组；语法格式为：“document.getElementById('demo') ”，这里“demo”指的是元素对应的...
    99+
    2022-10-06
  • jquery中如何获取子节点
    在jquery中获取子节点的方法：1.新建html项目，引入jquery；2.创建div模块，添加子节点；3.使用children方法获取子节点；具体步骤如下：首先，新建一个html项目，并在项目中引入jquery；<script t...
    99+
    2022-10-07
  • jquery如何获取父亲节点的第一个子节点
    这篇文章主要讲解了“jquery如何获取父亲节点的第一个子节点”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery如何获取父亲节点的第一个子节点”吧！...
    99+
    2022-10-19
  • html如何获取javascript
    HTML如何获取JavaScriptJavaScript是一种高级编程语言，广泛用于网页设计和前端开发中。HTML是网页的基础语言，可以用于布局和显示内容。HTML和JavaScript通常一起使用，以实现更高级的功能和交互性体验。本文将介...
    99+
    2023-05-14
  • zTree如何获取当前节点的下一级子节点数
    这篇文章主要介绍zTree如何获取当前节点的下一级子节点数，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！使用zTree插件实现树形图中，需要获取当前点击的父节点的子节点数的需求，使用...
    99+
    2022-10-19
  • JavaScript中如何利用DOM节点获取页面元素
    本文小编为大家详细介绍“JavaScript中如何利用DOM节点获取页面元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript中如何利用DOM节点获取页面元素”文章能帮助大家解决疑惑，下面...
    99+
    2022-10-19
  • vue项目中如何获取节点
    这篇文章给大家分享的是有关vue项目中如何获取节点的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。vue项目中如何获取节点？Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定...
    99+
    2022-10-19
  • jquery如何通过name获取节点
    在jquery中通过name获取节点的方法：1.新建html项目，引入jquery；2.创建input输入框，设置name属性；3.添加button按钮，绑定onclick点击事件；4.通过name属性作为对象选择器获取input对象，使用...
    99+
    2022-10-06
  • jQuery插件zTree如何获取一级节点数据
    这篇文章主要介绍了jQuery插件zTree如何获取一级节点数据，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：1、实现代码：<...
    99+
    2022-10-19
  • 如何使用JS获取当前节点的兄弟/父/子节点
    目录JS获取当前节点的方式：获取子节点：获取父节点： 获取兄弟节点总结JS获取当前节点的方式： 通过事件监听器获取当前节点： <button onclick="fun...
    99+
    2023-05-17
    js获取当前节点的父节点 js获取节点的方法 js获取兄弟节点元素
  • ztree如何获取当前选中的节点
    要获取当前选中的节点，可以使用zTree的方法getSelectedNodes()来获取选中的节点信息。 具体操作步骤如下： 获取...
    99+
    2023-10-23
    ztree
  • 如何获取一个网站的cdn节点
    获取一个网站的cdn节点的方法：打开终端，输入命令“ping 域名”的方式，可以得到解析到的IP节点。通过chrome浏览器获取 remote address 操作流程，操作方法：在页面空白区域点击右键 → 检查 → 点击 “network...
    99+
    2022-10-16
  • Javascript DOM的简介,节点和获取元素详解
    目录DOM节点元素节点：文本节点：属性节点：获取元素getElementById（）getElementsByTagName()getElementsByClassName()总结：...
    99+
    2022-11-12
  • vue如何获取某个元素节点
    在vue中获取元素节点的方法：1.新建vue.js项目；2.使用this.$refs.方法标记元素；3.执行代码获取元素节点；具体步骤如下：首先，在vue-cli中创建一个vue.js项目；vue create project-namevu...
    99+
    2022-10-10
  • 微信小程序如何获取节点
    小编给大家分享一下微信小程序如何获取节点，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！wx.createSelectorQuery()基础库 1.4.0 开始支持...
    99+
    2023-06-26
  • javascript怎么获取html中的控件
    这篇文章主要介绍“javascript怎么获取html中的控件”，在日常操作中，相信很多人在javascript怎么获取html中的控件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”javascript怎么获...
    99+
    2023-07-05
  • Javascript中DOM、节点和获取元素的示例分析
    这篇文章给大家分享的是有关Javascript中DOM、节点和获取元素的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。DOM文档：DOM中的“D”，当创建一个网页并把它加载到Web浏览器中时，它把编写的网...
    99+
    2023-06-25
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作