1.DOM
1.1DOM概述
1.dom是处理可扩展标记语言的标准编程接口，可以改变网页的样式，内容和结构
2.文档：一个页面就是一个文档（document）
3.元素：页面中的所有标签都是元素（element）
4.节点：网页中的所有内容都是节点（标签，属性，文本，注释等）（node）
4.对象：文档，元素，节点都是对象 获取元素 1.id获取 getElementByid()
1.2获取元素
获取元素
<script>
// 1.id获取---id是大小写敏感的字符串
// console.dir--打印返回的元素对象
document.getElementById();
// --------------------------
//2. 标签名获取--返回的是元素对象的集合（伪数组）--操作里面的对象采用遍历的方式
document.getElementsByTagName();
// ------------------------------------------
// 父元素必须指明是哪一个对象，获取时不包含父元素本身
element.getElementsByTagName();
// ---------------------------------------------------
// 3.获取特殊元素
// 3.1获取body元素
document.body;
// 3.2获取html元素
document.documentElement;
</script>
1.3事件基础
（触发响应机制）
组成：
1.事件源：事件被触发的对象 谁
2.事件类型：如何触发 什么事件
3. 事件处理程序：通过函数赋值的方式完成
<script>
// btn是事件源 onlick是事件类型 function是事件处理程序
btn.onlick=function(){
alert('事件')
}
</script>
1.4 执行步骤
1.获取事件源
2. 绑定事件 注册事件
3.添加事件处理程序
<body>
<div>123</div>
<script>
// 1.获取事件源
var div=document.querySelector('div');
//2. 绑定事件 注册事件
// 3.添加事件处理程序
div.onlick=function(){
console.log('执行事件的步骤')
}
</script>
1.5操作元素
1.5.1修改元素内容
1.element.innerText（从起始位置到终止位置的内容，但它去除HTML标签，同时换行和空格也会去掉）
2.element.innerHTML（起始位置到终止位置的全部内容，包含html标签，同时保留空格和换行）–较常用
区别：前者不识别html标签，后者识别html标签
<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
// 获取元素
var btn=document.querySelector('button')
var div=document.querySelector('div')
// 注册事件,添加处理程序
btn.onlick=function(){
div.innerText='1999'
}
1.5.2修改元素属性
<button id="l">1</button>
<button id="z">2</button>
<img src="" alt="">
<script>
// 修改元素属性
var w=document.getElementById('l');
var z=document.getElementById('z');
var img=document.querySelector('img');
z.onlick=function(){
img.src=''
}
1.5.3表单元素操作
dom可以操作：type,value,checked,selected,disabled
表单里面的值 文字内容是通过value来修改的；如果想要某个表单被禁用，不能再点击 disabled
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 获取元素
var btn=document.querySelector('button')
var input=document.querySelector('input')
// 注册事件 处理程序
btn.onlick=function(){
input.value='被点击了'
}
</script>
1.5.6样式操作属性
注：
1.可以通过js修改元素的大小，颜色，位置等样式
2.行内样式操作：element.style–适用于样式较少，功能简单的情况
3.类名样式操作：element.className–通过修改元素的className类名进行更改，会直接覆盖原来的类名
4.如果要保留原先的类名，可以写两个类名
注：样式要采用驼峰命名法，如fontSize,backgroundColor
5.js修改style样式操作，产生的是行内样式，css权重比较高
.change {
background-color: #fff;
font-size: large;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div')
div.οnclick=function(){
// 行内样式操作
div.style.backgroundColor='red';
div.style.fontSize='25px';
// 类名样式操作-
this.className='change'
}
1.5.7自定义操作属性
1.获取属性值
element.属性–获取内置即元素本身自带的属性
element.getAttribute(‘属性’)–获得自定义的属性
2.设置属性值
element.属性=‘值’
element.setAttribute(‘属性’,‘值’)–主要针对自定义属性值
3.移除属性
element.removeAttribute(’属性)
4.H5自定义属性
4.1.自定义属性以data-开头作为属性名并且赋值
4.2.element.getAttribute()
element.dataset.index–只能获取data开头的自定义属性
1.6节点操作
作用：获取元素
节点有nodeType(节点类型),nodeName(节点名称)，nodeValue（节点值）这三个基本属性
元素节点nodeType为1，属性节点的节点类型为2，文本节点的节点类型为3（包含文字，空格和换行）
1.6.1节点层级
父子兄层级关系
1.父级节点
node.parentNode–得到离元素最近的父级节点，如果找不到父节点返回null
2.子节点
parentNode.childNodes–获得所有的子节点包含元素节点，文本节点等
如果只想获得里面的元素节点，需要专门处理
parentNode.children–只获得子节点中的元素节点
parentNode.firstChild–返回第一个子节点，找不到则返回null
parentNode.lastChild–返回最后一个子节点，找不到返回null
parentNode.firstElementChild–返回第一个子元素节点
parentNode.lastElementChild–返回最后一个子元素节点
3.兄弟节点
node.nextSibling–下一个兄弟节点
node.previousSibling–上一个兄弟节点
node.nextElementsSibling–下一个兄弟元素节点
node.previousElementSibling–上一个兄弟元素节点
4.动态创建节点
document.creatElement(‘’)
5.添加节点
node.appendChild()
node.insertBefore()
<script>
// 创建节点
var li=document.createElement('li')
// 添加节点
ul.appendChild('li')
var lili=document.createElement('li')
ul.insertBefore(lili,ul.children[0])
</script>
6.删除节点
node.removeChild(child)
2.BOM
2.1BOM概述
1.浏览器对象模型，核心是window，它提供了独立于内容而与浏览器窗口进行交互的对象
2.BOM由一系列相关对象构成，并且每个对象都提供了很多方法和属性
3.bom顶级对象是window，dom顶级对象是document
4.bom包含dom
5.它是全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法，在调用时常省略window
2.2窗口加载事件
1.window.οnlοad=function(){}–只能写一次；
2.btn.addEventListener(‘load’,function(){})–次数无限制，load等页面内容全部加载完毕，包含页面dom元素 图片 flash css等等
<script>
window.onload=function(){
var btn=document.querySelector('button')
btn.addEventListener('click',function(){
alert('点击我')
})
}
</script>
2.3调整窗口大小事件
注：只要页面窗口发生变化，就会触发该事件调用处理函数
<script>
window.addEventListener('resize',function(){
})
window.onresize=function(){}
</script>
2.4定时器
setTimeout()定时器
1.在定时器到期后执行
2.window.setTimeout(调用函数,延时时间)–回调函数（时间到了再返回去调用该函数）
3.window可以省略
4.延时时间单位是毫秒。可以省略
5.调用函数可以直接写函数，还可以写 函数名 或者 ‘函数名()’
6.常给定时器赋值一个标识符
<script>
window.setTimeout(function(){},2000)
</script>
停止setTimeout()定时器
window.clearTimeout(time id);
<script>
var time1= window.setTimeout(function(){
console.log('爆炸')
},2000)
btn.addEventListener('click',function(){
clearTimeout(time1);
})
</script>
setInterval()定时器
1.window.setTimeout(回调函数,延迟时间)–每隔这个延迟时间，就调用一次，重复调用
停止setInterval()定时器
window.clearInterval(interval Id)
注：1.this指向的是调用它的对象
2.全局作用域或者普通函数中this指向全局对象window（定时器里面的this指向window）
3.构造函数中this指向构造函数的实例
方法调用中谁调用this指向谁
2.5JS执行
js执行队列
js是单线程，同一时间只能做一件事，所有的任务都要排队，于是出现了同步和异步
同步：程序的执行顺序与任务的排列顺序是一致同步的
异步：在做这件事的同时去处理其他任务
本质区别：流水线上各个任务执行顺序不同
js执行顺序
同步任务：都在主线程上执行，形成一个执行栈
异步任务：js的异步是通过回调函数实现的
异步任务：1.普通事件：如click，resize等
2，资源加载：如load，error等
3.定时器：包含setInterval，setTimeout等
js执行机制
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的
异步任务结束等待状态，进入执行栈，开始执行
2.6location对象
1.location.href获取url
<script>
btn.addEventListener('click',function(){
location.href='http://www.itcast.cn'
})
</script>
2.location.assign()–跳转页面（重定向页面）
3.location.replace()–替换当前页面，因为不记录历史，所以不能后退页面
4.location.reload()–重新加载页面，即直接刷新
2.7navigator对象
包含有关浏览器的信息，他有很多属性，最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
2.8history对象方法
1.back()–后退功能
2.forword()–前进功能
3.go(参数)–前进后退功能，参数如果是1前进一个页面；如果是-1后退一个页面
3.操作实例
3.1页面跳转
<title>页面跳转</title>
</head>
<body>
<button>点击</button>
<div>在5秒后跳转</div>
<script>
var btn=document.querySelector("button")
btn.addEventListener('click',function(){
location.href='http://'
})
var timer=5
setInterval(function(){
if(timer==0)
{
location.href='http://'
}
div.innerHTML='您将在'+timer+'秒钟后跳转页面'
timer--;
},5000)
</script>
3.2分时问候
<title>分时问候</title>
</head>
<body>
<img src="../js操作实例/上午好.webp" alt="">
<script>
var img=document.querySelector('img')
var div=document.querySelector('div')
var date=new Date();
var h=date.getHours();
if(h<12)
{
img.src='../js操作实例/上午好.webp'
}else
{
img.src='../js操作实例/下午好.webp'
}
</script>
3.3关闭广告
<title>关闭广告</title>
<style>
.box {
display: block;
position: relative;
width: 74px;
height: 88px;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
二维码
<img src="../js操作实例/二维码.webp" alt="" />
<i class="close-btn">×</i>
</div>
<script>
var btn = document.querySelector(".close-btn");
var box = document.querySelector(".box");
btn.onclick = function () {
box.style.display = "none";
};
</script>
3.4密码提示信息
<title>密码提示</title>
<style>
.message {
display: inline-block;
font-size: 12px;
color: #999;
}
.wrong {
color: red;
/* background-image: url(); */
}
.right {
color: green;
}
</style>
</head>
<body>
<div class="box">
<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){
message.className='message wrong'
message.innerHTML='您输入的位数不对'
}
else
{
message.className='message right'
message.innerHTML='您输入的位数正确'
}
}
</script>
运行结果：
3.5下拉菜单
<title>下拉菜单</title>
</head>
<body>
<ul class="nav">
<li>
<a href="">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li><a href="">评论</a></li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector(".nav");
var lis = nav.children; //获取li
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.children[1].style.display = "block";
};
lis[i].onmouseout = function () {
this.children[1].style.display = "none";
};
}
</script>
3.6密码显示
<title>显示密码</title>
<style>
.box {
width: 400px;
border: 1px red solid;
margin: 100px auto;
position: relative;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
width: 24px;
position: absolute;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<div class="box">
<label for="../js操作实例/睁眼.webp">
<img src="../js操作实例/闭眼.webp" alt="" id="eye" />
</label>
<input type="password" id="=pwd" />
</div>
<script>
var eye = document.getElementById("eye");
var pwd = document.getElementById("pwd");
var flag=0;
eye.onclick = function () {
if(flag==0){
flag=1;
pwd.type = "text";
eye.src='../js操作实例/睁眼.webp'
}
else {
pwd.type='password';
eye.src="../js操作实例/闭眼.webp";
flag=0;
}
};
</script>
</body>
</html>
3.7消除广告
<title>消除广告</title>
</head>
<body>
<img src="../js操作实例/上午好.webp" alt="" class="ad">
<script>
var ad=document.querySelector('.ad')
setTimeout(function(){
ad.style.display='none'
},3000)
</script>
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
