JavaScript DOM对象

朴灿烈づ我的快乐病毒、 2022-06-15 09:20 182阅读 0赞

## **JavaScript DOM对象** ##

### **DOM简介** ###

### **1、HTML DOM** ###

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

DOM操作HTML

1）：JavaScript能够改变页面中的所有HTML元素

2）：JavaScript能够改变页面中的所有HTML属性

3）：JavaScript能够改变页面中的所有CSS样式

4）：JavaScript能够对页面中的所有事件做出反应

### **1、改变HTML输出流** ###

注意：绝对不要在文档加载完成之后使用document。write()。这会覆盖该文档

### **2、寻找元素：** ###

通过id找到html元素

通过标签名找到html元素

### **3、改变html内容** ###

使用属性：innerHTML

### **4、改变HTML属性** ###

使用属性：attribute

## **DOM操作CSS** ##

### **1、通过DOM对象改变CSS** ###

语法：document.getElementById(id).style.property=new style

DOM EventListener给元素添加一个事件句柄

### **1、DOM EventListener：** ###

方法：addEventListener():
    removeEventListener():

### **2、addEventListener():** ###

方法用于向指定元素添加事件句柄

### **3、removeEventListener():** ###

移除方法添加的事件句柄

<p id="pid">Hello</p>
        <button onclick="change()">按钮</button>
        <script> function change() { //当修改change函数的时候，其他调用change的地方都需要修改， // 代码量多的时候就容易出现改错，漏改的问题，这时候就需要用到句柄 document.getElementById("pid") } </script>

<p id="pid02">miao</p>
        <button id="btn">按钮02</button>
        <script> document.getElementById("btn").addEventListener("click", function () { alert("坛") }); </script>
    
    <script> var x = document.getElementById("btn"); x.addEventListener("click",hello); x.addEventListener("click",world);//添加句柄 x.removeEventListener("click",hello);//移除句柄 //不同事件可以添加多个句柄，句柄之间不会覆盖 function hello() { alert("hello"); } function world() { alert("world"); } </script>