本人小白一枚,欢迎大家一起讨论学习,如有错误,还望大家指教。
简述BOM:
概念: Browser Object Model 浏览器对象模型,就是将浏览器的各个部分封装成对象。
组成:
Window
:窗口对象。Navigator
:浏览器对象。Screen
:显示器屏幕对象。History
:历史记录对象。Location
:地址栏对象。
Window:窗口对象
方法:
- 与弹出框有关的方法:
alert()
:显示带有一段消息和一个确认按钮的警告框。confirm()
:显示带有一段消息以及确认和取消按钮的对话框。- 如果用户点击确定按钮,则方法返回true。
- 如果用户点击取消按钮,按方法返回false。
prompt()
:显示可提示用户输入的对话框,返回值是用户输入的值。
- 与打开关闭有关的方法:
close()
:关闭浏览器窗口。open()
:发开一个新的浏览器窗口,返回一个新的window对象。
- 与定时器有关的方法:
setTimeout(js代码或者方法对象名,毫秒值)
:在指定的毫秒数调用函数或计算表达式。clearTimeout()
:取消由setTimeout()方法设置的timeout。setInterval()
:按照指定的周期(以毫秒计)来调用函数或计算表达式。clearInterval()
:取消由setInterval()设置的timeout。
<script>
var obj1 = setTimeout(confirm("我是定时器"), 1000);
// 取消定时器
clearTimeout(obj1);
var obj2 = setInterval(confirm("我是循环定时器"), 1000);
// 取消循环定时器
clearInterval(obj2);
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align: center;
}
span {
color: red;
}
</style>
</head>
<body>
<p>
<span id = time>5</span> 秒之后跳转到百度首页.......
</p>
<script>
var num = 5;
var time = document.getElementById("time");
function tiaohzhuan() {
num--;
if (num <= 0) {
location.href = "https://www.baidu.com.cn";
}
time.innerHTML = num;
}
setInterval(tiaohzhuan, 1000);
</script>
</body>
5秒之后将会自动跳转到百度
属性:
- 获取其他BOM对象:
History
Location
Navigator
Screen
- 获取DOM对象
document
特点 :
- Window对象不需要创建可以直接使用,window.方法名();
- Window引用可以省略。
Location:地址栏对象
创建(获取):
- window.location或location
方法:
reload()
:重新加载当前页面,其实就是刷新(F5)。
属性:
href
:设置或返回完成的URL。search
:从问号(?)开始的URL,用来获取请求的参数。hash
:从井号(#)开始的URL(锚)。host
:主机名和当前URL的端口号。hostname
:当前URL的主机名。port
:当前URL的端口号。protocol
:当前URL的协议。
History:历史记录对象。
创建(获取):
- window.history或history
方法:
back()
:加载history列表中的前一个URL。forward()
:加载history列表中的下一个URL。go(参数)
:加载history列表中的某个具体页面,参数是正数时表示前进几个历史记录,参数是负数是后退几个历史记录。
属性:
length
:返回当前窗口历史列表中的URL数量。
剩余的Screen显示器屏幕对象和Navigator浏览器对象咋们在这里就不介绍了。
简述DOM对象
概念: Document Object Model 文档对象模型,将标记语言文档的各个部分封装成对象,可以使用这些对象对标记语言进行CRUD的动态操作。
我们可以通过图片来简单了解下DOM树
W3C标准将其分为3个不同的部分:
- 核心DOM:针对任何结构化文档的标准模型。
- Document:文档对象。
- Element:元素对象。
- Attribute:属性对象。
- Comment:注释对象。
- Node:节点对象,是其他5个的父类对象。
- XML DOM: 针对XML文档的标准模型。
- HTML DOM:针对HTML文档的标准模型。
核心DOM模型:
-
Document:文档对象。
- 创建: window.document或者document(window可以省略不写)。
- 方法:
- 获取Element对象的方法:
getElementById():根据id属性值获取元素对象,id属性值一般唯一
getElementsByTagName():根据元素名称获取元素对象们,返回值是一个数组
getElementsByClassName():根据Class属性值获取元素对象们,返回值是一个数组
getElementsByName():根据name属性值获取元素对象们,返回值是一个数组
- 创建其他DOM对象
createAttribute(element):创建属性对象。
createElement(element):创建元素对象。
createComment(element):创建注释对象。
createTextNode(element):创建文本对象。
- 获取Element对象的方法:
-
Element:元素对象。
- 创建: 通过document来获取和创建。
- 方法:
removeAttribute():删除属性。
setAttribute():设置属性。
-
Node:节点对象,其他5个对象的父对象(这里就不对五个对象进行详细介绍了)。
- 特点: 所有dom对象都可以被认为一个节点。
- 方法:
- CRUD dom树:
appendChild():向节点的子节点列表的结尾添加新的子节点。
removeChild():删除(并返回)当前节点的指定子节点。
replaceChild():用新的节点替换一个子节点。
- 属性:
parentNode:返回节点的父节点。
- CRUD dom树:
<body>
<a>点我试一下</a>
<input id = "set" value = "设置属性" type = "button"/>
<input id = "remove" value ="删除属性" type = "button"/>
<script>
var setElement = document.getElementById("set");
var aElement = document.getElementsByTagName("a")[0];
setElement.onclick = function () {
aElement.setAttribute("href", "https://www.baidu.com.cn")
};
var removeElement = document.getElementById("remove");
removeElement.onclick = function () {
aElement.removeAttribute("href");
}
</script>
</body>
案例:动态删除表格,使用两种方式,一种是通过获取Dom节点,一种通过innerHTML来完成
<form action="javascript:void(0);">
<input type="text" placeholder="请输入编号" name="number" id="number">
<input type="text" placeholder="请输入姓名" name="username" id="username">
<input type="text" placeholder="性别" name="sex" id="sex">
<input type="submit" value="添加" onclick="create()">
</form>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td><a onclick="remove(this)" href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td><a onclick="remove(this)" href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>金角大王</td>
<td>?</td>
<td><a onclick="remove(this);" href="javascript:void(0);">删除</a></td>
</tr>
</table>
<script>
function remove(obj) {
// 通过parentNode获取table元素,a->td->tr->table
var tableElement = obj.parentNode.parentNode.parentNode;
var trElement = obj.parentNode.parentNode;
// 删除所选中的行,即移除该节点
tableElement.removeChild(trElement);
}
function create() {
var numberString = document.getElementById("number").value;
if (!numberString) {
alert("请填写编号");
return;
}
var usernameString = document.getElementById("username").value;
if (!usernameString) {
alert("请填写姓名");
return;
}
var sexString = document.getElementById("sex").value;
if (!sexString) {
alert("请填写性别");
return;
}
// 获取表格对象
var tableElement = document.getElementsByTagName("table")[0];
// 通过innerHTML方式来操作表格
tableElement.innerHTML += "<tr><td>" + numberString + "</td>" +
"<td>"+ usernameString +"</td>" +
"<td>" + sexString + "</td>" +
"<td><a href='javascript:void(0);' onclick='remove(this);'>删除</a>" + "</td></tr>";
// 通过Dom节点来操作表格
// var trElement = document.createElement("tr");
// var td1Element = document.createElement("td");
// var numberElement = document.createTextNode(numberString)
// td1Element.appendChild(numberElement);
// trElement.appendChild(td1Element);
// var td2Element = document.createElement("td");
// var usernameElement = document.createTextNode(usernameString)
// td2Element.appendChild(usernameElement);
// trElement.appendChild(td2Element);
// var td3Element = document.createElement("td");
// var sexElement = document.createTextNode(sexString);
// td3Element.appendChild(sexElement);
// trElement.appendChild(td3Element);
// var td4Element = document.createElement("td");
// var aElement = document.createElement("a");
// aElement.setAttribute("href", "javascript:void(0);");
// aElement.setAttribute("onclick", "remove(this)");
// var textElement = document.createTextNode("删除");
// aElement.appendChild(textElement);
// td4Element.appendChild(aElement);
// trElement.appendChild(td4Element);
// tableElement.appendChild(trElement);
}
</script>
-
HTML DOM
- 标签体的设置和获取:html元素对象.innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
- 提前定义号类选择器的样式,通过元素的className属性来设置其class属性值。
案例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div2 {
margin-top: 5px;
border: 1px solid blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div>div2</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function () {
div1.style.border = "1px solid red";
div1.style.width = "100px";
div1.style.height = "100px";
}
var div2 = document.getElementsByTagName("div")[1];
div2.onclick = function () {
div2.className = "div2";
}
</script>
</body>
未触发修改事件的样式:
单击触发玩的样式:
事件监听机制:
概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如单击、双击、键盘按下了、鼠标移动了。
- 事件源:组件。如按钮、文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生各某个事件,则触发某个代码监听器代码。
常见的事件:
- 点击事件:
oncllick:单击事件。
onddblclick:双击事件。
- 焦点事件:
onblur:失去焦点时触发。
onfocus:元素获得焦点时触发。
- 加载事件:
onload:一张页面或一幅图像完成加载时触发。
- 鼠标事件:
onmousedown:鼠标按键按下时触发。
onmouseup:鼠标按键被松开时触发。
onmousemove:鼠标被移动时触发。
onmouseover:鼠标移到某元素之上时触发。
onmouseout:鼠标从某元素移动时触发。
- 键盘事件:
onkeydown:某个键盘按键被按下时触发。
onkeyup:某键盘按键被松开时触发。
onkeypress:某个按键被按下并松开时触发。
- 选择和改变:
onchange:域的内容被改变时触发。
onselect:文本被选中。
- 表单事件:
onsubmit:确定按钮被点击时触发。
onreset:重置按钮被点击时触发。
案例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border: 1px solid;
margin-left: 600px;
margin-top: 60px;
}
th,td {
border: 1px solid;
width: 60px;
height: 28px;
text-align: center;
}
#all, #none {
margin-top: 2px;
}
#all {
margin-left: 600px;
}
</style>
<script>
window.onload = function () {
document.getElementById("checkbox1").onclick = function () {
var inputs = document.getElementsByTagName("input");
if (inputs[0].checked) {
for (var i = 0;i < inputs.length;i++) {
inputs[i].checked = true;
}
} else {
for (var i = 0;i < inputs.length;i++) {
inputs[i].checked = false;
}
}
}
var trs = document.getElementsByTagName("tr");
//2.遍历
for (var i = 0; i < trs.length; i++) {
//移到元素之上
trs[i].onmouseover = function() {
// trs[i].style.background = "pink";错误写法
this.style.background = "pink";
}
//移出元素
trs[i].onmouseout = function(){
this.style.background = "white";
}
}
// 全部选中
document.getElementById("all").onclick = function (ev) {
var inputs = document.getElementsByTagName("input");
for (var i = 0;i < inputs.length;i++) {
inputs[i].checked = true;
}
}
// 全不选中
document.getElementById("none").onclick = function (ev) {
var inputs = document.getElementsByTagName("input");
for (var i = 0;i < inputs.length;i++) {
inputs[i].checked = false;
}
}
// 反选
document.getElementById("opposite").onclick = function (ev) {
var inputs = document.getElementsByTagName("input");
for (var i = 0;i < inputs.length;i++) {
if (inputs[i].checked === false) {
inputs[i].checked = true;
}
else if (inputs[i].checked === true) {
inputs[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<table id = "table">
<tr id="tr1">
<th><input type="checkbox" id="checkbox1"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr id="tr2">
<td><input type="checkbox"></td>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr id="tr3">
<td><input type="checkbox"></td>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr id="tr4">
<td><input type="checkbox"></td>
<td>3</td>
<td>沙悟净</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<button id="all">全部选中</button>
<button id="none">全不选中</button>
<button id="opposite">反选</button>
</body>