本人小白一枚，欢迎大家一起讨论学习，如有错误，还望大家指教。
简述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对象：
HistoryLocationNavigatorScreen
- 获取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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
