JavaScript学习笔记9: 对象-DOM

JavaScript对象-DOM

当html标签被浏览器解析后, 会被分别封装成Document, Element, Attribute, Text, Comment五个对象

获取Element元素对象的函数

html

<html>
<body>
    <img src="img/1.png" id="h1"> <br><br>

    <div class="cls">1</div> <br>
    <div class="cls">2</div> <br>

    <input type="checkbox" name="hobby"> a
    <input type="checkbox" name="hobby"> b
    <input type="checkbox" name="hobby"> c
</body>
</html>

根据id属性获取, 返回单个Element对象

<script>
    //object HTMLImageElement
    var img = document.getElementById('h1');
</script>

根据标签名称获取, 返回Element对象数组

<script>
    //object HTMLCollection
    var divs = document.getElementsByTagName('div');
</script>

根据name属性值获取, 返回Element对象数组

<script>
    var names = document.getElementsByName('hobby');
</script>

根据class属性获取, 返回Element对象数组

<script>
    var classes = document.getElementsByClassName('cls');
</script>

通过修改Element元素的属性，改变CSS样式

<script>
    //将id为'tb1'的元素的style中的color属性修改为red
   document.getElementById('tb1').style.color="red"
</script>
posted @ 2024-03-20 00:17  HIK4RU44  阅读(9)  评论(0)    收藏  举报