DOM简介
什么是DOM
文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口。
文档: 一个页面就是一个文档,DOM中使用document表示。
元素:页面中所有标签都是元素,DOM中使用element。
节点:网页中所有内容都是元素,DOM中使用node
DOM如何获取元素
- getElementById(‘id’) 获取元素
-
id是一个大小写敏感的字符串
-
返回的是一个元素对象
-
console.dir 可以打印返回元素对象 可以查看里面的属性和方法
- getElementByTagName(‘标签名’)
- 返回的是获取过来元素对象的集合,以伪数组的形式存储的
- H5 新增获取元素
getElementsByclassName(‘类名’)
querySelector(‘选择器’)
- 根据指定选择器返回第一个值
- 切记 里面选择器需要加符号 .box
- 获取body、html元素
var bodyEle = document.body;
var htmlEle = document.documentElement;
事件基础
- 事件三要素
-
事件源;事件被触发的对象
-
事件类型; 如何触发, 比如 鼠标点击 onclick
-
事件处理程序; 通常通过一个函数赋值完成
操作元素
- 改变元素内容
element.innerText
不识别HTML标签
element.innerHTML
识别标签
- 修改元素属性
src herf …
- 修改表单元素
type value checked selected
- 修改样式属性
element.Style
element.ClassName
DOM 基本简介
排他思想
如果有同一个元素,想要某一个元素实现某种样式,需要用到循环的排他思想算法
-
所有元素全部清除样式
-
给当前元素设置样式
-
注意顺序不可以颠倒
按钮案例代码(表达排他思想)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
//先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++){
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</html>
效果如下
自定义属性值操作
- 获取属性值
element.gentAttribute(‘’)
获取自定义的属性,程序员自定义
element.属性
获取内置属性值
- 设置元素属性值
element.属性 = ‘值’
element.gentAttribute(‘属性’,‘值’);
- 移除属性值
element.removeAttribute(‘属性值’);
- H5 自定义属性
H5 规定自定义属性 data- 开头做属性名并且赋值
案例 tab栏切换
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
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循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
效果如下