js文档对象模型(Document Object Model)

本文链接：https://blog.youkuaiyun.com/weixin_41545048/article/details/107227642

本文深入讲解JavaScript如何操作HTML DOM，包括查找、修改HTML元素，改变CSS样式，处理各种DOM事件，以及事件监听器的添加与移除。同时，介绍了如何创建、插入、删除DOM元素，探讨了事件冒泡与捕获机制。

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

JavaScript HTML DOM

HTML DOM (文档对象模型)：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

1. HTML DOM 模型被构造为对象的树：
在这里插入图片描述
2.查找HTML元素：

通过 id 查找HTML 元素

document.getElementById("main");

通过标签名查找 HTML 元素

document.getElementsByTagName("p");

通过类名查找HTML 元素

document.getElementsByClassName("main");

一、JavaScript HTML DOM - 改变HTML

改变HTML输出流
改变HTML内容
改变HTML属性

 <p id="title">这是一个标题</p>
 <br>
 <img id="content" src="./DOM树结构.png" alt="">
 <br>

<script>
    // 改变HTML输出流
    document.write(Date())

    // 改变HTML内容
    setTimeout(function() {
        //document.getElementById("title").innerHTML = "改变HTML内容"
        document.getElementById("title").innerText = "改变HTML内容"
    }, 3000)

    // 改变HTML属性
    setTimeout(function() {
        document.getElementById("content").src = "./查找HTML元素.png"
    }, 5000)
</script>

二、JavaScript HTML DOM - 改变CSS

html

<p id="p1">JavaScript HTML DOM - 改变CSS</p>
<p id="p2">JavaScript HTML DOM - 改变CSS</p>
<p id="p3">JavaScript HTML DOM - 改变CSS</p>
<button id="btn" onclick="changeCSS()">改变css</button>

  const Btn = document.getElementById("btn")
    // 方法一
    Btn.onclick = function() {
        document.getElementById("p1").style.color = "blue";
        document.getElementById("p2").style.fontFamily = "Arial";
        document.getElementById("p3").style.fontSize = "larger";
    }
    // 方法二
    btn.addEventListener('click', function() {
        document.getElementById("p1").style.color = "blue";
        document.getElementById("p2").style.fontFamily = "Arial";
        document.getElementById("p3").style.fontSize = "larger";
    })
    // 方法三
    function changeCSS() {
        document.getElementById("p1").style.color = "blue";
        document.getElementById("p2").style.fontFamily = "Arial";
        document.getElementById("p3").style.fontSize = "larger";
    }

三、JavaScript HTML DOM 事件

详细请戳

<body onresize="resize(this)" onload="load(this)" onunload="unload()">
    <input placeholder="用户改变域的内容" onfocus="getFoucs(this)" onblur="loseFoucs(this)" onchange="changeText(this)">
    <br><br>
    <button onmousedown="mousedown(this)" onmouseup="mouseup(this)" onclick="clickOne(this)" ondblclick="clickTwo(this)">鼠标点击事件</button>
    <br><br>
    <button onkeydown="keydown(this)" onkeypress="keypress(this)" onkeyup="keyup(this)">键盘事件</button>
    <br><br>
    <div onmouseover="mouseover(this)" onmousemove="mousemove(this)" onmouseout="mouseout(this)" style="width: 100px;height:30px;background-color: #59f86e;">鼠标移动事件</div>
    <br>
    <form onreset="handlrReset(this)" onsubmit="handlrSubmit(this)">
        <input type="text" value="Hello world!" onselect="handleSelect(this)"></input>
        <input type="submit">
        <input type="reset">
    </form>

    <script>
        // 窗口大小发生变化 / 加载关闭页面
        function resize() {alert("窗口大小发生改变")}
        function load(x) {
            localStorage.setItem("ticket", "lhyyzwdxka")
        }
        function unload(x) {
            var res = confirm("确定关闭页面")
            if (res === true) { localStorage.removeItem("ticket") }
        }
        
        // input失焦，获焦，和发生改变事件
        function getFoucs(x) { x.placeholder = "已获得焦点 " }
        function loseFoucs(x) { x.placeholder = "已失去焦点 " }
        function changeText(x) { x.style.background = "gold " }

        // 鼠标点击事件
        function clickOne(x) { x.innerHTML = "您单机了鼠标 "; }
        function clickTwo(x) { x.innerHTML = "您双机了鼠标 "; }
        function mousedown(x) { x.style.background = "yellow " }
        function mouseup(x) { x.style.background = "pink " }

        // 键盘事件
        function keydown(x) {x.innerHTML = "键盘被按下"}
        function keypress(x) {x.innerHTML = "键盘被按住"}
        function keyup(x) {x.innerHTML = "键盘被松开 "}
        
        // 鼠标移动事件
        function mouseover(x) {x.innerHTML = "mouseover "}
        function mousemove(x) {x.innerHTML = "hello "}
        function mouseout(x) {x.innerHTML = "world "}
        
        // 选定文本/提交重置表单
        function handleSelect(x) {console.log("已选中文本");}
        function handlrSubmit() {console.log("表单已提交")}
		function handlrReset() {console.log("表单已重置")}
    </script>
