• 七、JavaScript：DOM对象、元素选择器

    JavaScript入门专栏

    文章目录

    1. 概述

    DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
      image-20220709102840357

    作用：

    JavaScript 可以通过 DOM， 对 HTML进行动态操作。

    • 改变 HTML 元素的内容
    • 改变 HTML 元素的样式（CSS）
    • 对 HTML DOM 事件作出反应
    • 添加和删除 HTML 元素

    DOM相关概念：

    DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

    1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
      • Document：整个文档对象
      • Element：元素对象
      • Attribute：属性对象
      • Text：文本对象
      • Comment：注释对象
    2. XML DOM： 针对 XML 文档的标准模型
    3. HTML DOM： 针对 HTML 文档的标准模型
      该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
      • 例如： 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
      • 例如： 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

    2. 获取 Element对象(选择器)

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

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

    • getElementById()：根据id属性值获取，返回单个Element对象
    • getElementsByTagName()：根据标签名称获取，返回Element对象数组
    • getElementsByName()：根据name属性值获取，返回Element对象数组
    • getElementsByClassName()：根据class属性值获取，返回Element对象数组

    代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>

    <div class="cls">Linux</div>   <br>
    <div class="cls">Mac</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

    1.根据 id 属性值获取上面的 img 元素对象，返回单个对象

    var img = document.getElementById("light");
alert(img);

    从弹框输出的内容，可以看出是一个图片元素对象。
    image-20220709103503724

    2.根据标签名称获取所有的 div 元素对象

    var divs = document.getElementsByTagName("div");// 返回一个数组，数组中存储的是 div 元素对象
// alert(divs.length);  //输出 数组的长度
//遍历数组
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}

    3.获取所有的满足 name = 'hobby' 条件的元素对象

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
    alert(hobbys[i]);
}

    4.获取所有的满足 class='cls' 条件的元素对象

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
    alert(clss[i]);
}
  • 相关阅读:
    体验Semantic Kernel图片内容识别
    力扣刷题-字符串-翻转字符串中的单词
    kinetic: 编译navgation包遇到的问题
    [电源选项]没有系统散热方式，没有被动散热选项
    Spring--注解
    算法---java实现经典排序算法
    Astro是2023年最好的web框架，原因如下
    [NISACTF 2022]babyserialize - 反序列化+waf绕过【*】
    【GAMES202】A Glimpse of Industrial Solution—实时渲染中常用的工业界技术
    Scroll 生态明星项目Pencils Protocol，发展潜力巨大
  • 原文地址：https://blog.csdn.net/weixin_52341477/article/details/126953613