- DOM：Document Object Model(文本对象模型)
- D：文档 – html 文档 或 xml 文档
- O：对象 – document 对象的属性和方法
- M：模型
- DOM 是针对xml(html)的基于树的API。
- DOM树:节点（node）的层次。
- DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
- DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
-
节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合
-
getElementById()
寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null。
var element = document.getElementById(ID);
该方法只能用于 document 对象 -
getElementsByTagName()
寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“content”);
var paras = container.getElementsByTagName(“p”);
alert(paras.length);
在HTML中添加js代码
- 在HTML中添加js代码有三种方式
- 第一种:在HTML元素中嵌套JavaScript代码,这样做html代码和js代码无法分离,不方便维护
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<button onclick="alert('HelloWorld')">ClickMe</button>
</body>
</html>
- 第二种方式:将javascript代码写在html文件的头部,这样无法获取到HTML中body中的元素,因为,HTML文件按顺序加载节点,在加载到js代码的时候,body中的节点还未被解析
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var bats = document.getElementsByTagName("button");
alert(bats.length);
bats[0].onclick = function(){
alert("HelloWorld");
}
</script>
</head>
<body>
<button> ClickMe</button>
</body>
</html>
- 第三种方式将JavaScript代码写在HTML文件的底部,这样虽然可以获取到HTML文件中body中的元素,但是这样的写法不适合开发的习惯,所以也不推荐使用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<button> ClickMe</button>
</body>
</html>
<script type="text/javascript">
var bats = document.getElementsByTagName("button");
alert(bats.length);
bats[0].onclick = function(){
alert("HelloWorld");
}
</script>
- 运行结果
- javascript中有一个onload事件,表示整个html文件加载完成后的事件.这个事件属于一个浏览器窗口,在javascript中使用windo对象表示一个浏览器窗口
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
var bats = document.getElementsByTagName("button");
alert(bats.length);
bats[0].onclick = function(){
alert("HelloWorld");
}
}
</script>
</head>
<body>
<button> ClickMe</button>
</body>
</html>
- 但是一般会将javascript代码单独写在一个文件中,然后在html页面中导入该文件