JavaScript学习笔记之通过DOM操作html

最新推荐文章于 2020-07-13 11:07:19 发布

秋忆夏伤

最新推荐文章于 2020-07-13 11:07:19 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52494087

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <!-- 1、DOM 改变 HTML 输出流： -->
    <p>Hello</p>
    <button οnclick="Test()">按钮</button>    <!-- 给<button>标签添加一个按钮点击事件(Test()). -->
    <script>
        function Test() {
            document.write("World");         // 当按钮点击事件触发时，DOM会覆盖HTML输出流，即页面上会输出World，
                                             // 覆盖掉<p>标签中的 Hello。
        }
    </script>

    <!-- 2、寻找元素，改变html内容： -->
    <p id="pid">我是标题</p>
    <button οnclick="Demo()">按钮</button><br /><br />
    <script>
        function Demo() {
            var id = document.getElementById("pid");         // 通过 id 找到 p元素；
            id.innerHTML = "我是新的标题";                    // 改变 p元素 的值；
        }
    </script>

    <!-- 3、寻找元素，修改 html元素的属性： -->
    <a id="aid" href="http://www.baidu.com">超链接</a><br />
    <button οnclick="ChangeHref()">按钮</button><br /><br />

    <img src="1.jpg" id="iid" /><br />
    <button οnclick="ChangeSrc()">按钮</button><br /><br />

    <script>
        function ChangeHref() {
            var id = document.getElementById("aid");    // 通过id获取html元素；
            id.href = "https://zj.nuomi.com/";          // 修改a标签的href属性；
            alert("a标签的属性以改变！");
        }

        function ChangeSrc() {
            var id = document.getElementById("iid");
            id.src = "2.jpg";
            alert("img标签的属性以改变！");
        }
    </script>
</body>
</html>

秋忆夏伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记之通过DOM操作html

Hello 按钮标签添加一个按钮点击事件(Test()). --> function Test() { document.write("World"); // 当按钮点击事件触发时，DOM会覆盖HTML输出流，即页面上会输出World，
复制链接

扫一扫