zptcsoft
commented
5 years ago - MDN DOM
- 阮一峰DOM
- 课程讲义
Open zptcsoft opened 5 years ago
zptcsoft
commented
5 years ago zptcsoft
commented
5 years ago //Node接口
//Node属性
//nodeType nodeName NodeValue textContent
//firstChild lastChild childNodes
//parentNode parentElement
//previousSibling nextSibling
/*
DOM document object model 文档对象模型
DOM 不是javascript的内容，浏览器API，操作文档的API，DOM操作是JS开发里常见任务
DOM 可以把按照树的方式进行组织，页面里面任何一个元素、属性、注释、文本等等树上的节点
DOM 实现文档的操作，找见元素，修改HTML，修改CSS
找见元素的方式
直接找见元素
document.querySelector 可以使用CSS选择器作为参数，返回第一个匹配的元素 Node对象
document.querySelectorAll 可以使用CSS选择器作为参数，返回所有匹配的元素 NodeList对象
document.getElementById 通过ID查找元素，返回唯一的匹配元素 Node对象
document.getElementsByName 通过Name查找元素，返回所有的匹配元素 NodeList对象
document.getElementsByTagName 通过标签名查找元素，返回所有的匹配元素 NodeList对象
document.getElementsByClassName 通过类名查找元素，返回所有的匹配元素 NodeList对象
document.elementFromPoint 通过坐标位置来查找元素
通过节点关系来查找
parentNode
firstChild
lastChild
previousSibiling
nextsibiling
childNodes NodeList对象
修改HTML
增加元素
var div = document.createElement("div");
document.body.appendChild(div);
insertBefore
删除元素
node.parentNode.removeChild(node);
parentNode.removeChild(someChild);
替换元素
replaceChild
修改元素的内容
innerHTML
innerText
修改HTML属性
添加属性
修改属性
删除属性
* */-----表格编辑-----
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dataTable{
border-collapse: collapse;
border: 1px solid #000;
width: 800px;
margin: auto;
}
.dataTable td,.dataTable th{
border: 1px solid #000;
text-align: center;
line-height: 1.5;
}
.dataTable th{
background-color: #333;
color: #fff;
height: 30px;
line-height: 30px;
}
td:nth-child(-n+5){
/*background-color: #f00;*/
}
</style>
</head>
<body>
<table class="dataTable">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
<th>城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>赵丽颖</td>
<td>16</td>
<td>影视</td>
<td>石家庄</td>
<td>
<a href="javascript:">Edit</a>
<a href="javascript:">Del</a>
</td>
</tr>
<tr>
<td>2</td>
<td>姚明</td>
<td>22</td>
<td>体育</td>
<td>上海</td>
<td>
<a href="javascript:">Edit</a>
<a href="javascript:">Del</a>
</td>
</tr>
<tr>
<td>3</td>
<td>丁俊晖</td>
<td>23</td>
<td>台球</td>
<td>无锡</td>
<td>
<a href="javascript:">Edit</a>
<a href="javascript:">Del</a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var dataTable = document.querySelector('.dataTable');
//delList nodelist对象（类数组对象）
var delList = document.querySelectorAll('.dataTable tbody td:last-child a:last-child');
var editList = document.querySelectorAll('.dataTable tbody td:last-child a:first-child');
//实现删除操作
for (var i = 0; i < delList.length; i++) {
delList[i].addEventListener('click',function(event){
var currentDel = event.target;
var currentTr = currentDel.parentNode.parentNode;
//把某个东西从它父亲那儿删除
currentTr.parentNode.removeChild(currentTr);
});
}
//实现修改操作
for (var i = 0; i < editList.length; i++) {
editList[i].addEventListener('click',function(event){
var currentEdit = event.target;
var currentTr = currentEdit.parentNode.parentNode;
var fiveTd = currentTr.querySelectorAll('td:nth-child(-n+5):nth-child(n+3)');
for (var i = 0; i < fiveTd.length; i++) {
fiveTd[i].setAttribute('contenteditable',true);
fiveTd[i].style.boxShadow = 'inset 0px 0px 10px rgba(0,0,255,.5)';
}
currentEdit.innerText = "Save";
})
}
</script>
</body>
</html>左侧滑行菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
.leftMenu{
position: fixed;
left: 0;
top: 0;
width: 60px;
height: 100%;
background-color: #ddd;
transition: left .5s;
}
.leftMenu.close{
left: -60px;
}
.leftButton{
position: fixed;
width: 40px;
height: 40px;
left: 10px;
bottom: 10px;
/*background-color: #00f;*/
transition:background-color .5s;
}
.leftButton.act{
/*background-color: #f00;*/
}
.leftButton i{
font-size: 2em;
color: #FF0000;
transition:transform .5s;
}
.leftButton.act i{
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="leftMenu">
</div>
<div class="leftButton">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</div>
<script type="text/javascript">
var btn = document.querySelector('.leftButton');
var menu = document.querySelector('.leftMenu');
btn.addEventListener("click",function(){
// if(!menu.classList.contains('close')){
// menu.classList.add('close');
// btn.classList.add('act');
// }else{
// menu.classList.remove('close');
// btn.classList.remove('act');
// }
menu.classList.toggle('close');
btn.classList.toggle('act');
})
</script>
</body>
</html>