【JavaScript】001.获取和操作页面元素

最新推荐文章于 2023-08-09 20:15:20 发布

Spade_

最新推荐文章于 2023-08-09 20:15:20 发布

阅读量252

点赞数 4

分类专栏： JavaScript 文章标签： javascript js html5

本文链接：https://blog.csdn.net/Spade_/article/details/105902096

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.操作方式

通过 JavaScript操作 HTML 元素

document.getElementById ：通过 id 查找 HTML 元素
getElementsByTagName ：通过标签名查找 HTML 元素
document.getElementsByClassName ：通过类名查找 HTML 元素
document.querySelectorAll ：通过 CSS 选择器查找 HTML 元素
document.forms ：通过 HTML 对象集合查找 HTML 元素

2.示例代码

图片及源码的github链接
001.获取和操作页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>001.获取和操作页面元素</title>
</head>
    <div class="box" id="div2">这是第二个div</div>
    <script type="text/javascript">
        window.onload = function () {
            // 获取元素
            var oDiv = document.getElementById("div1");
            var oA = document.getElementById("link");
            var oDiv2 = document.getElementById("div2");

            // 读取属性
            var sID = oDiv.id;
            alert(sID);

            // 写属性 第一种方式
            oDiv.style.color = "red";
            oA.href = "http://www.baidu.com";
            oA.title = "这是去百度的连接";
            oDiv2.className = "box2";

            // 写属性 第二种方式
            var sMystyle = "color";
            var sValue = '30px';
            oDiv.style[sMystyle] = sValue;

            // 读取元素内容
            var sTr = oDiv.innerHTML;
            alert(sTr);

            // 写元素内容
            oDiv.innerHTML = "被修改了";
            alert(oDiv.innerText);

            // 写元素内容为标签
            oDiv.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>"


        }
    </script>

    <style type="text/css">
        .box{
            font-size: 20px;
            color: aqua;
        }

        .box2{
            font-size: 40px;
            color: red;
        }
    </style>

<body>
    <div id="div1">这是一个div元素</div>
    <a href="#" id="link">这是一个链接</a>
</body>
</html>

Spade_

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】001.获取和操作页面元素

1.操作方式通过 JavaScript操作 HTML 元素document.getElementById ：通过 id 查找 HTML 元素getElementsByTagName ：通过标签名查找 HTML 元素document.getElementsByClassName ：通过类名查找 HTML 元素document.querySelectorAll ：通过 CSS 选择器...
复制链接

扫一扫

专栏目录