【Web】Web-API（No.58）DOM_this.id=option.id||'';-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/99408037

本文深入解析文档对象模型（DOM）的概念，介绍如何通过DOM操作网页元素，包括获取、创建、修改元素，以及实现事件处理。通过具体案例演示了按钮点击响应、文本内容修改、排他功能实现、图片相册展示和表格行背景色变化等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

模拟文档树结构

function Element(option) {
  this.id = option.id || '';
  this.nodeName = option.nodeName || '';
  this.nodeValue = option.nodeValue || '';
  this.nodeType = 1;
  this.children = option.children || [];
}

var doc = new Element({
  nodeName: 'html'
});
var head = new Element({
  nodeName: 'head'
});
var body = new Element({
  nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);

var div = new Element({
  nodeName: 'div',
  nodeValue: 'haha',
});

var p = new Element({
  nodeName: 'p',
  nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);

function getChildren(ele) {
  for(var i = 0; i < ele.children.length; i++) {
    var child = ele.children[i];
    console.log(child.nodeName);
    getChildren(child);
  }
}
getChildren(doc);

DOM经常进行的操作

获取元素
动态创建元素
对元素进行操作(设置其属性或调用其方法)
事件(什么时机做相应的操作)

获取页面元素

案例

1.点击按钮弹出对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.点击每个按钮弹出对话框</title>
</head>
<body>
<button id="btn1">点我</button>
<button id="btn2">点我</button>
<button id="btn3">点我</button>
<button id="btn4">点我</button>
<button id="btn5">点我</button>
<button id="btn6">点我</button>
<script>
    /*document.getElementById("btn1").onclick = function(){
        alert("点我干嘛鸭！");
    };
    document.getElementById("btn2").onclick = function(){
        alert("点我干嘛鸭！");
    };
    document.getElementById("btn3").onclick = function(){
        alert("点我干嘛鸭！");
    };*/

    var btn = document.getElementsByTagName("button");
    for(var i = 0; i < btn.length; i++){
        btn[i].onclick = function(){
            alert("点我干嘛鸭！");
        }
    }
</script>
</body>
</html>

2.修改多个p标签的文字内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02.修改多个p标签的文字内容</title>
</head>
<body>
<input type="button" value="点我鸭！" id="btn">
<div id="box1">
    <p>好困鸭！</p>
    <p>好困鸭！</p>
    <p>好困鸭！</p>
</div>
<div id="box2">
    <p>好困鸭！</p>
    <p>好困鸭！</p>
    <p>好困鸭！</p>
</div>
<script>
    /*
    * 伪数组的特征：
    * ①具有length属性
    * ②按索引的方式可以操作数据/对象
    * ③不具有.push .pop等数组的方法
    * */
    // var pObj = document.getElementsByTagName("p");
    // pObj.push();//报错
    // console.log(pObj);

    document.getElementById("btn").onclick = function(){
        //设置多个p标签的内容
        //根据标签名字来获取元素 --> 一个伪数组

        //通过父对象找后代所有的p标签
        var fatherObj = document.getElementById("box1");
        console.log(fatherObj);
        var pObj = fatherObj.getElementsByTagName("p");
        console.log(pObj);//伪数组
        // pObj[0].innerText = "还是好困鸭！"
        for(var i = 0; i < pObj.length; i++){
            pObj[i].innerText = "还是好困鸭！"
        }
    }
</script>

<!-- 练习：点击按钮修改a标签的地址和里面的文字 -->
<button>快点我！</button>
<a href="https://www.taobao.com/" id="aa">淘宝一下</a>
<script>
    //通过标签名来获取对象
    var btn4 = document.getElementsByTagName("button");
    console.log(btn4);
    btn4[0].onclick = function() {
            var aObj = document.getElementsByTagName("aa");
            aObj[0].href = "https://www.baidu.com/?tn=98012088_5_dg&ch=12\n";
            aObj[0].innerText = "百度一下";
        }
</script>
</body>
</html>

3.排他功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03.排他功能-案例</title>
</head>
<body>
<!--<input type="button" value="按钮">-->
<!--<script>-->
    <!--//点击某个属性设置当前的属性-->
    <!--document.getElementsByTagName("input")[0].onclick = function(){-->
        <!--console.log(this);-->
        <!--this.value = "修改";-->
        <!--this.type = "text";-->
    <!--}-->
<!--</script>-->
<button>Hi！</button>
<button>Hi！</button>
<button>Hi！</button>
<button>Hi！</button>
<button>Hi！</button>
<button>Hi！</button>
<button>Hi！</button>
<button>Hi！</button>
<script>
    //1、都有点击事件
    var btns = document.getElementsByTagName("button");
    for(var i = 0; i < btns.length; i++){
        btns[i].onclick = function(){
            //让所有的按钮的内容设默认值
            for(var j = 0; j < btns.length; j++){
                btns[j].innerText = "Hi！";
                btns[j].style.backgroundColor = "rgb(230,230,230)"
            }
            console.log("jaj");
            //让对应的点击按钮修改内容
            this.innerText = "你被绿了！"
            this.style.backgroundColor = "rgb(16,196,143)"
        }
    }
</script>
</body>
</html>

4.美女相册

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>04.美女相册</title>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }

        h1 {
            color: #333;
            background-color: transparent;
        }

        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }

        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }

        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
