本文详细介绍了DOM的基础操作，如查找方法、设置元素属性等，同时深入探讨了DOM事件的多种类型及其应用实例，帮助读者掌握JavaScript网页交互的核心技术。
JavaScript分为三个部分：ECMAScript(JS语言本身基础语法)，DOM(文档对象模型，应用程序编程接口)，BOM(浏览器对象模型)。
一、DOM基础
在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
（一）DOM查找方法
dom有2种查找方法：document.getElementById()、document.getElementsByTagName()
1.document.getElementById() 按id属性查找
语法：document.getElementById("id");
功能：返回拥有指定id的第一个对象的引用
返回值：dom对象
说明：id为DOM元素上id属性的值
<div id="div1"><p>测试</p></div>
<script>
var div = document.getElementById("div1");
console.log(div); //返回值为：<div id="div1"><p>测试</p></div>
</script>
2.document.getElementsByTagName() 按标签名查找
语法：document.getElementsByTagName("tag");
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称
<div><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var divs = document.getElementsByTagName("div"); //会得到一个数组集合，就算只有一个元素也是数组的形式
console.log(divs[0]); //访问单独元素数组下标的形式 <div><p>测试1</p></div>
</script>
（二）设置元素的相关属性
1.style属性 元素样式属性
语法：ele.style.styleName = styleValue；
功能：设置元素的CSS样式。
说明： （1）ele为要设置样式的dom对象
（2）styleName为要设置的样式名称（CSS中的样式为font-size,这里就要写成fontSize）
（3）styleValue为要设置的样式值
<div><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var divs = document.getElementsByTagName("div");
divs[0].style.backgroundColor = "red";
</script>
结果为:
2.innerHTML属性 返回（设置）ele开始和结束标签之间的HTML
（1）获取
语法：ele.innerHTML；
功能：返回ele元素开始和结束标签之间的HTML。
<div id="div1"><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var div1=document.getElementById("div1");
console.log(div1.innerHTML); //返回值 <p>测试1</p>
</script>
（2）设置
语法：ele.innerHTML = "html"；
功能：设置ele元素开始和结束标签之间的HTML内容为html。
<div id="div1"><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var div1=document.getElementById("div1");
div1.innerHTML = "<span>替换之前的内容</span>";
console.log(div1.innerHTML); //返回值 <span>替换之前的内容</span>
</script>
3.className属性 设置（返回）元素的class属性
（1）获取
语法：ele.className
功能：返回ele元素的class属性
<div id="div1" class="red"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
console.log(div1.className); //返回值 red
</script>
（2）设置
语法：ele.className = "cls";
功能：设置ele元素的class属性为cls
<div id="div1" class="red"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
div1.className = "greem";
console.log(div1.className); //返回值为green
</script>
并且
4.getAttribute() 获取ele元素的属性（包括自定义属性）的值
语法：ele.getAttribute("attribute");
功能：获取ele元素的attribute属性的值（包括自定义属性）
说明：
（1）ele是要操作的dom对象
（2）attribute是要获取的html属性
<div id="div1" class="red" data-name="poorpenguin"><p>测试1</p></div> <!--自定义的html属性最好是以data-XXX这种写法-->
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
console.log(div1.getAttribute("class")); //返回值 red
console.log(div1.getAttribute("data-name")); //返回值 poorpenguin
</script>
5.setAttribute() 设置ele元素的属性（包括自定义属性）
语法：ele.setAttribute("attribute",value);
功能：在ele元素上设置属性
说明：
（1）ele是要操作的dom对象
（2）attribute为要设置的属性名称
（3）value为设置的attribute属性的值
<div id="div1" class="red" data-name="poorpenguin"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
div1.setAttribute("data-type","test")
console.log(div1.getAttribute("data-type")); //返回值test
</script>
6.removeAttribute("attribute") 删除ele上的attribute属性
语法：ele.removeAttribute("attribute");
功能：删除ele上的attribute属性
说明：
（1）attribute是要删除的属性名称（可以是id、class或自定义）可用于消除样式
（2）ele是要操作的dom对象
二、DOM事件
（一）HTML事件
直接在HTML元素标签内添加事件，执行脚本。
基本语法：<tag 事件=“执行脚本”></tag>
功能：在HTML元素上绑定事件
说明：执行脚本可以是一个函数调用。
（二）DOM0级事件
和HTML事件不同的是DOM0事件是在js中获取dom元素，并为该dom元素绑定事件
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数调用。
举个例子:
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<script type="text/javascript">
var btnEle1 = document.getElementById("btn1");
var btnEle2 = document.getElementById("btn2");
var btnEle3 = document.getElementById("btn3");
btnEle1.onclick=fn1; //绑定一个函数调用
function fn1(){
alert("测试");
};
var fn2 = function(){
alert("测试");
}
btnEle2.onclick=fn2;
btnEle3.onclick=function(){
alert("测试");
}
</script>
var btnEle1 = document.getElementById("btn1");
var btnEle2 = document.getElementById("btn2");
var btnEle3 = document.getElementById("btn3");
btnEle1.οnclick=fn1; //绑定一个函数调用
function fn1(){
alert("测试");
};
var fn2 = function(){
alert("测试");
}
btnEle2.οnclick=fn2;
btnEle3.οnclick=function(){
alert("测试");
}
</script>
ps:注意，绑定函数名后面不要加()
（三）鼠标事件
| 事件名称 | 定义和用法 | 语法 | 注释 |
| onclick | 在对象被点击时发生 | ele.οnclick="JS代码" | |
| onmouseover | 在鼠标移动到对象上面时发生 | ele.οnmοuseοver="JS代码" | |
| onmouseout | 在鼠标移出对象时发生 | ele.οnmοuseοut="JS代码" | |
| onmouseup | 在鼠标按键松开时发生 | ele.οnmοuseup="JS代码" | |
| onmousemove | 在鼠标在对象上移动时发生 | ele.onmouemove="JS代码" | |
| onmousedown | 在鼠标按键按下是发生 | ele.οnmοusedοwn="JS代码" | |
| onload | 在页面元素加载完成后立即执行 |
window.οnlοad=function(){"JS代码"} | |
| onblur | 在对象失去焦点时发生 | ele.οnblur="JS代码" | |
| onfocus | 在对象获取焦点时发生 | ele.οnfοcus="JS代码" | |
| onchange | 在域的内容改变时发生 | .. | 主要用在<select>标签 |
| onsubmit | 在表单中的确认按钮被点击时触发 | ele(表单dom元素).οnsubmit="JS代码" | 主要用在<form>标签 |
| onresize | 在浏览器窗口大小被调整时发生 | window.οnresize="JS代码" | 主要用在window上 |
| onscroll | 在滚动条被拖动时触发(可以是浏览器，也可以是dom元素) | οnscrοll="JS代码" |
（四）键盘事件
| 事件名称 | 定义和用法 | 语法 | 注释 |
| onkeydown | 事件会在用户按下一个键盘按键时发生 | document.οnkeydοwn="JS代码" | |
| onkeypress | 事件会在键盘按键按下并释放一个键时发生 | document.οnkeypress="JS代码" | |
| onkeyup | 事件会在键盘按键被松开时发生 | document.οnkeyup="JS代码" | |
| keyCode | 获取按下的键盘按键的字符代码 | event.keyCode | 返回键盘事件触发的键的字符代码，配合键盘事件使用 |
例子：最多输入文字个数判断
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入文本</title>
</head>
<body>
<p>字数限制在30字内，<span>您还可以输入<b>30</b>字</span></p>
<textarea cols="50" rows="7" id="text"></textarea>
<script type="text/javascript">
var span = document.getElementsByTagName('span')[0];
var text = document.getElementById('text');
document.onkeyup = function(){
var count = 30 - text.value.length;
if(count>=0){
span.innerHTML = "您还可以输入<b>"+count+"</b>字";
}
else{
count = Math.abs(count);
span.innerHTML = "您已超出<b>"+count+"</b>字";
}
}
</script>
</body>
</html>
（五）鼠标事件的相关例子
1.onchange事件在<select>中的应用以及<option>元素的获取方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onchange()</title>
<style type="text/css">
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){ //dom文档加载完成后再执行
var selectEle = document.getElementById("color");
var divEle = document.getElementById("div");
selectEle.onchange=changeBackgroundColor;
// 改变div背景颜色
function changeBackgroundColor(){
var optionEle = this.options[this.selectedIndex]; //只有这种方式才能取到option中的文本,this.value只能获取当前选取的值而不是option元素
if(optionEle.value == 0){
divEle.style.background = "#FFF";
divEle.innerHTML = "我没有任何变化";
}else{
divEle.style.background = optionEle.value;
divEle.innerHTML = "我的背景颜色变成了"+optionEle.value+optionEle.innerHTML;
}
}
}
</script>
</head>
<body>
<div>
<span>请选择您喜欢的颜色:</span>
<select id="color">
<option value="0">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div">我是div</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
