JS-12.对象-DOM-获取元素-CSDN博客

本文链接：https://blog.csdn.net/qq_45055856/article/details/141092473

DOM：

1.概念：Document Object Model，文档对象模型

2.将标记语言的各个组成部分封装为对应的对象：

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

3.JavaScript通过DOM，就能够对HTML进行操作：

改变HTML元素的内容

改变HTML元素的样式（CSS）

对HTML DOM事件作出反应

添加和删除HTML元素

4.DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1.Core DOM - 所有文档类型的标准模型

Document:整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2.XML DOM - XML 文档的标准模型

3.HTML DOM - HTML 文档的标准模型

Image：<img>

Button:<input type = 'button'>

5.HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

6.Document对象中提供了以下获取Element元素对象的函数：

1.根据id属性值获取，返回单个Element对象

var img = document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3.根据name属性值获取，返回Element对象数组

var ins = document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

var divs = document.getElementsByClassName('cls');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM-获取元素</title>
</head>
<body>
    <img src="img/off.gif" id="h1">    <br><br>
    <div class="cls">传智教育</div>     <br>
    <div class="cls">黑马程序员</div>   <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 音乐
    <input type="checkbox" name="hobby"> 舞蹈
</body>
<script>    // script标签可以在任何地方
/* 
    DOM：
    1.概念：Document Object Model，文档对象模型
    2.将标记语言的各个组成部分封装为对应的对象：
        Document：整个文档对象
        Element：元素对象
        Attribute：属性对象
        Text：文本对象
        Comment：注释对象
    3.JavaScript通过DOM，就能够对HTML进行操作：
        改变HTML元素的内容
        改变HTML元素的样式（CSS）
        对HTML DOM事件作出反应
        添加和删除HTML元素
    4.DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
        1.Core DOM - 所有文档类型的标准模型
            Document:整个文档对象
            Element：元素对象
            Attribute：属性对象
            Text：文本对象
            Comment：注释对象
        2.XML DOM - XML 文档的标准模型
        3.HTML DOM - HTML 文档的标准模型
            Image：<img>
            Button:<input type = 'button'>
    5.HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
    6.Document对象中提供了以下获取Element元素对象的函数：
        1.根据id属性值获取，返回单个Element对象
        var img = document.getElementById('h1');
        2.根据标签名称获取，返回Element对象数组
        var divs = document.getElementsByTagName('div');
        3.根据name属性值获取，返回Element对象数组
        var ins = document.getElementsByName('hobby');
        4.根据class属性值获取，返回Element对象数组
        var divs = document.getElementsByClassName('cls');
*/
    // 1、根据id属性获取对应的元素对象
/*     var img = document.getElementById('h1');
    alert(img);
 */
    // 2、根据标签名称获取对应的元素对象
/*     var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    } */
    // 3、根据name属性值获取对应的元素对象
/*     var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
    } */
    // 4、根据class属性获取对应的元素对象
/*     var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }
 */
    // 对获取到的元素内容进行修改
    var divs = document.getElementsByClassName('cls');
    divs[0].innerHTML = '传智教育666';

    </script>
</html>