(*/ω＼*)
0%

JS学习_Day4

发表于 分类于
真的是新手入门

1.DOM

Document Object Model（文档对象模型）简称DOM
通过 JavaScript，操作 HTML 元素有三种方法：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

在之前的学习中，我们已经使用过这些方法了

1
2
3
4
5
6
var x=document.getElementById("intro"); //查找 id="intro" 元素
//本例查找 id="lzwl" 的元素，然后查找 id="lzwl" 元素中的所有 <p> 元素
var x=document.getElementById("lzwl");
var y=x.getElementsByTagName("p");
//查找 class="intro" 的元素
var x=document.getElementsByClassName("intro");

之前的学习中我们见过了document.write（）和document.getElementById(id).innerHTML两种函数，可以分别改变 HTML 输出流和改变 HTML 内容。而改变 HTML 属性则需用到document.getElementById(id).attribute
实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<img id="image" src="lzwl.jpg" width="160" height="120">
<script>
document.getElementById("image").src="ics.jpg";
</script>
<p>将量子物理的图标改为ics</p>

</body>
</html>

要修改 HTML 样式则需要用到document.getElementById(id).style.property
实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<p id="p1">lzwl nmsl!</p>
<p id="p2">lzwl nmsl!</p>
<script>
document.getElementById("p2").style.color="red";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

</body>
</html>
  • DOM事件

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//onclick就不介绍了，之前已经接触了很多次
//onchange 事件常结合对输入字段的验证来使用。当用户离开输入框后，执行函数
//onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="lzwl"
}
function mOut(obj){
	obj.innerHTML="ics"
}
</script>

</body>
</html>
  • 向元素添加事件
    addEventListener() 方法用于向指定元素添加事件句柄。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄，可以向一个元素添加多个事件句柄。
    element.addEventListener(event, function, useCapture);
    第一个参数是事件的类型 (如 “click” 或 “mousedown”).
    第二个参数是事件触发后调用的函数。
    第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
    实例：
1
element.addEventListener("click", function(){ alert("Hello World!"); }); //当用户点击元素时弹出 "Hello World!" :
  • 在文档中添加和移除元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<div id="div1">
<p id="p1">lzwl</p>
<p id="p2">ics</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("4.3");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
//以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:
</script>

</body>
</html>
//
  • 移除已存在的元素
1
2
3
4
5
6
7
8
9
10
<div id="div1">
<p id="p1">ics</p>
<p id="p2">lzwl</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child); //ie浏览器不支持该方法
</script>
  • 替换元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
<p id="p1">lzwl</p>
<p id="p2">4.3</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("ics");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

2.BOM

Browser Object Model (浏览器对象模型)简称BOM，它使得JavaScript 有能力与浏览器”对话”。
都是一些常见的

window对象的属性：

  • consfirm：有返回值 ture/false
  • alert:返回值是undefined
  • onscroll:滚动条滚动时触发
  • onresize：浏览器窗口改变时触发 。顶部悬浮 的可以用到
  • open():新打开一个页面，原来的页面还存在，此方法不太常用
  • close():关闭打开的页面，此方法不太常用
  • onload()：dom元素和资源加载完毕之后才执行

history
history：保存了用户上网的历史记录。

  • 后退一页：history.go(-1) / history.back()
  • 前进一页：history.go(1) /history.forward()
  • 前进n页 history.go(n) 后退n页 history.go(-n)

还有其他很多方法，使用起来都比较简单，就不一一列举了，需要使用时再去查找