核心DOM
Document：文档对象
创建(获取)
在html dom模型中可以使用window对象来获取
1. window.document
2. document
方法
-
获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组 -
创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document对象</title>
</head>
<body>
<!--
<div id="div1">div1</div>
<div id="div2">div1</div>
<div class="cls1">div3</div>
<div class="cls1">div3</div>
<input type="text" name="username">
-->
<!--<input type="text" name="username">
<input type="button"id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<a>点我试一试</a>-->
<div id =div1>
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<script>
//var divs=document.getElementsByTagName("div");
/* var btn_set=document.getElementById("btn_set");
btn_set.onclick=function (qualifiedName, value) {
var elment_a=document.getElementsByTagName("a")[0];
elment_a.setAttribute("href","https://www.baidu.com")
}*/
//1、获取超链接
var element_a=document.getElementById("del")
//2、绑定单击事件
element_a.onclick=function () {
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.removeChild(div2);
}
var div2=document.getElementById("div2");
var div1=div2.parentNode;
alert(div1)
</script>
</body>
</html>
Node：节点对象（其他5个的父对象）
**特点**：所有dom对象都可以被认为是一个节点
**方法**：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
**属性**：
* parentNode 返回节点的父节点。
HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式
1. 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
Exercise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加">
</div>
<table border="1" width="50%">
<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>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
</tr>
</table>
<script>
/*分析：
1、添加：
1、给添加按钮绑定单击事件
2、获取文本框内容
3、创建td，设置td的文本为文本框的内容
4、创建tr
5、将tda添加到tr中
6、获取table,将tr添加到table中
2、删除
1、确定点击是哪一个超链接
<a href="javascript:void();οnclick="delTr(this);">删除</a>
2、怎么删除
removeChild();通过父节点删除子节点
*/
//1、获取按钮
/*document.getElementById("btn_add").οnclick=function () {
//2、获取文本框内容
var id =document.getElementById("id").value;
var name =document.getElementById("name").value;
var gender =document.getElementById("gender").value;
//3、创建td 赋值td的标签体
//id 的td
var td_id=document.createElement("td");
var text_id=document.createTextNode(id);
td_id.append(text_id);
//name
var td_name=document.createElement("td");
var text_name=document.createTextNode(name);
td_name.append(text_name);
//gender
var td_gender=document.createElement("td");
var text_gender=document.createTextNode(gender);
td_gender.append(text_gender);
//a标签
var td_a = document.createElement("td");
var ele_a=document.createElement("a");
ele_a.setAttribute("href","javascript:void()");
ele_a.setAttribute("onclick","delTr(this)")
var text_a=document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4、创建tr
var tr=document.createElement("tr");
//5、添加tr到td中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6、获取table
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
}*/
//用innerHTML添加
document.getElementById("btn_add").οnclick=function () {
//获取文本框的内容
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" +
"<td>"+id+"</td>\n" +
"<td>"+name+"</td>\n" +
"<td>"+gender+"</td>\n" +
"<td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" + " </tr>";
}
function delTr(obj) {
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
1651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
