步步为营-54-DOM
2024-10-19 13:35:16
说明:DOM document object model 文档对象模型.将所有的标记加载到内存中,以树形结构处理
1.1 使用JavaScript操作DOM,主要包括两个部分
Browser对象:BOM 指的是window.***
Html Dom对象: 指的是document.***
1.2 BOM
1.2.1 常用的三个对话框
<script>
//01-提示框,只有一个"确定"按钮 无返回值
alert("提示框");
//02-确认框 有"确定","取消"两个按钮,"确定"返回==true,"取消"返回==false
var result = confirm("确定删除吗?");
alert(result);
//03-输入框,一个文本框+有"确定","取消"两个按钮 ;"确定"返回==输入的值,"取消"返回==null
var result2 = prompt('请输入年龄', '');
alert(result2);
</script>
1.2.2 window常用事件
1.2.2.1 onload事件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function () {
//02-常用的事件
document.getElementById("btnShow").onclick = function () {
alert(this.value);
}; } </script> </head>
<body> <input type="button" id="btnShow" value="显示"/>
</body>
window.onload
1.3 HTML_DOM
1.3.1 常用的获取对象方法
//HTML DOM 使用 //01-获取元素方法
//01-01 根据id属性获取单个节点
document.getElementById();
//01-02 根据name获取节点列表
document.getElementsByName();
//01-03 通过class名称或的节点列表
document.getElementsByClassName();
//01-04 通过tagName获取单个节点
document.getElementsByTagName();
1.3.2 常用事件
1.3.2.1 onclick事件
<body> <input type="button" id="btnShow" value="显示"/>
<script>
//HTML DOM 使用 //02-常用的事件
document.getElementById("btnShow").onclick = function() {
alert(this.value);
} </script>
</body>
onclick事件
1.4 动态操作节点
1.4.1 动态创建元素
document.createElement();
1.4.2 添加子节点
appendChild();
1.4.3 插入节点
insertBefore(新元素对象,原节点);
1.4.4 获取第一个元素
firstChild();
1.4.5 获取所有子节点
childNodes();
1.4.6 删除元素
removeChild(子元素对象)
1.5 获取标签对的数据
1.5.1 innerText //获取标签对内的文本 textContent(火狐浏览器)
1.5.2 innerHTML //获取标签对内的HTML
1.6 通过js操作样式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function() {
var divset = document.getElementById('divSet');
divset.style.width = "200px";
//属性中带-的怎么写
divset.style.backgroundColor = "red";
}
</script>
</head>
<body>
<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.worldColor {
color: yellow;
}
</style>
<script>
window.onload = function() {
var divset = document.getElementById('divSet');
divset.style.width = "200px";
//属性中带-的怎么写
divset.style.backgroundColor = "red";
//设置浮动效果(float是关键字)
divset.style.cssFloat = 'right';
//通过class设置属性
divset.className = 'worldColor'; }
</script>
</head>
<body>
<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
</body>
</html>
1.7 div的显示与隐藏
通过设置样式的display控制显示与隐藏.
block 表示显示,none表示隐藏
1.8 form表单的提交
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function() {
var form1 = document.getElementById('form1');
form1.onsubmit = function() {
var age = document.getElementById('txtAge').value;
if (isNaN(age)) {
alert('年龄输入有误!');
return false;
}
return true;
};
}
</script>
</head>
<body>
<form id="form1" action="提交表单.html">
<input type="text" id="txtAge" />
<input type="submit" id="submit1" />
</form>
</body>
</html>
最新文章
- html学习第二天—— 第八章—— CSS选择器
- Tastypie与Backbone交互
- java web 学习 --第二天(Java三级考试)
- [转]JavaScript跨域总结与解决办法
- css3实现边框圆角样式
- c#之财务系统数据库
- Nginx基本配置备忘
- 向Array中添加堆排序
- extern的意思
- MySQL(8):数值类型详细分析
- 亲测 asp.net 调用 webservice返回json
- JavaScript数学函数的操作
- MVC中ActionFilterAttribute用法并实现统一授权
- HDU 1420 Prepared for New Acmer【中国剩余定理】
- HDU 1880 字符串hash 入门题
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- unable to apply changes:plugins ";App links assistant";,firebase services won&#39;
- lua语言自学知识点----简单了解
- 【HNOI2016】最小公倍数
- You have new mail in /var/spool/mail/root