一。获取自定义属性值
element.属性//获取元素内置属性值如:class名,id名等
element.getAttribute(‘属性’)//获取自定义属性值
二。设置属性值
element.属性=‘值’ //设置内置属性值
element.setAttribute(‘属性’,‘值’)//设置自定义属性值
三.移出属性
element.removeAttribute(‘属性’)
四.tab栏切换案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab栏切换</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
height: 30px;
width: 320px;
margin: 10px auto;
}
li{
height: 30px;
width: 80px;
text-align: center;
list-style: none;
}
.tab_list ul{
height: 30px;
width: 320px;
line-height: 30px;
background-color: antiquewhite;
display: flex;
}
.current{
color: white;
background-color: red;
}
.tab_con .item {
display: none;
}
.tab_con .show{
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>价格</li>
<li>保障</li>
<li>评价</li>
</ul>
</div>
<div class="tab_con">
<div class="item show">
商品介绍模块内容
</div>
<div class="item">
价格介绍模块内容
</div>
<div class="item">
保障介绍模块内容
</div>
<div class="item">
评价介绍模块内容
</div>
</div>
</div>
<script>
var tab_list=document.querySelector('.tab_list');
var lis=tab_list.querySelectorAll('li');
var oItems=document.querySelector('.tab_con').querySelectorAll('.item')
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i)
lis[i].onclick=function(){
for(var i =0 ;i<lis.length;i++){
lis[i].className='';
}
this.className='current';
var index=this.getAttribute('index');
for(var i=0;i<oItems.length;i++){
oItems[i].className='item';
}
oItems[index].className='show';
}
}
</script>
</body>
</html>
五.节点
使用DOM获取元素逻辑性不强比较繁琐,所以采用父子兄弟关系的节点获取
document.parentNode//获取元素父节点
parentNode.childNodes//获取指定节点的子节点的集合,包含元素节点,文本节点等--不常用
parentNode.children//获取指定节点的子元素节点---常用(伪数组)
parentNode.firstChild//返回第一个子节点,找不到返回null,包含所有节点
parentNode.lastChild//最后一个子节点
firstElementChild返回第一个子元素节点---ie9版本支持
firstElementChild //返回最后一个子元素节点--ie9版本支持
解决方案:采用children[index]的办法
六。节点案例
1.下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单(节点)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: azure;
}
a{
text-decoration: none;
color: darkcyan;
}
li{
list-style: none;
}
.nav_item{
height: 120px;
width: 200px;
text-align: center;
display: flex;
margin: 0 80px;
padding: 20px 40px;
}
.nav_item li ul{
display: none;
}
.nav_item li ul li{
height: 40px;
width: 45px;
line-height: 45px;
text-align: center;
border: 1px solid orangered;
}
.nav_item li{
height: 20px;
width: 48px;
}
.nav_item li a:hover,.nav_item li ul li:hover{
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="nav">
<ul class="nav_item">
<li>
<a href="#">微博</a>
<ul>
<li class="l1">菜单1</li>
<li>菜单2</li>
</ul>
</li>
<li>
<a href="#">qq</a>
<ul>
<li class="l1">菜单1</li>
<li>菜单2</li>
</ul>
</li>
<li>
<a href="#">读书</a>
<ul>
<li class="l1">菜单1</li>
<li>菜单2</li>
</ul>
</li>
<li>
<a href="#">相声</a>
<ul>
<li class="l1">菜单1</li>
<li>菜单2</li>
</ul>
</li>
</ul>
</div>
<script>
var olis=document.querySelector('.nav_item');
var lis=olis.children;
for(var i =0 ; i<lis.length;i++){
lis[i].onmouseover=function(){
this.children[1].style.display='block';
}
lis[i].onmouseout=function(){
this.children[1].style.display='none';
}
}
</script>
</body>
</html>
七。兄弟节点
nextSibling//下一个兄弟元素
previousSbiling//上一个兄弟节点
nextElementSbiling//下一个兄弟元素节点
previousElementSbiling//上一个兄弟元素节点
封装兄弟节点:
八。创建节点
createElement(‘tagname’)//创建节点
appendChild(child)//添加节点(末尾)
insertBefore(child,指定元素)//在前面添加
1.发布留言案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发布留言</title>
<style>
*{
margin: 0;padding: 0;
}
.leaving_a_message{
margin: 15px 10px;
}
ul li{
height: 25px;
width: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="leaving_a_message">
<div class="fabu">
<textarea cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
</div>
</div>
<script>
window.onload=function(){
var text=document.querySelector('textarea');
var btn=document.querySelector('button');
var ul=document.querySelector('ul');
btn.onclick=function(){
if(text.value==''){
alert("请输入内容")
}else{
var li=document.createElement('li');
li.innerHTML=text.value;
ul.insertBefore(li,ul.children[0]);
}
}
}
</script>
</body>
</html>
九。删除节点
removeChild(child) //删除节点
1.删除留言案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发布留言</title>
<style>
*{
margin: 0;padding: 0;
}
.leaving_a_message{
margin: 15px 10px;
}
ul li{
height: 25px;
width: 200px;
background-color: antiquewhite;
}
li a{
float: right;
}
</style>
</head>
<body>
<div class="leaving_a_message">
<div class="fabu">
<textarea cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
</div>
</div>
<script>
window.onload=function(){
var text=document.querySelector('textarea');
var btn=document.querySelector('button');
var ul=document.querySelector('ul');
btn.onclick=function(){
if(text.value==''){
alert("请输入内容");
return false;
}else{
var li=document.createElement('li');
li.innerHTML=text.value+"<a href='javascript:;'>删除</a>";
ul.insertBefore(li,ul.children[0]);
var as=document.querySelectorAll('a');
for(var i =0;i<as.length;i++){
as[i].onclick=function(){
ul.removeChild(this.parentNode);
}
}
}
}
}
</script>
</body>
</html>
十。复制节点
closeNode()//复制节点(空false浅拷贝只复制标签,true深拷贝复制内容)
十一.动态生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态表格</title>
<style>
table{
width: 240px;
}
tr{
height: 35px;
border-bottom: 0;
}
</style>
</head>
<body>
<div>
<table border='1' cellspacing='0' align="center">
<caption>信息</caption>
<colgroup>
<col span="4" style="background-color: aqua;">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
window.onload=function(){
var student=[
{
name:'sdsf',
sbuject:"javascript",
score:'12',
},
{
name:'sdsf',
sbuject:"javascript",
score:'12',
},
{
name:'sdsf',
sbuject:"javascript",
score:'12',
},
{
name:'sdsf',
sbuject:"javascript",
score:'12',
},
{
name:'sdsf',
sbuject:"javascript",
score:'12',
},
];
var oTbody=document.querySelector('tbody');
for(var i=0; i<student.length; i++){
var tr=document.createElement('tr');
oTbody.appendChild(tr);
for(var k in student[i]){
var td=document.createElement('td');
td.innerHTML=student[i][k];
tr.appendChild(td);
}
var td=document.createElement('td');
td.innerHTML='<a href="javascript:;">删除</a>'
tr.appendChild(td);
var del=document.querySelectorAll('a');
for(var i=0;i<del.length;i++){
del[i].onclick=function(){
oTbody.removeChild(this.parentNode.parentNode);
}
}
}
}
</script>
</body>
</html>