JS 获取 HTML DOM 元素的方法

这篇具有很好参考价值的文章主要介绍了JS 获取 HTML DOM 元素的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box" class="box"></div>
    <div class="box">2</div>
</body>
<script>
    const box1 = document.getElementById("box");
    console.log("box1:", box1);
    const box2 = document.getElementsByTagName("div");
    console.log("box2:", box2);
    const box3 = document.getElementsByClassName("box");
    console.log("box3:", box3);
    const box4 = document.querySelector(".box");
    console.log("box4:", box4);
    const box5 = document.querySelectorAll(".box");
    console.log("box5:", box5);

    console.log("document.body:", document.body);
    console.log("document.documentElement:", document.documentElement);
</script>

</html>

JS 获取 HTML DOM 元素的方法,JS,javascript,html,前端

 文章来源地址https://www.toymoban.com/news/detail-676822.html

到了这里,关于JS 获取 HTML DOM 元素的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 「JavaScript DOM编程必备」元素获取方法大全

            在编写 JavaScript 代码时,我们经常需要获取 HTML 文档中的元素。下面将介绍 JavaScript 中获取元素的几种基本方法。 要通过元素的 ID 获取该元素对象,可以使用 document.getElementById() 方法。该方法接收一个字符串参数,即元素的 ID。例如,如果要获取 ID 为 \\\"example\\\" 的

    2024年02月07日
    浏览(48)
  • Javascript-获取DOM元素的五种方法

    简介 本文主要介绍通过JS获取DOM元素的五种方法: 1.根据id名获取元素:getElementById; 2.根据标签名获取元素:getElementsByTagName,返回一个数组; 3.根据类名获取元素:getElementsBClassName,返回一个数组; 4.根据name属性获取元素:getElementsByName,返回一个数组; 5.根据选择器获取元素:     1.query

    2024年02月16日
    浏览(47)
  • javaScript:如何获取html中的元素对象

    目录 前言: 方法 1.通过id获取元素 2.通过标签名获取元素 3.通过类名class获取元素  获取body的方法 1.document.getElementsByTagName(\\\'body\\\')[0] 2.document.body 相关代码          通过获取HTML中的元素对象,JavaScript可以对网页进行动态交互、更新、响应用户操作、处理表单数据、动态加载

    2024年02月13日
    浏览(43)
  • JS中获取dom元素高度相关方法

    javascript中获取dom元素高度和宽度的属性如下: 网页可视区域宽: document.body.clientWidth 网页可视区域高: document.body.clientHeight 网页可视区域宽: document.body.offsetWidth (包括边距的宽) 网页可视区域高: document.body.offsetHeight (包括边距的高) 网页正文全文宽: document.body.scrollWidth

    2024年02月07日
    浏览(52)
  • js获取dom元素宽高的方法

    这种⽅法,有⼀定局限性,只能取 内联样式 的宽⾼。 这种⽅法,也是有⼀定局限性,不过我们三种常⽤css样式都能获取。但是 只⽀持 IE ,其它浏览器不⽀持 ⽀持所有浏览器,兼容性好 这种⽅法,⼀般⽤于计算元素的绝对位置,根据视窗左上⻆的点来算的。可以拿到四个元

    2024年02月15日
    浏览(51)
  • 最详细!!!前端原神官网 (采用html+css+js+dom+ajax+jquery+swiper+json)完整版

    1.该项目采用了大部分前端知识, 完整的复刻原神官网上所显示的全内容 ,非常全面和详细。希望有兴趣的小伙伴萌可以看看和参考一下!!!该项目可以作为大学生 毕设项目(附带项目答辩ppt) 同时也可以作为计算机专业的小伙伴的 期末大作业 。喜欢的请留下你的足迹

    2024年02月05日
    浏览(64)
  • 如何使用DOM操作HTML元素

    欢迎来到DOM操作的狂欢!你想改变HTML元素的样式或者移动它们?没问题,DOM操作可以轻松实现这些! 首先,我们来谈谈什么是DOM。DOM就像一棵树,它的每个节点代表HTML文档中的一个元素。你想要修改或者操作这些元素,就需要使用DOM。 那么,如何使用DOM呢?首先,你需要获

    2024年02月06日
    浏览(80)
  • JavaScript---获取、修改DOM元素

    1. 获取元素 1.1.  获取第一个元素,一个HTMLElement对象,可以修改   document.querySelector(\\\'css选择器\\\')    1.2. 获取多个元素,一个HTMLElement对象,不可以修改,得到的是伪数组 document.querySelectorAll(\\\'css选择器\\\')   2. 操作元素内容 2.1. 元素.innerText      只显示纯文本,不解析标签 

    2024年02月15日
    浏览(40)
  • JavaScript HTML DOM

    JavaScript HTML DOM(文档对象模型)是一种用于访问和操作HTML文档元素的编程接口。它将HTML文档表示为一个树形结构,使开发人员可以使用JavaScript来操作和修改HTML元素、属性、样式和事件。 通过使用HTML DOM,你可以使用JavaScript来执行以下操作: 1. 访问和修改元素:你可以使用

    2024年02月09日
    浏览(38)
  • javaScript:DOM元素的获取(静态/动态获取)

    目录 一.dom元素获取的意义与使用场景  使用场景(绝大多数js操作都需要dom操作) 总结/疑问解答!  二.DOM元素获取的常用方法(重点) 获取dom元素(动态) document.gerElementbyId() document.gerElementsBytagName() document.gerElementsByclassName() document.gerElementsByname()通过name属性查找元素 获

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包