1.核心DOM
核心 DOM - 针对任何结构化文档的标准模型
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
Document 对象的理解:
第一点:Document 它管理了所有的 HTML 文档内容。
第二点:document 它是一种树结构的文档。有层级关系。
第三点:它让我们把所有的标签都对象化
第四点:我们可以通过 document 访问所有的标签对象
2. DOM方法
1. 获取Element对象
- getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName():根据元素标签获取元素对象们。返回值是一个数组
- getElementsByClassName(): 根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="test" name="username"/>
<script type="text/javascript">
//2.根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
//alert(divs.length);//5
//3.根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
// alert(div_cls.length);//2
//4.根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
//alert(ele_username.length);//1
var table = document.createElement("table");
alert(table);//[object HTMLTableElement]
</script>
</body>
注: document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询 如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上四个方法,一定要在页面加载完成之后执行,才能查询到标签对象
2. 创建其他DOM对象:
- createAttribute(name): 用于创建一个指定名称的属性,并返回Attr 对象属性,创建一个属性节点
- createComment(): 可创建注释节点
- createElement(): 创建元素节点。
- createTextNode(): 创建文本节点。
3. 属性
Element:元素对象
1. 获取/创建:通过document来获取和创建
2. 方法:
- 1.removeAttribute():删除属性
- 2.setAttribute():设置属性
<body>
<a>百度</a><br/>
<input type="button" id="btnSet" value="设置超链接"/><br/>
<input type="button" id="btnRemove" value="删除超链接"/>
<script type="text/javascript">
document.getElementById("btnSet").onclick = function () {
var link = document.getElementsByTagName("a")[0];//document.getElementsByName()得到的是一个数组
link.setAttribute("href","http://www.baidu.com");
//link.href = "http://www.baidu.com";
}
document.getElementById("btnRemove").onclick = function () {
var link = document.getElementsByTagName("a")[0];//document.getElementsByName()得到的是一个数组
link.removeAttribute("href");
}
</script>
</body>
4.CRUD dom树:
方法:
- appendChild():向节点的子节点列表的结尾添加新的子节点。
- removeChild():删除(并返回当前节点的指定子节点。
- replaceChild():用新节点替换一个子节点。
属性:
- parentNode 返回节点的父节点。
Node:节点对象,其他5个的父对象
特点:所有dom对象都可以被认为是一个节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_Node对象</title>
</head>
<!--
* appendChild():向节点的子节点列表的结尾添加新的子节点。
* removeChild():删除(并返回当前节点的指定子节点。
* replaceChild():用新节点替换一个子节点。
-->
<style type="text/css">
div{
border:1px solid red
}
#div1{
width : 300px;
height: 200px;
}
#div2{
width: 200px;
height: 100px;
}
#div3{
width: 100px;
height: 50px;
}
</style>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<!--超链接功能:
1.可以被点击:样式
2.点击后跳转到href指定的url
需求:保留1功能,去掉2功能
实现:href="javascript:void(0);"-->
<a href="javascript:void(0)" id="add">添加子节点</a><br/>
<a href="javascript:void(0)" id="del">删除子节点</a>
<script type="text/javascript">
document.getElementById("add").onclick = function () {
//给div1添加子节点
//创建div节点
var div1 = document.getElementById("div1");
var div3 = document.createElement("div");
div3.innerHTML = "div3";
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
document.getElementById("del").onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
var div2 = document.getElementById("div2");
document.write("<br/>div2的父节点是" + div2.parentNode.id);
</script>
</body>
</html>