JavaScript之DOM_html-js-css

1 概述

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

DOM 其实我们并不陌生，之前在学习 XML 就接触过（XML简介），只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

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

如下图，左边是 HTML 文档内容，右边是 DOM 树
JavaScript 通过 DOM，就能够对 HTML进行 *** 作了

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

DOM相关概念：

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

核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准 Document：整个文档对象Element：元素对象Attribute：属性对象Text：文本对象Comment：注释对象 XML DOM：针对 XML 文档的标准模型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">传智播客</div>  <br>
<div class="cls">黑马程序员</div>  <br>

<input typeof="checkbox" name="hobby"> 电影
<input typeof="checkbox" name="hobby"> 旅游
<input typeof="checkbox" name="hobby"> 游戏
<br>

<script>
      /*
        获取：使用Document对象的方法来获取
        * getElementById：根据id属性值获取，返回一个Element对象
        * getElementsByTagName：根据标签名称获取，返回Element对象数组
        * getElementsByName：根据name属性值获取，返回Element对象数组
        * getElementsByClassName：根据class属性值获取，返回Element对象数组
     */

     //1. getElementById：根据id属性值获取，返回一个Element对象
     var img = document.getElementById("light");
     alert(img);


     // 2. getElementsByTagName：根据标签名称获取，返回Element对象数组
     var divs = document.getElementsByTagName("div");
     alert(divs.length);
     for(let i = 0; i < divs.length; i++){
        alert(divs[i]);
     }

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

     // 4. getElementsByClassName：根据class属性值获取，返回Element对象数组
     var classes = document.getElementsByClassName("cls");
     document.write(classes.length);
     for(let i = 0; i < classes.length; i++){
         alert(classes[i]);
     }
</script>
</body>
</html>

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

3 HTML Element对象使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。
JavaScript 和 HTML DOM 参考手册

<!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">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);
    img.src = "../imgs/on.gif";  // 修改灯的内容

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    /*
        style：设置元素css样式
        innerHTML：设置元素内容
    */
    // alert(divs.length)
    for(let i = 0; i < divs.length; i++){
        // divs[i].style.color = 'red';  // 设置div标签内容样式
        // alert(divs[i].innerHTML);  // 打印div便签内容
        // divs[i].innerHTML = '西游记';  // 修改div标签里面的内容
    }

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for(let i = 0; i < hobbys.length; i++){
        // alert(hobbys[i]);
        // 获取所有的 复选框 元素对象
        if(i == 1){
            hobbys[i].checked = true; // 遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
        }
    }
</script>
</body>
</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1324122.html

JavaScript之DOM

发表评论

评论列表（0条）