</body>

四、JavaScript HTML DOM EventListener

1.addEventListener()
语法： element.addEventListener(event, function, useCapture);
2.removeEventListener()
语法： element.removeEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

<body>
    <div id="addbox">
        <button onclick="removeHandler()" id="btn">移除事件句柄</button>
        <p id="demo"></p>
    </div>
    
    <script> 
        document.getElementById("addbox").addEventListener("mousemove", addHandler)  // 添加事件句柄
        function addHandler() {
            document.getElementById("demo").innerText = Math.random()
        }
        function removeHandler() {  // 移除事件句柄
            document.getElementById("addbox").removeEventListener("mousemove", addHandler)
        }
    </script>
</body>

在这里插入图片描述
3.事件冒泡或事件捕获

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

五、JavaScript HTML DOM 元素 (节点)

1.创建新的元素节点

   <div id="demo">
       <p id="p1">标题2</p>
   </div>

appendChild()：添加新元素到尾部；

	  const para = document.createElement("p")
      const node = document.createTextNode("标题3")
      para.appendChild(node)
      const element = document.getElementById("demo")
      element.appendChild(para)

insertBefore() ：添加新元素到开始位置；

	  const para = document.createElement("p")
      const child = document.createTextNode("标题1")
      para.appendChild(child)
      var element = document.getElementById("demo");
      element.insertBefore(para, element.childNodes[0]);

2.移除已存在的元素

	  var parent = document.getElementById("demo");
      var child = document.getElementById("p1")
      parent.removeChild(child)

六、JavaScript HTML DOM集合(Collection)和JavaScript HTML DOM节点列表(NodeList)

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 看起来像是一个数组，但其实不是。他可以像数组一样，使用索引来获取元素。

<body>
    <div style="width: 800px;height: 600px;border:2px solid red">
        <div style="width: 700px;height: 540px;border:2px solid yellow">
            <div style="width: 600px;height: 450px;border:2px solid blueviolet">
                <div style="width: 500px;height: 375px;border:2px solid gold">
                    <div style="width: 400px;height: 300px;border:2px solid palegreen">
                        <div style="width: 300px;height: 225px;border:2px solid rgb(247, 14, 130)">
                            <div style="width: 200px;height: 150px;border:2px solid #44f70e">
                                <div style="width: 100px;height: 75px;border:2px solid #0d34dd">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button onclick="start()">开启</button>
</body>

<script>
    function start() {
    	var NodeList = document.querySelectorAll("div");   //NodeList
        var myCollection = document.getElementsByTagName("div")  //Collection
        setInterval(function() {
            for (var i = 0; i < myCollection.length; i++) {
                var a = Math.ceil((Math.random() * 4039)).toString(16);
                var arr = ["0", "0"];
                arr.length = 3 - a.length;
                arr.push(a);
                myCollection[i].style.backgroundColor = "#" + arr.join(",");
            }
        }, 500);
    }
</script>