说明: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('请输入年龄', '10');
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>
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>
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=" 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=" 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>
