DOM资料之基本知识

最新推荐文章于 2025-10-09 00:07:06 发布

原创最新推荐文章于 2025-10-09 00:07:06 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom

DOM 专栏收录该内容

6 篇文章

订阅专栏

◆ 概念：

Document Object Model，文档对象模型。

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

▲ DOM树：
这里写图片描述

▲ 节点（Node）：
由结构图中我们可以看到，整个文档就是一个文档节点。而每一个HMTL标签都是一个元素节点。标签中的文字则是文字节点。标签的属性是属性节点。

获取节点：

★ 通过 id 找到 HTML 元素
document.getElementById("demo");
返回值是一个标签，可以直接使用。获得属性值，设置属性。

★ 通过标签名找到 HTML 元素
document.getElementsByTagName("div")
返回值是标签数组。

★ 通过类名找到 HTML 元素
document.getElementsByClassName("a");
返回值是标签数组。

注：
1、通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
2、标签数组习惯性是遍历之后再使用

◆ 事件三要素：

★ 事件源：引发后续事件的标签。

获取事件源：
(1)通过id获取：
var div = document.getElementById("box");
(2)通过标签名获取：
var arr1 = document.getElementsByTagName("div")
(3)通过classname获取
var arr2 = document.getElementsByClassName("div")
var arr2=3 = document.getElementByName("aaa")(一般不用)

★ 事件类型：js已经定义好，直接使用。

驱动程序----匿名函数：对样式和html的操作即DOM操作。

★ 绑定事件： 

可以操作标签的属性和样式
div.style.width=300px;

(1)匿名绑定
div.onclick = function(){ 程序 };
(2)函数名绑定，不能写括号
   div.onclick = fn;
   function fn(){ 程序 }
(3)行内绑定
function fn(){ 程序 }
<div id="box" onclick="fn()"></div>

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box"></div>

<script>
    //需求：点击盒子，弹出对话框alert(1)。
    //步骤：
    //1.获取事件源（document.getElementById("box")）
    //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
    //3.书写事件驱动程序。


    //1.获取事件源（document.getElementById("box")）
    var div = document.getElementById("box");
    //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
    div.onclick = function () {
        //3.书写事件驱动程序。
        alert(1);
    }   
</script>
</body>
</html>