您的位置：首页 > 其它

什么是DOM

2016-07-12 08:45 471 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8"
/>
<title></title>
<style
type="text/css">
.test{
width:
100px;
height:
100px;
background-color: red;
}

</style>
</head>
<body>
<div
class="test">
hello
</div>
<div
class="test">
hello2
</div>
<div
class="test">
hello3
</div>
<input
type="button"
name="btn" id="btn"
value="click" />
<script
type="text/javascript">
/* DOM
1.什么是DOM（Document Object Modal）
当网页被加载的时候，浏览器为页面生成DOM
被构造为对象的树（倒立的树）
2.从编程的角度看，DOM是针对HTML（HyperText Markup Language），XML的API（Application Programing Interface）应用程序编程接口，js通过操作DOM可以实现添加，移除，修改页面元素 */

// <div>:元素节点
// p1:文本节点
// <-- -->:注释节点
// queryselectorall 方法要在IE8以后好用，是css选择器
var
aDiv = document.querySelectorAll(".test");
// var aDiv1 = document.getElenmentsByClassName("test");
// var aDiv = document.getElementsByTagName("test");
var
oBtn = document.getElementById("btn");
for
(var i = 0;i
< aDiv.length;i++) {
aDiv[i].innerHTML
= "bye.js";
}
oBtn.onclick
= function(){

aDiv[1].innerHTML
= "hello2 "; //js操作DOM，实现修改页面元素
}
// 通过js访问HTML元素，一共6个元素
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DOM基础

相关文章推荐

新的分享

章节导航