在使用 JavaScript 编写 Web 代码时，有许多 Web API 可供调用。下面是开发Web应用程序或网站时可能使用的所有API和接口（对象类型）的列表。
官方文档[https://developer.mozilla.org/zh-CN/docs/Web/api][https://developer.mozilla.org/zh-CN/docs/Web/api]
DOM介绍
比如a.html这个a.html就是一个文档对象
下面这个是文档对象的模型
document对象就代表整个网页的对象
document基本使用
document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
document他是一个全局属性，在一个web页面里面那个地址都可以访问他
比如
在js里面怎么调用他
用document的getElementById的方法
1
| document.getElementById("id的值")
|
全部代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<p id="a">你好啊</p>
<script type="text/javascript">
var a = document.getElementById("a")
console.log(a);
</script>
</body>
</html>
|
下面有详细的介绍
事件
代码
下面代码的意思<button>创建一个按钮里面有个一个id属性
然后用document的getElementById的方法调用id赋值给a
a添加onclick属性
onclick被触发的时候调用function函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<button id="a">点我</button>
<script type="text/javascript">
var a = document.getElementById("a");
a.onclick=function(){
alert("你好啊")
}
</script>
</body>
</html>
|
Document 的对象方法
| 方法 |
描述 |
getElementById() |
返回对拥有指定 id 的第一个对象的引用 |
getElementsByTagName() |
通过标签名获得一组元素点对象 |
getElementsByName() |
通过name属性获得一组元素对象 |
close() |
关闭用 document.open() 方法打开的输出流，并显示选定的数据 |
open() |
打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
write() |
向文档写 HTML 表达式 或 JavaScript 代码 |
writeln() |
等同于 write() 方法，不同的是在每个表达式之后写一个换行符 |
下面我就演示几个
document的getElementById方法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
语法
1
| document.getElementById("id的值")
|
实咧
下面p标签里面的一个id属性值是a我们可以用getElementById() 来获取p标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<p id="a">你好啊</p>
<script type="text/javascript">
var a = document.getElementById("a")
console.log(a);
</script>
</body>
</html>
|
如果我们想查看里面和修改我们就可以用
document的getElementById方法的
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<p id="a">你好啊</p>
<script type="text/javascript">
var a = document.getElementById("a");
console.log(a.innerHTML);
</script>
</body>
</html>
|
结果
如果我们想修改他很简单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<p id="a">你好啊</p>
<script type="text/javascript">
var a = document.getElementById("a");
a.innerHTML="不好";
console.log(a);
</script>
</body>
</html>
|
结果
document的getElementsByTagName()方法
getElementsByTagName()通过标签名获得一组元素点对象
下面这个h1就是标签名
我们就可以用getElementsByTagName()来获取他getElementsByTagName("h1")
咧
下面应为他获取到的是一个数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<h1>111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555</h1>
<h1>666</h1>
<script type="text/javascript">
var a = document.getElementsByTagName("h1");
console.log(a[0]);
</script>
</body>
</html>
|
document的getElementsByName()方法
getElementsByName() 方法可返回带有指定名称的对象的集合
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| -->
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="text" name="a" value="admin" >
<input type="text" name="a" value="passwd" >
</form>
<script type="text/javascript">
var a = document.getElementsByName("a");
console.log(a);
console.log(a[0].value);
</script>
</body>
</html>
|
