JavaScript——DOM简单入门

最新推荐文章于 2022-04-14 14:49:10 发布

Melonico

最新推荐文章于 2022-04-14 14:49:10 发布

阅读量149

点赞数

分类专栏： JavaScript 文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_45852430/article/details/106946462

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

DOM简单入门

○ 功能

控制html文档的内容

○ 获取元素对象

通过标签(元素)的id获取页面标签(元素)对象 Element

document.getElementById(id);

○ 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素对象</title>
</head>
<body>
    <h1 id="h1"></h1>
    <script>
        //通过id获取元素对象
        var h = document.getElementById("h1");
        document.write(h); //输出 [object HTMLHeadingElement] 
    </script>
</body>
</html>

注意：在示例中，需要注意script标签的插入位置，请观察以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素对象</title>
    <script>
        //通过id获取元素对象
        var h = document.getElementById("h1");
        document.write(h);
    </script>
</head>
<body>
    <h1 id="h1"></h1>
</body>
</html>

以上代码执行 document.write(h); 后，输出结果为null，是因为按照代码的执行顺序，当JavaScript代码通过 h1 获取元素时，对应的 h1 标签还未加载，所以出现null的情况，所以应在元素加载后再使用脚本代码获取元素对象

○ 操作元素对象

1. 修改属性值

<a id="link" href="http://www.sougou.com">link</a>
<script>
    var a = document.getElementById("link");
    alert("更换网址");
    a.href = "http://www.baidu.com";
</script>

2. 修改标签体内容

innerHTML属性可以设置标签体内容

<p id="p1">123</p>
<script>
    // 获取p1对象
    var p1 = document.getElementById("p1");
    // 修改p1内容
    p1.innerHTML = "abc";
</script>

Melonico

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——DOM简单入门

DOM简单入门○ 功能控制html文档的内容○ 获取元素对象通过标签(元素)的id获取页面标签(元素)对象 Elementdocument.getElementById(id);○ 示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取元素对象</title></head><body>
复制链接

扫一扫