一、DOM的含义
DOM:它是W3C国际组织的一套Web标准。它以树形结构表示文档,定义了遍历、检查和修改各节点的属性和方法。
W3C组织将DOM分为以下几种不同版本:
Core DOM:定义人任意结构文档的标准对象集合
XML DOM:定义了针对XML文件的标准对象集合
HTML DOM:定义了针对HTML文件的标准对象集合
DOM CSS:定义了在程序中操作CSS样式的接口
DOM Events:给DOM对象添加事件处理
二、HTML DOM
HTML DOM定义了访问和操作HTML文档的标准方法,它把HTML文档呈现为带有元素、属性和文本的树形结构,定义了访问HTML文档对象的属性、方法和事件。
HTML文档中的每个成分都是一个节点
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文档节点
每一个HTML属性是一个属性节点
注释属于注释节点
树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
DOM:文档对象模型
可以干什么?
1.获取一个元素
2.移除一个元素
3.创建一个元素
4.向页面里面添加一个元素
5.给元素绑定一些事件
6.获取元素的属性
7.给元素添加一些css样式
*DOM的核心对象就是document对象
document对象是浏览器内置对象的一个对象,里面存储这专门用来操作元素的各种方法
练习代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="添加节点" onclick="add()">
<input type="button" value="删除节点" onclick="del()">
<input type="button" value="修改节点" onclick="update()">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script type="text/javascript">
//用标签的名字寻找标签
var ul=document.querySelector("ul")
//添加一个新的li标签
function add(){
//创建一个节点
var li=document.createElement("li")
li.innerHTML="新添加的节点"
//appendChild():向一个标签中添加子标签(子元素)
ul.appendChild(li)
}
function del(){
//删除第一个子元素
//document.firstElementChild
var li =document.querySelectorAll("li")[0]
//ul.removeChild(li)//删除的使标签中指定的子元素
ul.remove()//会将所有的子元素清空,包括元素本身
}
function update(){
var li=document.createElement("li")
li.innerHTML="修改节点"
}
</script>
</body>
</html>
*通过各种标签、属性获取新的标签
代码练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.sp {
color: aquamarine;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点击" />
<div id="div1">
这是div1
</div>
<div id="div2">
这是div2
</div>
<ul>
<li>
有序列表项
</li>
</ul>
<span class="sp">
这是一个span标签
</span>
<p class="sp"></p>
<input type="text" name="uname" value="">
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
//通过标签的id属性获取元素
var div1=document.getElementById("div1")
div1.innerHTML="更改后的div"
var div1=document.getElementById("div2")
div2.innerHTML="更改后的div"
//通过标签名来获取标签
var divs = document.getElementsByTagName("div")
console.log(divs)
for(var i=0;i<divs.length;i++){
console.log(divs[i])
divs[i].innerHTML="更改后的div"
}
var ul=document.getElementsByTagName("ul")[0]
console.log(ul)
//获取到所有属性class的值是sp的标签
var els = document.getElementsByClassName("sp")
console.log(els)
//通过name属性来获取标签
var names = document.getElementsByName("uname")
console.log(names)
// 通过选择器名称来获取,只能获取第一个
var querys =document.querySelectorAll(".sp")
console.log(querys)
//通过对应的选择器获取所有瞒足条件的标签
var queryAll =document.querySelectorAll(".sp")
console.log(queryAll)
//通过标签的id属性的值获取标签
console.log(div1)
}
</script>
</body>
</html>