DOM
-
概念: Document object Model 文档对象模型
*将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作 -
W3C DOM标准被分为3个不同的部分:
*核心DOM -针对任何结构化文档的标准模型 * Document :文档对象 * Element :元素对象 * Attribute :属性对象 * Text :文本对象 * Comment :注释对象 * Node :节点对象，其他5个的父对象 * XML DOM-针对XML文档的标准模型 * HTML DOM -针对HTML文档的标准模型 -
核心DOM模型:
-
Document :文档对象
1.创建(获取):在html dom模型中可以使用window对象来获取 1. window. document 2. document 2.方法: 1.获取Element对象: 1. getElementById()，根据id属性值获取元素对象。 id属性值一-般唯一 2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组 *如：var list=document.getElementsByTagName("UL")[0] 4. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组 5. getElementsByName():根据name属性值获取元素对象们。返回值是一一个数组 2.创建其他DOM对象: createAttribute(name) 创建拥有指定名称的属性节点,并返回新的Attr对象。 createComment() 创建注释节点。 createElement( ) 创建元素节点。 createTextNode( ) 创建文本节点。 3.属性 -
Element :元素对象
1.获取/创建:通过document来获取和创建 2.方法: 1. removeAttribute() :删除属性 2. setAttribute() :设置属性 -
Node :节点对象，其他5个的父对象
* 特点:所有dom对象都可以被认为是一个节点* * 方法: * CRUD dom树: * appendChild() :向节点的子节点列表的结尾添加新的子节点。 * removeChild() : 删除(并返回)当前节点的指定子节点。 * replaceChild() :用新节点替换一个子节点。 * 属性: * parentNode 返回当前节点的父节点。
-
**案例：**动态表格，添加删除功能（使用document）
<style type="text/css">
table{
margin:auto;
width: 500px;
text-align: center;
border: 1px solid;
}
td,th{
border: 1px solid;
}
div {
margin: 50px;
text-align: center;
}
</style>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入名称">
<input type="text" id="gender" placeholder="请输入性别">
<input id="btn_add" type="button" value="添加">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script type="text/javascript">
/*
分析：
1.添加
1.给单击按钮添加事件
2.获取文本框的内容
3.创建td，设置td的文本为文本框的内容
4.创建tr,将td添加到tr中
5.获取table，将tr添加到table中
2.删除
1.确定点击的是哪一个超链接
<a href="javascript:void(0);" οnclick="delTr(this);">删除</a>
2.怎么删除？
removeChild() 通过父节点删除子节点；
*/
//1.给单击按钮添加事件
document.getElementById("btn_add").onclick = function(){
//2.获取文本框的内容
var id = document.createTextNode(document.getElementById("id").value);
var name = document.createTextNode(document.getElementById("name").value);
var gender = document.createTextNode(document.getElementById("gender").value);
//3.创建td，设置td的文本为文本框的内容
var td_id = document.createElement("td");
td_id.appendChild(id);
var td_name = document.createElement("td");
td_name.appendChild(name)
var td_gender = document.createElement("td");
td_gender.appendChild(gender)
var ele_a = document.createElement("a");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
ele_a.setAttribute("href", "javascript:void(0);");
ele_a.setAttribute("onclick", "delTr(this)");
var td_a = document.createElement("td");
td_a.appendChild(ele_a)
//4.创建tr,将td添加到tr中
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//5.获取table，将tr添加到table中
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//创造一个删除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
HTML DOM
- 标签体的设置和获取: innerHTML
**案例：**动态表格，添加删除功能（使用innerHTML）
<style type="text/css">
table{
margin:auto;
width: 500px;
text-align: center;
border: 1px solid;
}
td,th{
border: 1px solid;
}
div {
margin: 50px;
text-align: center;
}
</style>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入名称">
<input type="text" id="gender" placeholder="请输入性别">
<input id="btn_add" type="button" value="添加">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script type="text/javascript">
/*
分析：
1.添加
2.删除
1.确定点击的是哪一个超链接
<a href="javascript:void(0);" οnclick="delTr(this);">删除</a>
2.怎么删除？
removeChild() 通过父节点删除子节点；
*/
//使用innerHTML添加
document.getElementById("btn_add").onclick = function(){
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += "<tr>\n" +
" \t <td>"+id+"</td>\n" +
" \t <td>"+name+"</td>\n" +
" \t <td>"+gender+"</td>\n" +
" \t <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
" \t</tr>";
}
//创造一个删除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
-
使用html元素对象的属性
-
控制样式
1.使用元素的style属性来设置 如: //修改样式方式1 div1. style.border = "1px solid red"; div1. style.width = "200px"; //font-size--> fontsize div1. style. fontsize = "20px" ; 2.提前定义好类选择器的样式，通过元素的className属性来设置 器class属性值。
