前端学习笔记-操作DOM1
前端学习笔记-操作DOM1
-
- 一、概述
- 二、DOM
-
- 2.1 获取网页中的元素
-
- 2.1.1 根据ID获取
- 2.1.2 根据标签名
- 2.1.3 通过HTML5新增的方法获取
- 2.1.4 特殊元素获取-body\html
- 三、事件基础
-
- 3.1 改变元素内容
- 3.2 常用元素的属性操作
- 3.3 密码框提示案例
一、概述
WEB API阶段主要来学习网页交互效果，WEB API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
二、DOM
文档对象模型(DOM)是W3C组织推荐的处理可扩展标记语言(HTML)的标准编程接口，W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM中使用element表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
2.1 获取网页中的元素
2.1.1 根据ID获取
var element = document.getElementById(id);
- element是一个元素对象，如果当前文档中拥有特定ID的元素不存在则返回null
- id是大小写敏感的字符串，代表了所要查找的元素的唯一ID
<!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>
<div id="time">2022</div>
<script>
var timer = document.getElementById('id');
console.log(timer);
console.log(typeof timer);
</script>
</body>
</html>
2.1.2 根据标签名
根据getElementsByTagName()方法可以返回带有指定标签名的对象的集合
<!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>
<ul>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
</ul>
<script>
// 返回的是 获取过来元素对象的集合 以伪数组形式进行存储
var lis = document.getElementsByTagName('li');
console.log(lis);
for(var i = 0; i < lis.length; i++)
{
console.log(lis[i]);// 打印集合元素
}
</script>
</body>
</html>
**通过element.getElementsByTagName()**获取元素标签
<!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>
<ul>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
</ul>
<ul id = 'xx'>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
<li>hhhhhhhhhhhhhhhhh</li>
</ul>
<script>
// 返回的是 获取过来元素对象的集合 以伪数组形式进行存储
var lis = document.getElementsByTagName('li');
console.log(lis);
for(var i = 0; i < lis.length; i++)
{
console.log(lis[i]);// 打印集合元素
}
// 先通过id获取对象 再通过对象的标签获取元素
var xx = document.getElementById('xx');
var lis1 = xx.getElementsByTagName('li');
console.log(lis1);
</script>
</body>
</html>
2.1.3 通过HTML5新增的方法获取
document.getElementsByClassName('类名');// 根据类名返回元素对象集合
<!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>
<div class = "box">盒子</div>
<div class = "box">箱子</div>
<script>
var boxs = document.getElementsByClassName('box');
for(var i = 0; i < boxs.length; i++)
{
console.log(boxs[i]);
}
</script>
</body>
</html>
document.querySelector('选择器');// 根据选择器返回第一个元素对象
该选择器可以是id选择器，也可以是标签选择器
- document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合
- document.querySelector(‘选择器’);
- document.querySelectorAll(‘选择器’);// 根据指定选择器返回
<!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>
<div class = "box">盒子</div>
<div class = "box">箱子</div>
<div id = 'nav'>
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs = document.getElementsByClassName('box');
for(var i = 0; i < boxs.length; i++)
{
console.log(boxs[i]);
}
// querySelector 返回指定选择器的第一个元素
// 类选择器 需要加上.
var firstbox = document.querySelector('.box');
console.log(firstbox);
// id选择器 需要加上#
var nav = document.querySelector('#nav');
console.log(nav);
// 标签选择器 不用加特殊符号
var li = document.querySelector('li');
console.log(li);
var lis = document.querySelectorAll('.box');// 获取所有元素对象集合
console.log(lis);
</script>
</body>
</html>
2.1.4 特殊元素获取-body\html
- document.body 获取body元素
- document.documentElement 获取html元素
三、事件基础
- 获取事件源
- 绑定事件 注册事件
- 添加事件处理程序
<!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 id = "btn">唐伯虎</button>
<script>
// 点击一个按钮 弹出对话框
// 事件源 Button
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('hh');
}
</script>
</body>
</html>
3.1 改变元素内容
- element.innerText
从起始位置到终止位置的内容，但是它取出html标签，同时空格和换行也会去掉
<!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>显示当前系统时间</button>
<div>某个时间</div>
<script>
// 当我们点击按钮 div文字会发生变化
var btn1 = document.querySelector('btn');
var div1 = document.querySelector('div');
// 注册事件
btn.onclick = function(){
div1.innerText = '2022-10-09';
}
</script>
</body>
</html>
-
element.innerHTML
从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 -
innerText和innerHTML区别
- innerText不识别html标签，InnerHTML识别html标签
- 这两个属性都是可以读写的 获取元素里面的内容 innerText会去除空格和换行 innerHTML是保留文本格式
<!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>
<div>
</div>
<p>
我是文字
<span>1234</span>
</p>
<script>
// innerText 和 innerHTML的区别
var div = document.querySelector('div');
div.innerText = '今天';
div.innerHTML = '今天';
var p = document.querySelector('p');
console.log(p.innerHTML);
console.log(p.innerText);
</script>
</body>
</html>
3.2 常用元素的属性操作
- src属性 获取图片地址
<!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 id = "ldh">xxx</button>
<button id = "zxy">xxf</button> <br>
<img src = "images/ldh (2).jpg" alt = "" title="xxg">
<script>
// 修改元素属性
var l = document.getElementById('ldh');
var x = document.getElementById('zxy');
var img = document.querySelector('img');
x.onclick = function(){
img.src = 'images/ldh(3).jpg';
}
</script>
</body>
</html>
- input.value 更改表单内容
<!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>按钮</button>
<input type = "text" value = "输入内容">
<script>
// 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function(){
// 表单中的文字是通过value来修改的
input.value = '被点击l';
btn.disabled = true;// 禁止使用按钮
}
</script>
</body>
</html>
- type value checked selected disabled
<!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>
.box{
position: relative;
width: 400px;
border-bottom:1px solid #ccc;
margin:100px auto;
}
.box input{
width:370px;
height: 30px;
border:0;
outline: none;
}
.box img{
position: absolute;
top:1px;
right:10px;
width:48px;
}
</style>
</head>
<body>
<div class = "box">
<label for = "">
<img src = "images/ldh (2).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 = 'images/ldh (3).jpg';
flag = 1;
}
else{
pwd.type = 'password';
eye.src = 'images/ldh (2).jpg';
flag = 0;
}
}
</script>
</body>
</html>
- 更改标签的样式 style
我们可以通过js来修改元素的大小 颜色 位置等
element.style 行内样式操作
element.className 类名样式操作
通过style行内样式操作修改元素属性
<!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>
div{
width: 200px;
height: 200px;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取标签对象
var div = document.querySelector('div');
// 注册事件 处理程序
div.onclick = function(){
div.style.backgroundColor = 'purple';// 更改背景颜色
div.style.width = '222px';
}
</script>
</body>
</html>
通过修改类名的方式操纵属性：
<!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>
.change{
background-color: purple;
color:#fff;
font-size:25px;
margin-top:100px;
}
</style>
</head>
<body>
<div>文本</div>
<script>
var test = document.querySelector('div');
// 可以通过修改元素的className更改元素的样式
// 适合于样式比较多
test.onclick = function(){
this.className = 'change';// 更改元素样式
}
</script>
</body>
</html>
注意：JS里面的样式采用的是驼峰命名法 fontsize backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高
注意：
-
如果样式修改比较少，可以通过操作style属性方式更改元素样式
-
如果样式修改比较多，可以采取操作类名方式更改元素样式
-
class 因为是个保留字，因此使用className来操作元素类名属性
-
className会直接更改元素的类名，会覆盖原先的类名
-
表单两个新事件：获得焦点onfocus 失去焦点：onblur
<!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>
input{
color:#999;
}
</style>
</head>
<body>
<input type = "text" value = "手机">
<script>
// 获取元素
var text = document.querySelector('input');
// 注册事件 获取焦点事件
text.focus = function(){
// console.log('获得焦点事件');
if(this.value === '手机')
{
// 获得焦点 清空文本框
this.value = '';
}
// 获取焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 注册事件 失去焦点事件
text.onblur = function(){
// console.log('失去焦点事件');
if(this.value === '')
{
this.value = '手机';
}
// 失去焦点 颜色变浅
this.style.color = '#999';
}
</script>
</body>
</html>
3.3 密码框提示案例
- 首先判断的事件是表单失去焦点 onblur
- 如果输入正确则提示正确的信息颜色为绿色小图标变化
- 如果输入不是6~16位 则提示错误信息颜色为红色 小图标变化
- 因为里面样式比较多 所以采用className修改样式
<!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>
div{
width:600px;
margin:100px auto;
}
.message{
display: inline-block;
font-size: 12px;
color:#999;
background: url(images/lgh.jpg) no-repeat left center;
padding-left:20px;
}
.wrong{
color:red;
background-image:url(images/wrong.jpg);
}
.right{
color:green;
background-image:url(images/ldh.jpg);
}
</style>
</head>
<body>
<div class = "register">
<input type = "password" class = "ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 首先判断的事件是表单失去焦点 onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6~16位 则提示错误信息颜色为红色 小图标变化
// 因为里面样式比较多 所以采用className修改样式
// 获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
// 注册事件 失去焦点
ipt.onblur = function(){
// 根据表单里面值的长度 进行提示
if(this.value.length < 6 || this.value.length > 16)
{
// console.log('错误');
// 当输入错误的时候 更改元素样式
message.className = 'message wrong';//为了保留原有的样式 需要添加Message
message.innerHTML = '您输入的位数不对要求 6~16位';
}
else
{
message.className = 'message right';//为了保留原有的样式 需要添加Message
message.innerHTML = '您输入的位数正确';
}
}
</script>
</body>
</html>
