DOM那些儿事儿
DOM简介
文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。
DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM中使用element表示
- 节点：网页中的所有内容都是节点(标签，属性，文本，注释等)，DOM中使用node表示
- DOM把以商内容都看作是对象
获取元素
DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢？
获取页面中的元素可以使用以下几种方式:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
根据ID获取
使用getElementById()方法可以获取带有ID的元素对象。
- 1.因为我们文档页面从上往下加载，所以先要又标签，所以我们script要写到标签的下面
- 2.get获得element元素by通过 驼峰命名法
- 3.参数 id是大小写敏感的字符串
- 4.返回的是一个元素对象
- 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
<div id="time">2021-5-1</div>
<script>
var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);
</script>
根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
- 返回的是获取过来元素对象的集合，以伪数组的形式存储的
- 我们想要一次打印里面的元素对象我们可以采取遍历的方式
- 如果页面中只有一个元素，返回的还是伪数组的形式
- 如果页面中没有元素，返回空的伪数组
- 还可以获取某个元素内部所有指定标签名的子元素element.getElementsByTagName(‘标签名’);
<ul>
<li>1233</li>
<li>1234</li>
<li>1235</li>
<li>1236</li>
<li>1237</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
console.log(lis);
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
</script>
H5新增获取元素方式
- document.getElementsByClassName(‘类名’)；//根据类名返回元素对象集合
- document.querySelector(‘选择器’);//根据指定选择器返回第一个元素对象
- document.querySelectorAll(‘选择器’);//返回所有的元素
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs=document.getElementsByClassName('box');
console.log(boxs);
var firstBox=document.querySelector('.box');//根据指定选择器返回第一个元素对象
console.log(firstBox);
var nav=document.querySelector('#nav');//根据指定选择器返回第一个元素对象
console.log(nav);
var li=document.querySelector('li');//根据指定选择器返回第一个元素对象
console.log(li);
var allBox=document.querySelectorAll('.box');
console.log(allBox);
</script>
获取特殊元素(body，html)
- 获取body元素
var bodyEle=document.body;
console.log(bodyEle);
console.dir(bodyEle);
- 获取html元素
// var htmlEle=document.html;
var htmlEle=document.documentElement;
console.log(htmlEle);
事件基础
JavaScript使我们又能力创建动态页面，而事件使可以呗JavaScirpt侦测到的行为。
简单理解:触发—响应机制
网页中的每个元素都可以产生某些可以出发JavaScirpt的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后取执行某些操作。
事件是有三部分组成，事件源，事件类型，事件处理程序，我们成为三要素
- 事件源 事件被触发的对象 谁 按钮
- 事件类型 如何出发，什么事件，比如鼠标点击(onclick) 还是鼠标经过还是键盘按下
- 事件处理程序 通过一个函数赋值的方式 完成
<button id='btn'>啦啦啦啦啦</button>
<script>
var btn=document.getElementById('btn')
btn.onclick=function(){
alert('哈哈哈哈');
}
</script>
常见的鼠标事件
| 鼠标事件 | 出发条件 |
|---|---|
| onclick | 鼠标点击左键出发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
操作元素
JavaScript的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容，属性等，注意以下都是属性
改变元素内容
- element.innerText
从其实位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 - element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.onclick=function(){
div.innerText=getDate();
}
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var dates=date.getDate();
var arr=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var day=date.getDay();
return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
}
innerText和innerHTML的区别
前者不识别HTML标签
div.innerHTML='<strong>今天是</strong> 2021'//字体会改变
常用元素的属性操作
- innerText，innerHTML改变元素内容
- src，href
- id，alt，title
<button id="41">41</button>
<button id="42">42</button>
<br>
<img src="1.jpg" alt="">
<script>
var n41=document.getElementById('41');
var n42=document.getElementById('42');
var img=document.querySelector('img');
n41.onclick=function(){
img.src='1.jpg';
img.title='41';
}
n42.onclick=function(){
img.src='2.jpg';
img.title='42';
}
</script>
提供两张图片给大家练习
表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type，value，checked，selected，disabled
- innerHTML这个是普通盒子比如div 标签里面的内容
- 表单里面的值 文字内容是通过value来修改的
- 如果想要某个表单被禁用，不能再点击 disabled 我们想要这个按钮 button禁用
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn=document.querySelector('button');
var input=document.querySelector('input');
btn.onclick=function(){
// input.innerHTML='点击了';
input.value='被点击了';
// btn.disabled=true;
this.disabled=true;
}
</script>
样式属性操作
我们可以通过JS修改元素的大小，颜色，位置等样式
- 1.element.style 行内样式操作
- 2.element.className 类名样式操作
//css
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
//html
<div></div>
//js
<script>
var div=document.querySelector('div');
div.onclick=function(){
this.style.background='purple';
this.style.width='250px';
}
</script>
使用className修改样式属性
直接改变类名
this.className=‘change’；
排他思想
五个按钮，按那哪个按钮，那个就变成粉色，其他的变成白色。
- 所有元素全部清除样式
- 给当前元素设置样式
- 注意顺序不能颠倒
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
for(var j=0;j<btns.length;j++)
btns[j].style.background='';
this.style.background ='pink';
}
}
</script>
自定义属性的操作
获取属性值
- element.属性
- element.getAttribute(‘属性’) 【主要获得自定义的属性(标准)】
<div class="demo"></div>
<script>
var div=document.querySelector('div');
console.log(div.id);
console.log(div.getAttribute('id'));
</script>
设置属性值
- element.属性=‘值’
- element.setAttribute(‘属性’，‘值’)；
div.id='test';
div.setAttribute('id',2);
console.log(div.id);
移除属性
- element.removerAttribute(‘属性’)；
div.removeAttribute('id');
案例
仿京东显示隐藏密码明文案例
要学会按F12然后通过元素来改变代码调整元素的位置
<div class="box">
<label for="">
<img src="1.jpg" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
var eye=document.getElementById('eye');
var pwd=document.getElementById('pwd');
var flag=0;
eye.onclick=function(){
if(flag==0){
pwd.type='text';
eye.src='1.jpg';
flag=1;
}else{
pwd.type='password';
eye.src='2.jpg';
flag=0;
}
}
</script>
仿淘宝关闭二维码案例
display:none隐藏元素 display:block显示元素
<div class="box">
<img src="1.jpg" alt="">
<button>关闭图片</button>
</div>
<script>
var btn=document.querySelector('button');
var box=document.querySelector('.box');
btn.onclick=function(){
box.style.display='none';
}
</script>
循环精灵图
其实就是找到图片的规律，然后for循环赋值
var lis=document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
var index=i*44;
lis[i].style.backgroundPosition='0 -'+index+'px';
}
显示隐藏文本框内容
用到两个新的事件，其他的就很简单，然后注意this指针是指绑定的那个元素
<input type="text" value="phone">
<script>
var text=document.querySelector('input');
text.onfocus=function(){
// console.log('get');
if(this.value === 'phone'){
this.value='';
}
this.style.color='#333';
}
text.onblur=function(){
if(this.value === ''){
this.value='phone';
}
this.style.color='#999';
}
</script>
密码框验证信息
//css
<style>
.wrong{
color:red;
}
.right{
color:green;
}
</style>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6-16位密码</p>
</div>
<script>
var ipt=document.querySelector('.ipt');
var message=document.querySelector('.message');
ipt.onblur=function(){
if(this.value.length<6||this.value.length>16){
// console.log('error');
message.className='message wrong';
message.innerHTML='输入位数不对！'
}else{
message.className='message right';
message.innerHTML='输入位数正确！'
}
}
</script>
扫一扫
2754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
