? 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。
? W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
? DOM是W3C组织制定的一套处理 html和xml文档的规范,所有的浏览器都遵循了这套标准。
DOM树 又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面
案例代码
<body>
<div id="time">2019-9-9</div>
</body>
<script>
var timer = document.getElementById('time');
console.log(timer);//<div id="time">2019-9-9</div>
console.log(typeof timer);//object
console.dir(timer);//返回对象中属性和方法
</script>
案例代码
<body>
<ul>
<li>知否知否,应是等你好久11</li>
<li>知否知否,应是等你好久12</li>
<li>知否知否,应是等你好久13</li>
</ul>
<ol id="ol">
<li>生僻字1</li>
<li>生僻字2</li>
<li>生僻字3</li>
</ol>
<script>
//会获取页面所有的li标签
var lis = document.getElementsByTagName('li');
console.log(lis);//返回的是一个伪数组
console.log(lis[7]);
var ol = document.getElementById('ol');
var li = ol.getElementsByTagName('li');
console.log(li);
for (var i = 0; i < li.length; i++) {
console.log(li[i].innerText);
}
</script>
</body>
根据类名返回元素对象集合:document.getElementsByClassName(‘类名’);
根据指定选择器返回第一个元素对象:document.querySelector(‘选择器’);
根据指定选择器返回:document.querySelectorAll(‘选择器’);
注意:querySelector和querySelectorAll选择器需要加符号,如:document.querySelector(‘#id’)
案例代码
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// // 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
获取body元素:document.body
获取html元素:document.documentElement
<body>
<script>
// 获取body;
console.log(document.body);
console.dir(document.body);
// 获取根元素
console.log(document.documentElement);
</script>
</body>
案例代码
<body>
<button id="btn">唐伯虎</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
alert('点秋香');
};
</script>
</body>
<body>
<div class="box"></div>
<script>
//1.获取事件源
var box = document.querySelector('.box');
//2.注册事件
//box.onclick
//3.添加事件处理程序
box.onclick = function () {
alert('未来可期');
}
</script>
</body>
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onmousemove | 鼠标点击移动触发 |
onmouseup | 鼠标抬起触发 |
onmousedown | 鼠标按下触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
<body>
<div class="box"></div>
<input type="text">登入
<script>
var box = document.querySelector('.box');
box.onclick = function () {
console.log("onclick");
}
box.onmouseover = function () {
console.log("onmouseover");
}
box.onmouseout = function () {
console.log("onmouseout");
}
box.onmousemove = function () {
console.log("onmousemove");
}
box.onmouseup = function () {
console.log("onmouseup");
}
box.onmousedown = function () {
console.log("onmousedown");
}
var input = document.querySelector('input');
input.onfocus = function () {
console.log("onfocus");
}
input.onblur = function () {
console.log("onblur");
}
</script>
</body>
操作元素来改变元素里面的内容、属性等。
<body>
<p>
我是文字
</p>
<script>
var p = document.getElementsByTagName('p')
console.log(p[0].innerText)
p[0].innerText = '我是p标签'
console.log(p[0].innerText)
</script>
</body>
innerText和innerHTML的区别
<body>
<button>按钮</button>
<p><span>我是一段文字,我很好看!</span></p>
<script>
var btn = document.getElementsByTagName('button');
var p = document.getElementsByTagName('p');
btn[0].onclick = function () {
console.log(p[0].innerText);
console.log(p[0].innerHTML);
p[0].innerHTML = '<h1>我很好看!</h1>';
// p[0].innerText = '<h1>我很好看!</h1>';
console.log(p[0].innerText);
console.log(p[0].innerHTML);
};
</script>
</body>
显示当前时间练习
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<p>点击时候显示当前时间</p>
<script>
var btn = document.getElementsByTagName('button');
var p = document.getElementsByTagName('p');
var div = document.getElementById('div');
div.innerText = getTime();
btn[0].onclick = function () {
p[0].innerText = getTime();
}
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var time = "当前时间是" + year + '年' + month + "月" + day + "日"
return time
}
</script>
</body>
</html>
语法:
获取属性值
元素对象.属性名
设置属性值
元素对象.属性名 = 值
<body>
<img src="images/s.gif" alt="图片丢失了" title="这是图片" />
<div>
<a href="http://www.baidu.com">上午好</a>
</div>
<script>
// 1.获取事件源
var img = document.querySelector('img');
var a = document.querySelector('a');
console.log(img.src);
console.log(img.alt);
console.log(img.title);
console.log(a.href);
img.src = 'images/x.gif';
img.alt = '图片丢失了1';
img.title = '这是图片1';
a.href = 'http://www.163.com';
a.innerText = '下午好!';
</script>
</body>
语法:
<body>
<input type="checkbox" value="1234" checked>
<select>
<option value="1" disabled>上海</option>
<option value="2" selected>深圳</option>
</select>
<script>
var input = document.querySelector('input');
console.log(input.type);
console.log(input.value);
console.log(input.checked);
var option = document.querySelectorAll('option');
console.log(option[0].disabled);
console.log(option[1].value);
console.log(option[1].selected);
</script>
</body>
仿京东显示隐藏密码
核心思路:
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box #password {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/close.png" id="eye" />
<input type="password" id="password" />
</div>
<script>
var eye = document.getElementById('eye');
var password = document.getElementById('password');
var flag = true;
eye.onclick = function () {
if (flag) {
eye.src = "images/open.png";
password.type = 'text'
flag = false
}
else {
eye.src = "images/close.png";
password.type = 'password'
flag = true
}
}
</script>
</body>
</html>
我们可以通过 JS 修改元素的大小、颜色、等样式。
常用方式
操作style属性
<body>
<div> 我是一个div </div>
<script>
var div = document.querySelector('div');
div.style.width = '600px';
div.style.height = '400px';
div.style.backgroundColor = 'red';
div.style.fontSize = Math.random() * 60 + 'px';
document.body.style.backgroundColor = 'orange';
</script>
</body>
操作className属性
<body>
<div class="first">文本</div>
<script>
var div = document.querySelector('div');
div.onclick = function () {
//新类名 会覆盖原来的类名
div.className = 'change';
//添加新类名,保留原有类名
this.className = 'first change';
}
</script>
</body>
注意:
淘宝点击关闭二维码
思路
利用样式的显示和隐藏完成,display:none 隐藏元素,display: block 显示元素
<body>
<div class="box">
淘宝二维码
<img src="images/tao.png" />
<div class="close-btn">×</div>
</div>
<script>
var btn = document.getElementsByClassName('close-btn');
var img = document.querySelector('.box');
btn[0].onclick = function () {
img.style.display = 'none';
};
</script>
</body>
显示隐藏文本框内容:当鼠标点击文本框时,里面默认文字隐藏,当鼠标离开文本框时,里面文字显示。
思路
需要两个事件,获取鼠标焦点onfocus、失去鼠标焦点onblur
如果获取焦点,判断表单里面内容是否是默认文字,如果是默认文本,就清空表单内容
如果失去焦点,判断表单里面内容是否为空,如果是空,则表单内容改为默认文本,
<body>
<input type="text" value="手机" id="txt" />
<script>
var txt = document.getElementById('txt');
txt.onfocus = function () {
console.log('获取焦点')
if (txt.value == '手机') {
txt.value = '';
txt.style.color = 'black';
}
};
txt.onblur = function () {
console.log('未获取焦点')
if (txt.value == '') {
txt.value = '手机';
txt.style.color = '#999';
}
};
</script>
</body>
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.querySelectorAll('button');
//给每一个按钮注册了点击事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//1.先将所有的高亮颜色清空 干掉了所有人
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
//2.单独给自己添加上高亮效果 复活我自己
this.style.backgroundColor = 'orange';
};
}
//this 代表当前对象 ---->点击那个按钮,哪个按钮就是this
</script>
</body>