JavaScript-DOM
JavaScript-DOM
1.DOM介绍
DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
HTML 文档是浏览器解析。封装的对象分为
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
2.获取DOM对象
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下：
| 函数 | 描述 |
|---|---|
| document.getElementById() | 根据id属性值获取，返回单个Element对象 |
| document.getElementsByTagName() | 根据标签名称获取，返回Element对象数组 |
| document.getElementsByName() | 根据name属性值获取，返回Element对象数组 |
| document.getElementsByClassName() | 根据class属性值获取，返回Element对象数组 |
document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。
document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。
document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组。
document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="../img/1.jpg"> <br><br>
<div class="cls">DOM</div> <br>
<div class="cls">DOM学习</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<script>
var document = window.document;
alert(document);
var img = document.getElementById("h1");
alert(img);
var divArr = document.getElementsByTagName("div");
for (let i = 0; i < divArr.length; i++) {
alert(divArr[i]);
}
var hobbyArr = document.getElementsByName("hobby");
for (let i = 0; i < hobbyArr.length; i++) {
alert(hobbyArr[i]);
}
</script>
</body>
</html>
3.操作属性
可以通过div标签对象的innerHTML属性来修改标签的内容。
divArr[0].innerHTML = "666";
var str = divArr[0].innerHTML;
alert(str);