版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/83013594
DOM对象
文档对象模型,定义访问和操作结构化文档(HTML)的方式，也就是编辑HTML文档
在html加载到内存中的时候会形成一个树形结构
- 文档节点-----document
- 元素节点-----标签
- 属性节点-----标签的属性
- 文本节点-----标签体
常用操作
1.获取对象
- document.getElementById("id值"); 返回一个对象
- document.getElementsByTageName("标签名") 返回多个对象
- document.getElementsByName("name属性值") 返回多个
- document.getElementsByClassName("class属性值") 返回多个
2.对象的操作
2.1 对属性操作：
- 获取：对象.value
- 赋值: 对象.value=""
2.2 对标签体操作：
- 获取：对象.innerHTML
- 赋值：对象.innerHTML=""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
<script type="text/javascript">
function setSpan(){
var spanObj = document.getElementById("span01");
spanObj.innerHTML="边江";
}
function getSpan(){
var spanObj = document.getElementById("span01");
alert(spanObj.innerHTML);
}
</script>
</head>
<body>
<button onclick="setSpan()">设置</button>
<button onclick="getSpan()">获取</button>
<span id="span01"></span>
</body>
</html>
[点击并拖拽以移动]
2.3 对style操作：
- 获取：对象.style.backgroundColor
- 赋值：对象.style.backgroundColor=""
3. document的api
- createAttribute(name) 创建属性节点
- createElement() 创建元素节点
- createTextNode() 创建文本节点
4. Element的api
- appendChild() 向元素后面追加节点