DOM资料之基本知识
程序员文章站
2022-05-06 09:22:02
...
◆ 概念：
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>上一篇： 手机端浮层弹窗阻止界面滚动
下一篇： 爆笑之逗B剧场第171季