自定义属性的操作
- 获取自定义属性值
- 设置元素属性值
(1)element.setAtrribute(‘属性’,'值‘);
主要针对于自定义属性
div.setAtrribute(‘index’,2);
(2)element.属性=‘值’;
设置内置属性
div.id = ‘test’; - 移除属性值
removerAttribute(属性);
div.removeAttribute(‘index’); - tab栏切换(重点案例)
(1) 注意:要把所有内容先隐藏,用item类中设置 display:none; 然后第一个显示 ,直接先html中设置style=“display: block;”
商品介绍模块内容
(2) 代码:
`* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.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 < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>'
5. 自定义属性的目的:是为了保存并使用数据,有些数据很简单没有必要保存到数据库中去。
6. H5自定义属性
有些自定义属性很容易引起歧义,不容易判断是哪种类型
于是H5新增了自定义属性:
H5规定自定义属性以 data- 开头作为属性名并且赋值
data-index = '2';
1. 兼容性获取 element.getAttribute('data-index');
2. H5新增element.dataset.属性(有严重的兼容性问题 , IE11以上才支持),只能获取data-开头的,如果名字较长用驼峰命名法,如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200225132453453.png)
获取上述方法,div.dataset.listName;
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200225132040456.png)
-
节点 (获取元素更加简单)
网页中,所有内容都是节点。
节点至少拥有node Type(节点类型),nodeName(节点名称),nodeValue(节点值) 这三个基本属性
节点操作主要操作的是元素节点 -
利用DOM数可以把节点划分为不同的层级关系,常见的是父子兄层级关系
-
父级节点 parentNode (得到的是离元素最近的父级节点),如果找不到父节点就返回null
var box = document.querySelector(’.box’);
erweima.parentNode; -
(1)子节点 childNodes 得到的所有的子节点,包含元素节点,文本节点(回车)等
var ul = document.querySelector(‘ul’);
ul.childNodes;
如果只想获得里面的元素节点,则需要专门处理。如下:
先遍历得到的伪数组,通过nodeType判断,nodeType是1则是元素节点(需要),是3则是文本节点(不需要)
(2) parentNode.children(非标准) 获取所有的子元素节点
是我们实际开发常用的
console.log(ul.children);
(3)firstChild第一个子节点,不管是文本节点还是元素节点.lastChild同理
parentNode.firstChild;
parentNode.lastChild;
(4)获取第一/最后一个子元素,找不到则返回null。但是有兼容性问题。
parentNode.firstElementChild;
parentNode.lastElementChild;
(5)因为(3),(4)获取子节点都有问题,以下是实际开发的写法,既没有兼容问题又返回第一个子元素
console.log(ul.children[0]);
因为子元素的个数不确定,所以取最后一个元素用ul.children[ul.children.length - 1] -
下拉菜单
因为所有的小li都需要添加鼠标经过和移动事件,所以用for循环
-
导航栏显示与隐藏
-
兄弟节点
(1)node.nextSibling;返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有节点。
(2)node.previousSibling 返回当前元素上一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。
(3)nextElementSibling返回当前元素下一个兄弟元素节点,找不到则返回null。有兼容性问题,IE9以上才支持
(4)previousElementSibling;返回当前元素上一个兄弟元素节点,找不到则返回null。有兼容性问题,IE9以上才支持
解决(3)(4)兼容性问题,自己封装一个函数
-
创建节点
document.createElement(‘tagName’); 方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需要动态生成的,所以我们也称为动态创建元素节点。 -
添加节点
node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素,类似于数组中的push。
var li = document.createElement(‘li’);
//添加节点
var ul = document.querySelector(‘ul’);
ul.appendChild(li); -
添加节点(在前面)
node.insertBefore(child,指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于css里面的befor -
删除节点
node.removerChild(child)
从DOM中删除一个子节点,返回删除的节点
点击按钮,删除一个元素。当ul中没有元素时,禁用按钮。 this.disabled = true;
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}}
-
样式尽量通过css修改,并且innerHTML 可以添加html标签元素。
-
当不需要链接跳转时,阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
-
复制节点
node.cloneNode()
返回调用该方法的节点的一个副本,也称为克隆节点/拷贝节点
node.cloneNode();括号为空或者里面是false 是浅拷贝,只复制标签不复制里面的内容。如果括号里面为true,为深拷贝,复制标签以及里面内容。 -
border-collapse: collapse; table表格相邻边框合并
其中,obj[k],必须是中括号获取,不可用 . 代替,会undefined.
把值填入标签 , innerHTML -
动态创建表格案例
<style>
table {
width: 400px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
th {
background-color: skyblue;
font-size: 18px;
color: cornsilk;
font-weight: 400;
}
td {
/* background-color: pink; */
font-size: 14px;
height: 20px;
}
th,
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//存储多个对象,用创建数组的方式,而每个对象相当于数组中的一个元素
var dates = [{
name: '张三',
subject: 'JS',
score: '100'
}, {
name: '李四',
subject: 'JS',
score: '40'
}, {
name: '王五',
subject: 'JS',
score: '70'
}, {
name: '孙刘',
subject: 'JS',
score: '90'
}];
// 往tbody里创建行,有几个人创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < dates.length; i++) {
//创建元素 tr行,创建完之后还得添加进去。
var tr = document.createElement('tr');
tbody.appendChild(tr);
//行里面创建单元格 td单元格的数量取决于每个对象里面的属性个数
//通过for循环遍历对象for (var k in obj)
for (var k in dates[i]) { //里面的for 循环管列 td
var td = document.createElement('td');
//把属性值 给td
td.innerHTML = dates[i][k];
tr.appendChild(td);
}
// 3.创建有删除两个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 4.删除操作
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
//点击a删除当前a所在单元格的行,就是a的爸爸的爸爸
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>