前端Demo|JS HTML DOM基础|适合学习JS的同学

微笑的小小刀

发布于 2022-04-12 15:37:49

1.6K0

发布于 2022-04-12 15:37:49

文章被收录于专栏：java技术大本营

先上个思维导图

理下思路

DOM简介

DOM全称Document Object Model

当网页被加载时，浏览器会创建页面的文档对象模型，即DOM。DOM处于JavaScript语言的核心地位，如何操作 html，就是 DOM。简单的说，dom 提供了控制html的接口。

那么HTML DOM是什么呢？

HTML DOM 是 HTML 的标准对象模型和编程接口

它定义了：

作为对象的 HTML 元素

所有 HTML 元素的属性

访问所有 HTML 元素的方法

所有 HTML 元素的事件

换言之：

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

在JS中，不夸张的说，万物即对象，而每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

HTML DOM 模型被结构化为对象树：

访问HTML元素

访问 HTML 元素最常用的方法是使用元素的 id

getElementById使用id来查找元素

getElementsByTagName通过标签名来查找元素

getElementsByClassName通过类名来查找元素

添加事件处理程序

getElementById(id).onclick = function(){code}

向 onclick 事件添加事件处理程序

以绑定点击事件为例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS HTML DOM</title>
    <script>
        // 在页面加载完成后，再执行这一部分代码
        window.onload=function(){
        // 我们下面分别为3个button绑定一个点击事件
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function(){
            // 通过getElementById查找元素
           var bj=document.getElementById("bj");
           alert(bj.innerHTML);
        // 通过innerHTML这个属性可获取元素内部的HTML代码
        };
        var btn2=document.getElementById("btn2");
        btn2.onclick=function(){
            // 通过getElementsByTagName查找元素
            var lis=document.getElementsByTagName("li");
            // 通过标签名获取了一组元素
            // 这个方法返回的是类数组对象，获取的元素都会被封装在数组中返回，尽管可能只有一个元素
            for(var i=0;i<lis.length;i++)
            {
                 alert(lis[i].innerHTML);
            }
        };
        var btn3=document.getElementById("btn3");
        btn3.onclick=function(){
            // 通过getElementsByClassName查找元素
            var sh=document.getElementsByClassName("sh");
            alert(sh[0].innerHTML);
            // 与TagName返回类似，我们需要通过索引来访问元素内容
        };
    };
</script>
</head>

<body>
    <button id="btn1">使用Id查找元素</button>
    <button id="btn2">使用TagName查找元素</button>
    <button id="btn3">使用Class查找元素</button>
    <ul>
        <li id="bj">北京</li>
        <li class="sh">上海</li>
        <li>广州</li>
        <li>重庆</li>
        <li>武汉</li>
    </ul>
</body>

</html>

当不加上innerHTML，浏览器不会显示元素内容

加上之后，浏览器可以获取元素内容

依次点击按钮的效果是

button1.显示北京

button2.依次显示北京、上海、广州...

button3.显示上海

控制台报错Cannot set property 'innerHTML' of null

原因：浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树，代码的执行顺序是自上而下依次执行，当执行到innerHTML这一行代码时，他并没有加载到下面的DOM结构，就会报错无法读取HTML

解决办法：

1.在原本的script标签中添加window.onload

2.把script代码放在<body>标签之后

查找HTML对象

属性	描述
document.documentElement	返回 <html> 元素
document.documentMode	返回浏览器使用的模式
document.documentURI	返回文档的 URI
document.domain	返回文档服务器的域名
document.images	返回所有 <img> 元素