<body>

<h2>
    美女画廊
</h2>

<ul id="imagegallery">
    <li>
        <a href="img/1.jpg" title="美女A">
            <img src="img/1-small.jpg" width="100" alt="美女1"/>
        </a>
    </li>
    <li>
        <a href="img/2.jpg" title="美女B">
            <img src="img/2-small.jpg" width="100" alt="美女2"/>
        </a>
    </li>
    <li>
        <a href="img/3.jpg" title="美女C">
            <img src="img/3-small.jpg" width="100" alt="美女3"/>
        </a>
    </li>
    <li>
        <a href="img/4.jpg" title="美女D">
            <img src="img/4-small.jpg" width="100" alt="美女4"/>
        </a>
    </li>
</ul>

<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="img/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>

<script>
    //1、循环点击a
    var aa = document.getElementsByTagName("a");//伪数组，不能调用方法和属性
    for(var i = 0; i < aa.length; i++){
        aa[i].onclick = function(){
            //给大图设置对应路径
            document.getElementById("image").src = this.href;
            //设置文本
            document.getElementById("des").innerText = this.title;
            //阻止跳转
            return false;
        }
    }
</script>
</body>
</html>

5.隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.案例-隔行变色</title>
</head>
<body>
<button id="bt">隔行变色</button>
<ul>
    <li>日暮江水远</li>
    <li>入夜随风迁</li>
    <li>秋叶乱水月</li>
    <li>疏影倚窗边</li>
    <li>夜末香未眠</li>
    <li>寻花情已倦</li>
    <li>愁上晚柳月</li>
    <li>思念两处闲</li>
    <li>你的美 望穿东去流水</li>
    <li>温柔怎耐长夜 澜风冰雪</li>
    <li>花溅泪 洒落在飘零间</li>
    <li>满山哭红的叶 任风随</li>
    <li>晚风岸抚柳 笛声残</li>
    <li>看红叶 秋色染</li>
    <li>飘零满江 千里风霜</li>
    <li>飘零满江 千里风霜</li>
    <li>不觉～胭脂伤</li>
    <li>泪沿江倾洒</li>
    <li>水依然长流 莫相伴</li>
    <li>梦已晚 秋水涨</li>
    <li>雁字回时 愁断人肠</li>
    <li>泪已漫长夜之觞</li>
    <li>山水 两茫茫</li>
    <li>水 把琴声淌</li>
</ul>
<script src="common.js"></script>
<script>
    my$("bt").onclick = function(){
        //判断奇偶
        for(var i = 0; i < ele$("li").length; i++){
            ele$("li")[i].style.backgroundColor =  i % 2 == 0  ? "#abcdef" : "#cccccc";
        }
    }
</script>
</body>
</html>

common.js

//通过id名获取的元素
function my$(id){
    return document.getElementById(id);
}

//通过标签吗获取的元素
function ele$(element){
    return document.getElementsByTagName(element);
}

为什么要获取页面元素

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

var div = document.getElementById('main');
console.log(div);

// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根据name获取元素*

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据类名获取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

总结

掌握
	getElementById()
	getElementsByTagName()
了解
	getElementsByName()
	getElementsByClassName()
	querySelector()
	querySelectorAll()