DOM，文档对象模型

阿斯番茄

已于 2022-06-24 17:21:46 修改

阅读量245

点赞数

文章标签：前端 javascript html

于 2022-06-24 17:20:21 首次发布

本文链接：https://blog.csdn.net/m0_62558365/article/details/125265568

版权

DOM，文档对象模型

获取元素
对元素进行操作
- 操作元素属性
- - 操作表单属性
  - 操作样式属性
动态创建元素
事件
- 事件监听程序
- 分配事件

DOM全称：Document Object Model文档对象模型。JS通过DOM来对HTML文档进行操作。

文档：表示的是整个html网页文档
对象：表示将网页中的每一个部分都转换为一个对象
模型：使用模型来表示对象之间的关系，方便获取对象

在这里插入图片描述

DOM常进行的操作

获取元素节点
对元素进行操作
动态创建元素
事件

获取元素

节点

构成HTML文档最基本的单元

常用节点分四类

文档节点：整个html文档
元素节点：html文档中html标签
属性节点：元素的属性
文本节点：html标签中的文本内容

节点属性	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

获取元素节点

通过document对象调用

getElementById（）：通过id属性获取一个元素节点对象
```
var myElement = document.getElementById("intro");
```

getEleMentsByTagName（）：通过标签名获取一组元素节点对象

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

getElementsByName（）：通过name属性获取一组元素节点对象
```
var x = document.getElementsByName("intro");
```
getElementsByClassName（）:通过类名获取相同类名元素节点对象
```
var x = document.getElementsByClassName("intro");
```
querySelectorAll（）：通过选择器获取元素节点内容
```
var x = document.querySelectorAll("p.intro");
```

如果需要读取元素节点属性，直接使用元素.属性名，如元素.id,元素.name，元素.value，注意class属性需要元素.className

获取元素节点的子节点

通过具体的元素节点调用

getElementByTagName（）：方法，返回当前节点的指定标签名后代节点
child Nodes：属性，表示当前节点的所有子节点
first Child：属性，表示当前节点的第一个子节点
lastChild：属性，表示当前节点的最后一个子节点

对元素进行操作

操作元素属性

对象.src = ‘目标地址’
对象.href = ‘目标链接’
对象.alt = ‘目标替换文本’
对象.title = ‘目标图片提示信息’

操作表单属性

对象.type = ‘更换表单类型’;
对象.value = ‘更换表单的内容’
对象.disabled = ‘true’

操作样式属性

普通修改

<div id="box">123456798</div>

// 点击目标盒子，显示一个红色背景
var box = document.querySelector('#box');
box.onclick = function() {
this.style.backgroundColor = 'red';
     }

利用className= '值'属性

// 设置红色背景的样式
.red {
      background-color: red;
 }

// 通过给目标盒子添加red的样式类，来改变他的背景
var box = document.querySelector('#box');
    box.onclick = function() {
       this.className = 'red';
     }

动态创建元素

document.write();

比较随意，想创建就创建，可以直接在write里写属性就行，但由于容易覆盖原页面，所以不推荐使用；

<script>
// window.onload表示当页面全部加载完毕后再执行{}内的代码
window.οnlοad=function(){
	document.write("<div>123</div>");
}
</script>

inner HTML = ();

<div></div>
<script>
// 采取拼接字符串的方式创建元素 效率很低
	var divs = document.querySelector("div");
	for(var i=0; i<=500; i++){
		divs.innerHTML += "<a href='javascript:;'>123</a>";
	}
// 采取数组的方式创建元素 效率更高
	var arr = [];
	for(avr i=0; i<=500; i++){
	// 向数组中添加a
		arr.push("<a href='javascript:;'>123</a>");
	}
	// join把数组转换为字符串形式
	dis.innerHTML = arr.join[""];
</script>

document.createElement();

<div></div>
<script>
	var divs = document.querySelector("div");
	for(var i=0; i<=500; i++){
            var as = document.createElement("a");
            divs.appendChild(as);
        }
</script>

innerHTM和document.createElement()如果是创建单个元素是没有区别的。如果创建的元素数量很多，使用innerHTML拼接字符串的方式和document.createElement()相比，效率会低很多。但如果使用innerHTML数组的形式和document.createElement()相比，效率就会提高很多，比document.createElement()效率还要高。

事件

文档或浏览器窗口中发生的一些特定的交互瞬间，即用户和浏览器的交互行为

JavaScript与HTML之间的交互是通过事件实现的
对于Web应用来说，有点击某个元素 、将鼠标移动到某个元素上方，按下键盘上某个键等这些代表性事件

事件监听程序

绑定HTML元素属性

<input type = "button" id = "btn" value = "1" onclick = "alert('?')" >

绑定DOM对象属性

<body>
	<input type="button" id="btn" value="点我有惊喜" />
    <script>
      // 获取元素
      var btn = document.getElementById("btn");
      // 添加绑定事件
      btn.onclick = function () {
        // 定义的是事件被触发后要做的事
        alert("惊喜");
      };
    </script>
</body>

分配事件

事件	触发方式
onclick	鼠标单击
onload	进入页面
onunload	离开页面
onchange	离开字段
onmouseover	鼠标移动到元素上
onmouseout	鼠标移动到元素边界
onmousedown	鼠标按键按下
onmouseup	鼠标按键放开