JavaScript 获取 HTML 元素的骚操作

最新推荐文章于 2023-07-17 08:45:00 发布

御弟謌謌

最新推荐文章于 2023-07-17 08:45:00 发布

阅读量133

点赞数

分类专栏：前端文章标签： js javascript

本文链接：https://blog.csdn.net/abraham_ly/article/details/109630256

版权

前端专栏收录该内容

52 篇文章 4 订阅

订阅专栏

JavaScript 获取 HTML 元素的骚操作

1、 HTML DOM

文档对象模型 (Document Object Model)，是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 HTML DOM 是关于如何虎丘、修改、添加、删除 HTML 元素的标准。我么用 JavaScript 对网页进行的所有操作都是通过DOM进行的。

2、Document 对象

每个载入浏览器的 HTML文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document 对象使 Window(窗口) 对象的一部分，所以可以通过 window.document 属性对其进行访问。

函数	说明
getElementById	通过元素的id值获取对应的元素，只能获取当前文档中的一个指定的元素
getElementByName	通过元素的name属性值获取对应的元素，返回一个包含当前文档中所有与之匹配的name属性值的元素的NodeList。如果没有与之匹配的则返回一个空的NodeList
getElementByTagName	通过元素的标签名称获取与之对应的元素，返回一个包含当前文档中所有与TagName相匹配的元素的HTMLCollection。如果没有与之匹配的则返回一个空的HTMLCollection
getElementByClassName	通过元素的Class属性值获取与之匹配的元素，返回一个包含当前文档中所有与Class相匹配的元素的HTMLCollection。如果没有与之匹配的则返回一个空的HTMLCollection

3、获取的方法

通过Id属性获取

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>

<body>
    <h4 id="h">我是H4</h4>
    <script>
        window.onload = function() {
            console.log(document.getElementById("h"))
        }
    </script>
</body>

</html>

通过Name属性获取

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>

<body>
    <input type="text" name="text">
    <script>
        window.onload = function() {
            console.log(document.getElementsByName("text"))
        }
    </script>
</body>

</html>

通过TagName属性获取

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>

<body>
    <p class="p1">我是p标签</p>
    <script>
        window.onload = function() {
            console.log(document.getElementsByTagName("p"))
        }
    </script>
</body>

</html>

通过ClassName获取

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>

<body>
    <p class="p1">我是p标签</p>
    <script>
        window.onload = function() {
            console.log(document.getElementsByClassName("p1"))
        }
    </script>
</body>

</html>

御弟謌謌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 获取 HTML 元素的骚操作

JavaScript 获取 HTML 元素的骚操作1、 HTML DOM 文档对象模型 (Document Object Model)，是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 HTML DOM 是关于如何虎丘、修改、添加、删除 HTML 元素的标准。我么用 JavaScript 对网页进行的所有操作都是通过DOM进行的。2、Document 对象每个载入浏览器的 HTML文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对
复制链接

扫一扫