JS学习（二）-获取元素

最新推荐文章于 2022-10-20 23:56:44 发布

在下平兄

最新推荐文章于 2022-10-20 23:56:44 发布

阅读量131

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_44494778/article/details/99681949

版权

这篇博客介绍了JavaScript中获取页面元素的两种方法：通过getElementById获取单个元素，通过getElementsByTagName获取多个元素。同时，文章讲解了如何操作元素的属性，包括属性的读写，并提到了使用'.'和'[' ']']'操作属性。此外，还阐述了用innerHTML来读取和修改元素内容的用法。

摘要由CSDN通过智能技术生成

获取元素方法一（获取单个）

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

第一种方法：将javascript放到页面最下边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="box">js练习</div>
</body>

<script type="text/javascript"> // 程序是从上往下执行 script不能放在前面 
    document.getElementById("box").style.color = "yellow";
    document.getElementById("box").style.fontSize = "30px"; // 对应的行内样式 style="color: yellow; font-size: 30px"
</script>
</html>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script type="text/javascript">
    // window.onload作用 当文档全部加载完再执行花括号里面的语句
    window.onload = function(){
    
        /*
        document.getElementById("box").style.color = "yellow";
        document.getElementById("box")

最低0.47元/天解锁文章

在下平兄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习（二）-获取元素

获取元素方法一可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：第一种方法：将javascript放到页面最下边<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫

专栏目录