JavaScript进阶 DOM和BOM操作

最新推荐文章于 2022-08-07 23:20:51 发布
最新推荐文章于 2022-08-07 23:20:51 发布
阅读量225 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42594761/article/details/108027301
版权

API和Web API

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2.Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3.Web API一般都有输入和输出（函数的传参和返回值），WebAPI很多都是方法（函数)
4.学习Web API可以结合前面学习内置对象方法的思路学习

DOM

文档对象模型(DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML
或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
心

在这里插入图片描述

获取元素

getElementById

<div id="time" >2819-9-9c/div>
<script>
 1．因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
 2. get获得element元素 by通过驼峰命名法
 3.参数id是大小写敏感的字符串
 4，返回的是一个元素对象
var timer = document.getElementByid("time ' );
console.log(timer);
console.log(typeof timer);
 5. console.dir打印我们返回的元素对象更好的查看里面的属性和法
console.dir(timer);

getElementByTagName

<ul>
<li>知否知否，应是等你好久11</1i>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
</ul>
<ol>
<li>生僻字</li>
<li>生僻字</li>
<li>企生僻字</li>
<li>生僻字</li>
</ol>
<script>
1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName( "li");
console.log(lis);
console.log(lis[0]);

 2．我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i =0; i < lis.length; i++) {
console.log(lis[i]);
}
 3．如果页面中只有一个li返回的还是伪数组的形式
 4．如果页面中没有这个元素返回的是空的伪数组的形式
 5. element.getElementsByTagName("标签名");父元素必须是指定的单个元素
var ol = document.getElementById("ol');
console.log(ol.getElementsByTagName( "li'));

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

获取特殊元素（body，html)

获取body元素

  1. doucumnet.body //返回body元素对象
    获取html元素
  2. document.documnentElement //返回html元素对象
<script>
 1.获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
2.获取html元素
 var htmiEle = document.html;
var htmlEle = document.documentElement;I
console.log(htmlEle);
</script>

数件基础

1.事件三要素

script>
点击一个按钮，弹出对话框
1．事件是有三部分组成 事件源―事件类型―事件处理程序――我们也称为事件三要素
(1）事件源  事件被触发的对象   谁  按钮
var btn = document.getElementByd( " btn");
(2）事件类型︰ 如何触发  什么事件  比如鼠标点击(onclick） 还是鼠标经过  还是键盘按下
(3）事件处理程序  ―通过一个函数赋值的方式完成
btn.onclick = function(){
alert("点秋香');
}
</script>

2.执行事件过程

<script>
执行事件步骤
1．获取事件源
var div = document.queryselector( "div");
2.绑定事件注册事件
//div.onclick
3.添加事件处理程序
div.onclick = function() {
console.log(我被选中了'）;}
</script>

操作元素

在这里插入图片描述

1.修改元素内容
在这里插入图片描述

当我们点击了按钮，div里面的文字会发生变化
// 1．获取元素
var btn = document.queryselector(" button" );
var div = document.queryselector( "div");
// 2.注册事件
btn.onclick = function() i
div.innerText = "2p19-6-6";

<script>
innerText 和innerHTML的区别I
1. innerText不识别html标签 非标准︰去除空格和换行
var div = document.querySelector("div');
// div.innerText = '<strong>今天是:</strong>2019";//strong标签不起作用
2. innerHTML识别html标签W3C标准保留空格和换行的
div.innerHTML = "<strong>今天是:</strong>2019";
//这两个属性是可读写的可以获取元素里面的内容
var p = document.querySelector("p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>

2.修改元素属性

<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
//修改元素属性src
 1．获取元素
var ldh = document.getElementById(" ldh");
var zxy = document.getElementById( " zxy");
var img = document.querySelector( "img" );
 2．注册事件︰处理程序
zxy.onclick = function( ){
img.src = "images/zxy.jpg";
img.title =‘张学友思密达';
}
ldh.onclick = function(){
img.src = "images/ldh.jpg";
img.title ='刘德华';
}

3.表单元素属性操作

<button>按钮</button>
<input type="text" value=""输入内容">
<script>
 1．获取元素
var btn = document.queryselector("button" );
var input = document.queryselector( "input");
2．注册事件处理程序
btn.onclick = function( ){
//表单里面的值文字内容是通过value来修改的
input.value ='被点击了";
如果想要某个表单被禁用―不能再点击 disabled我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
 this 指向的是事件函数的调用者btn

4.样式属性操作
在这里插入图片描述

<style>
div {
width: 200px;
height: 200px;
background-colgr: pink;
}
</style>
</head>
<body>
<div></div>
<script>
 1．获取元素
var div = document.queryselector( "div");
2，注册事件处理程序
div.onclick = function(){
//div.style里面的属性采取驼峰命名法
this.style.backgroundcolor = "purple";
this.style.width = "25epx";

5.排他思想
在这里插入图片描述

1．获取所有按钮元素
var btns = document.getElementsByTagName( 'button');
// btns得到的是伪数组里面的每一个元素btns[i]
for (var i = e; i < btns.length; i+){
btns[i].onclick = function(){
//我们先把所有的按钮背景颜色去掉干掉所有人
for (var i = e; i c btns.length; ir) {
btns[i].style.backgroundcolor = ";
}
//然后才让当前的元素背景颜色为pink留下我自己
this.style.backgroundColor = "pink";
)

6.自定义属性的操作

<div id="demo" index=""1" class="nav></div>
<script>
var div = document.queryselector( "div');
1．获取元素的属性值
方法一：(1）element.属性
console.log(div.id);
方法二：(2) element.getAttribute('属性') get得到获取 attribute属性的意思我们程序员自己添加的属性我
们称为自定义属性index
console.log(div.getAttribute("id");
console.log(div.getAttribute( "index"));
2．设置元素属性值
方法一： (1）element.属性="值"
div.id = 'test";
div.className = 'navs";
方法二：(2）element.setAttribute('属性"，‘值");主要针对于自定义属性
div.setAttribute( "index", 2);
div.setAttribute('class ','footer');// class特殊―这里面写的就是class不是className
3.移除属性 removeAttribute(属性）
div.removeAttribute('index');

节点操作

在这里插入图片描述
在这里插入图片描述

<div class="demo">//父亲
<div class="box">//父亲
<span class="erweima">x</span>//儿子
</div>
</div>
<script>
1.父节点parentNode
var erweima = document.queryselector(" .erweima " );
得到的是离元素最近的父级节点
console.log(erweima.phrentNode);//box
</script>

2.子节点

children获取所有的子元素节点也是我们实际开发常用的
console.log(ul.children);
操作元素的第一和最后一个元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length -1]);

3.兄弟节点
在这里插入图片描述
在这里插入图片描述

<script>
var div = document.queryselector("div");
1.nextsibling 下一个兄弟节点包含元素节点或者文本节点等等
console.log(div.nextsibling);
console.log(div.previoussibling);
2. nextElementsibling得到下一个兄弟元素节点
console.log(div.nextElementsibling);
console.log(div.previousElementsibling);
</script>

3.创建节点和添加节点

<script>
1．创建节点元素节点
var li = document.createElement('li');
2．添加节点node.appendChild(child) node父级 child 是子级后面追加元素﹑类似于数组中的push
var ul = document.queryselector("ul");
ul.appendchild(i);//默认在后面添加
3，添加节点node.insertBefore(child，指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[e];//在lili的前面添加
4，我们想要页面添加一个新的元素:1.创建元素2．添加元素
</script>

4.删除节点 node.removeChild

<script>
1.获取元素
var ul = document.queryselector("ul");
var btn = document.queryselector( 'button');
 2．删除元素node.removechild(child)
ul.removeChild(ul.children[e]);
3．点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0){
this.disabled = true;
}else {
ul.removeChild(ul.children[e]);
}}
</script>

6.复制节点

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector("ul");
1. node.cloneNode();括号为空或者里面是false浅拷贝只复制标签不复制里面的内容//<li> </li>
 2. node.cloneNode(true);括号为true 深拷贝复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendchild(1ili);//会复制标签和内容<li>1</li>
</script>

事件的高级

注册事件

addEventListener

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAl1( "button" );
1．事件侦听注册事件addEventListener
 (1）里面的事件类型是字符串必定加引号而且不带on
(2）同一个元素同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener("'click" , function(){
alert(22);
})
btns[1].addEventListener("click" , function(){
alert(33);
})
</script>

删除事件

removEventListener

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAl1( "div");
 2. removeEventListener删除事件
divs[1].addEventListener('click", fn)//里面的fn不需要调用加小括号
function fn(){
alert(22);
divs[1].removeEventListener("click", fn);
}
/script>
</body>

DOM事件流

在这里插入图片描述
在这里插入图片描述

<script>
 dom事件流三个阶段
1.JS 代码中只能执行捕获或者冒疱其中的一个阶段。
2. onclick和attachEvent (ie）只能得到冒跑阶段。
3．捕获阶段如果addEventListener第三个参数是 true那么则处于捕获阶段  document - html ->
body -> father -> son
var son = document.querySelector( ".son");
son.addEventListener('click', function() {
alert( 'son');
, true);//弹出son
var father = document.querySelector( ".father");
father.addEventListener('click", function() {
alert( 'father');
,true);//弹出father再弹出son
4．冒泡阶段如果addEventListener第三个参数是 false或者省略那么则处于冒泡阶段son ->
father ->body -> html -> document
var son = document.queryselector( " .son");
son.addEventListener("click" , function(){
alert( 'son ');
，false);
var father = document.querySelector( ".father" );
father.addEventListener("cick", function() {
lalert( 'father');
,false);//弹出father再弹出son
document.addEventListener("click" , function(){
alert( 'document');//弹出docunment,father,son
)
</script>

事件对象

//事件对象
var div = document.querySelector( 'div');
div.onclick = function(e) i
// console.log(e);
// console.log(window.event);
// e =e ll window.event;
console.log(e);

}
// div.addEventListener( 'click', function(e) {
//console.log(e);
})
 1. event就是一个事件对象写到我们侦听函数的小括号里面当形参来看
2．事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键
4．这个事件对象我们可以自己命名比如event . evt、e
5．事件对象也有兼容性问题ie678通过 window.event兼容性的写法e = e||window.event
3.事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信
地

在这里插入图片描述
e.target和this的区别

常见事件对象的属性和方法
1. e.target返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素)
区别:e.target点击了那个元素，就返回那个元素 this那个元素绑定了这个点击事件，那么就返回谁
var div = document.queryselector( 'div");
div.addEventListener('click', function(e){
console.log(e.target);
console.log(this);
))
var ul = document.queryselector('ul');
ul.addEventListener('click', function(e）{
//我们给ul绑定了事件―那么this 就指向uil
console.log(this);
e.target指向我们点击的那个对象谁触发了这个事件我们点击的是li e.target 指向的就是li
console.log(e.target);
”

2.e.type和e.preventDefault()

body>
<div>123</div>
<a href="http://www.baidu.com>百度</a>
<form action="http://www.baidu.com">
<input type="submit" value=""提交" name="sub">
</form>
<script>
常见事件对象的属性和方法
1．返回事件类型
var div = document.queryselector( "div');
div.addEventListener("click", fn);
div.addEventListener("mouseover", fn);
div.addEventListener( " mouseout", fn);
function fn(e){
console.log(e.type);
}
2．阻止默认行为（事件）让链接不跳转或者让提交按钮不提交
var a = document.queryselector("a');
a.addEventListener('click', function(e) {
e.preventDefault();//dom标准写法
)

3.阻止事件冒泡
e.stopPropagation()

<div class="son">son儿子</div>
</div>
<script>
1常见事件对象的属性和方法
阻止冒泡dom 推荐的标准stopPropagation()
var son = document.queryselector(".son");
son.addEventListener('click" , function(e) {
alert( "son');
e.stopPropagation(); // stop停止Propagation传播
e.cancelBubble = true; //非标准cancel取消bubble泡泡
}，false);
var father = document.queryselector( " .father" );
father.addEventListener("click" , function() {
alert( 'father');
}， false);
document.addEventListener( 'click" , function() {
alert( " document");
})

4.事件委托
在这里插入图片描述

<ul>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
</ul>
<script>
//事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.queryselector( 'ul");
ul.addEventListener("click" , function(e) {
// alert(知否知否，点我应有弹框在手!');
 e.target这个可以得到我们点击的对象
e.target.style.backgroundcolor = "pink" ;
)

6.常用的鼠标事件
在这里插入图片描述

<script>
鼠标事件对象MouseEvent
document.addEventListener("click" , function(e) {
 1. client鼠标在可视区的x和y坐标
console.log(e.clientx);
console.log(e.clientY);
console.log('---------------------");
 2. page鼠标在页面文档的x和y坐标
console.log(e.pagex);
console.log(e.pageY);
console.log('------------
);
3. screen鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
)
</script>

常用的键盘事件

在这里插入图片描述
1。如果使用addEventListener不需要加on
2. onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
3.三个事件的执行顺序是:keydown-- keypress —keyup

1. keyup按键弹起的时候触发
 document.onkeyup = function( ){
consoile.log("我弹起了');
})
document.addEventListener( " keyup', function() {
console.log('我弹起了');
})
3. keypress按键按下的时候触发不能识别功能键比如 ctrl shift左右箭头啊
document.addEventListener( " keypress"， function() {
console.log('我按下了press");
2. keydown按键按下的时候触发能识别功能键比如ctrl shift左右箭头啊
document.addEventListener( " keydown " , function() {
console.log('我按下了down');
)

键盘事件对象

在这里插入图片描述

<script>
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
1．我们的keyup和keydown事件不区分字母大小写a和A得到的都是65
2．我们的keypress事件区分字母大小写a 97和A得到的是65
document.addEventListener( " keyup" , function(e) {
console.log(e);
console.log( "up:' + e.keyCode);
我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65){
alert('您按下的a);
}else {
alert('您没有按下a键")
}})
document.addEventListener( " keypress", function(e) {
//console.log(e);
console.log("press: " +e.keyCode);

BOM浏览器对象模型

在这里插入图片描述

window事件常见对象

在这里插入图片描述

<script>
window.onload = function( ){
var btn = document.queryselector(" button" );
btn.addEventListener( 'click", function() {
lert("点击我');
})
}
</script>
</head>
<body>
<button>点击</button>
</body>

在这里插入图片描述

<script>
     window.addEventListener('resize',function (){
         console.log(window.innerWidth);
     })
    </script>

2.3定时器settimeout
在这里插入图片描述

<script>
1. setTimeout
语法规范:window.setTimeout(调用函数，延时时间);
 1．这个window在调用的时候可以省略
 2.这个延时时间单位是毫秒但是可以省略，如果省略默认的是e
setTimeout(function(){
console.log('时间到了');
}，2000);
</script>

在这里插入图片描述

<body>
<button>点击停止定时器</button>
<script>
var btn = document.queryselector( " button");
var timer = setTimeout(function(){
console.log('爆炸了');
}，5000);
btn.addEventListener("click", function() {
clearTimeout(timer);
})
</script>
</body>

在这里插入图片描述

<script>
 1. setInterval
语法规范:window.setInterval(调用函数，延时时间);
setInterval(function( ){
console.log(继续输出');
，1000);
 setTimeout延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>

在这里插入图片描述

<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector( ".begin");
var stop = document.querySelector( '.stop');
var timer = null;//全局变量null是一个空对象
begin.addEventListener( "click", function( ){
timer = setInterval(function() {
console.log('ni hao ma');
}，1000);
})
stop.addEventListener("click", function() {
clearInterval(timer);
)
</script>

JS执行机制(同步，异步）

在这里插入图片描述

location对象

在这里插入图片描述
在这里插入图片描述

body>
<button>点击</button>
<script>
var btn = document.queryselector( " button");
btn.addEventListener("click", function() {
记录浏览历史，所以可以实现后退功能
location.assign( "http://wow .itcast.cn');
不记录浏览历史，所以不可以实现后退功能
ilocation.replace( " http://wwnw .itcast.cn');
location.reload(true);
</script>
</body>

navigator对象

在这里插入图片描述

history对象

在这里插入图片描述

<body>
<a href="list.htm1">点击我去往列表页</a>
<button>前进</button>
<script>
var btn = document.queryselector( " button");
btn. addEventListener("click", function() i
//history.forward();
history.go(1);//1代表前进，-1代表后退
))
</script>
</body>

PC端网页特效

在这里插入图片描述

<script>
 offset系列
var father = document.querySelector( ".father" );
var son = document.querySelector( ".son ");
可以得到元素的偏移位置返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
它以带有定位的父亲为准如果么有父亲或者父亲没有定位则以 body 为准
console.log(spn.offsetLeft);
可以得到元素的大小宽度和高度
var w = document.queryselector(".w');
console.log(w.offsetwidth);
console.log(w.offsetHeight);
</script>

在这里插入图片描述

元素可视区client系列

在这里插入图片描述

<script>
client宽度和我们offsetwidth最大的区别就是不包含边框
var div = document.queryselector( "div");
console.log(div.clientwidth);
</script>

scroll系列

在这里插入图片描述

<script>
scroll系列
var div = document.querySelector( 'div');
console.log(div.scrollHeight);
console.log(div.clientHeight);
scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener( "scroll', function() {
console.log(div.scrollTop);
})
</script>

在这里插入图片描述

mouseenter和mouseover

在这里插入图片描述

<script>
var father = document.queryselector( '.father');
var son = document.queryselector( '.son');
father.addEventListener('mouseover', function() {//这里经过父子盒子都会打印11，
//如果是mouseenter就智慧打印一次
console.log(11);
})
</script>

动画原理

<script>
动画原理
1．获得盒子当前位置
2．让盒子在当前位置加上1个移动距离
3．利用定时器不断重复这个操作
4．加一个结束定时器的条件
5．注意此元素需要添加定位，才能使用element.style.left
var div = document.querySelector( "div');
var timer = setInterval(function(）{
if (div.offsetLeft >= 400){
//停止动画本质是停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + "px";
}，30);
</script>

触屏事件

在这里插入图片描述

<script>
 1．获取元素
2．手指触摸DOM元素事件
var div = document.queryselector( 'div);
div.addEventListener( "touchstart", function() {
console.log('我摸了你");
});
3．手指在DOM元素身上移动事件
div.addEventListener("touchmove', function() {
console.log('我继续摸');
}）;
4.手指离开dom事件
div.addEventListener( "touchend" , function(){
console.log('轻轻的我走了');
});
</script>

触摸事件对象（TouchEvent)

在这里插入图片描述
##移动端拖拽元素
在这里插入图片描述

var div = document.queryselector( "div");
var startx = 0;//获取手指初始坐标
var startY = o;
var x = 0;//获得盒子原来的位置
var y = 0;
div.addEventListener("touchstart", function(e) {
//获取手指初始坐标
startx = e.targetTouches[e].pagex;
startY = e.targetTouches[e].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
div.addEventListener( 'touchmove", function(e) {
//计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标
var movex = e.targetTouches[0].pagex - startx;
var moveY = e.targetTouches[0].pageY - startY;
//移动我们的盒子盒子原来的位置÷＋手指移动的距离
this.style.left = x+ movex + "px";
this.style.top = y + moveY + 'px";
e.preventDefault();//阻止屏幕滚动的默认行为

移动端常见的开发插件

1.-fastclick插件:减低延时问题

<script src="fastclick.js"></script>
</head>
<body>
<div></div>
<script>
if (" addEventListener' in document）{
document.addEventListener( " DOMContentLoaded" ， function() {
Fastclick.attach(document.body);
}，false);
}
var div = document.querySelector( 'div');
div.addEventListener("click", function( ){
lalert(11);
})

2.Swiper插件
实现轮播图
3.superslide
4.iscroll

本地存储

在这里插入图片描述
localStorage

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值获取过来
            console.log(sessionStorage.getItem('uname'));

        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
            // 当我们点击了之后，清除所有的
            sessionStorage.clear();

        });
    </script>
</body>

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));

        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');

        })
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>
</body>
puber~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM 操作
weixin_74448257的博客
11-05 251
javascript DOM操作
JavaScript DOM操作详解
brokyz
06-22 1063
本文将是我在学习DOM操作时的笔记
let和var(块级作用域的区别)
qq_34498806的博客
06-28 440
let和var(块级作用域的区别) <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> /** *块级作用域主要是值 if/for *ES5中的var是没有块级作用域的（if/for） *
获取body标签的两种方法
weixin_34186950的博客
09-04 705
获取body标签的两种方法 引用body标签有两做法：第一种：使用DOM Core 即引用某个给定文档的第一个（也是仅有的一个）body标签 代码如下: document.getElementsByTagName("body")[0] 第二种：使用HTML-DOM,即引用某个给定文档的body属性： 代码如下: doucumnet.body 转载于:https://www.c...
ES6语法--块级作用域var和let
qq_44534541的博客
05-07 579
块级作用域var和let <script> //1.变量作用域：变量在什么范围内是可用 // { // var name = 'pengfei'; // console.log(name); // } // console.log(name); // 2.没有块级作用域引起的问题 （if的块级） var func; if (true) { var name = 'pengfei'; func = function () {
引用body标签的两种做法
a1013774673的博客
10-12 164
引用body标签有两做法： 第一种：使用DOM Core 即引用某个给定文档的第一个（也是仅有的一个）body标签 document.getElementsByTagName("body")[0] 第二种：使用HTML-DOM,即引用某个给定文档的body属性： doucumnet.body 本文的重点： 1. 哪些是DOM Core,哪些是HTML-DO...
JavaScript之DOM操作获取元素、事件、操作元素、节点操作
weixin_53155105的博客
08-07 2659
什么是 DOM？ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式 DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node.
c认证web进阶dom与bom
10-03
ID和CLASS的区别 DOM上 1、DOM结构及节点 2、常用节点获取方法和属性 3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 DOM下 1、DOM修改 2、DOM添加 3、DOM删除 案例 DOM控制css样式 1、...
W3SChool离线手册+jsdom+bom
12-16
【标题】"W3School离线手册+jsdom+bom" 涵盖了Web开发中的基础和进阶知识，主要包括HTML、CSS和JavaScript的相关内容，同时提到了jsdom库以及浏览器对象模型（BOM）的概念。这个压缩包很可能是为开发者提供一个离线...
我的JavaScript学习笔记
02-25
总的来说，学习JavaScript不仅需要掌握基本语法和DOM操作，还要了解如何利用BOM与浏览器进行交互，熟悉优秀的库如jQuery来提升开发效率，以及如何实现各种炫酷的特效。希望这些笔记能帮助你从初学者逐渐成长为一名...
JavaScript期末考试复习必会代码
08-09
这篇复习资料涵盖了许多JavaScript的基础和进阶知识点，以下是其中的核心内容详解： 1. **条件语句** - `switch` 语句用于根据不同的条件执行不同的代码块，这里用于查询水果价格。在实际开发中，`switch` 通常用于...
JavaScript核心基础到进阶之路1
08-03
本文将深入探讨JavaScript的核心基础知识以及进阶概念，包括DOM、BOM和事件处理。 DOM（Document Object Model）是W3C标准的一种，它将HTML或XML文档表示为一棵可编程的对象树。在JavaScript中，DOM允许我们通过...
8个Python小程序代码示例 新手小白也能实现-python小程序源代码
最新发布
07-20
python小程序代码： 8个Python小程序代码示例。新手小白也能实现_python小程序源代码
程序设计实习大作业基于C++面向对象实现的百练魔兽世界源代码
07-20
程序设计实习大作业基于C++面向对象实现的百练魔兽世界源代码
[课设项目]Java-SSM框架开发保险业务管理系统设计与实现+jsp+MySQL+前后端分离毕业论文和源码.zip
07-20
本项目是一个基于Java-SSM框架开发的保险业务管理系统，旨在帮助保险公司实现业务管理的自动化和信息化。系统采用前后端分离的设计模式，前端使用JSP技术进行页面展示和用户交互，后端则采用SSM框架进行业务逻辑处理和数据访问。数据库方面，项目使用MySQL作为存储和管理数据的工具。 项目实现了以下功能： 1. 用户登录与权限管理：系统提供用户登录功能，并根据用户角色分配不同的操作权限。 2. 保险业务管理：系统支持保险产品的增删改查操作，同时提供业务办理、理赔申请等功能。 3. 数据统计与分析：系统能够对保险业务数据进行统计和分析，为保险公司提供决策支持。 4. 报表生成与导出：系统可生成各类保险业务报表，并支持导出为Excel、PDF等格式。 本项目的源码、数据库脚本和开发说明等资源已经过精心整理，适合计算机相关专业的学生进行毕业设计或课程设计使用，同时也可作为Java学习者的实战练习项目。
wx496家政服务预约系统-php+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
基于微信小程序的家政服务预约系统采用PHP语言和微信小程序技术，数据库采用Mysql，运行软件为微信开发者工具。本系统实现了管理员和客户、员工三个角色的功能。管理员的功能为客户管理、员工管理、家政服务管理、服务预约管理、员工风采管理、客户需求管理、接单管理等。客户的功能为查看家政服务进行预约和发布自己的需求以及管理预约信息和接单信息等。员工可以查看预约信息和进行接单。本系统实现了网上预约家政服务的流程化管理，可以帮助工作人员的管理工作和帮助客户查询家政服务的相关信息，改变了客户找家政服务的方式，提高了预约家政服务的效率。 本系统是针对网上预约家政服务开发的工作管理系统，包括到所有的工作内容。可以使网上预约家政服务的工作合理化和流程化。本系统包括手机端设计和电脑端设计，有界面和数据库。本系统的使用角色分为管理员和客户、员工三个身份。管理员可以管理系统里的所有信息。员工可以发布服务信息和查询客户的需求进行接单。客户可以发布需求和预约家政服务以及管理预约信息、接单信息。 本功能可以实现家政服务信息的查询和删除，管理员添加家政服务信息功能填写正确的信息就可以实现家政服务信息的添加，点击家政服务信息管理功能可以看到基于微信小程序的家政服务预约系统里所有家政服务的信息，在添加家政服务信息的界面里需要填写标题信息，当信息填写不正确就会造成家政服务信息添加失败。员工风采信息可以使客户更好的了解员工。员工风采信息管理的流程为，管理员点击员工风采信息管理功能，查看员工风采信息，点击员工风采信息添加功能，输入员工风采信息然后点击提交按钮就可以完成员工风采信息的添加。客户需求信息关系着客户的家政服务预约，管理员可以查询和修改客户需求信息，还可以查看客户需求的添加时间。接单信息属于本系统里的核心数据，管理员可以对接单的信息进行查询。本功能设计的目的可以使家政服务进行及时的安排。管理员可以查询员工信息，可以进行修改删除。 客户可以查看自己的预约和修改自己的资料并发布需求以及管理接单信息等。 在首页里可以看到管理员添加和管理的信息，客户可以在首页里进行家政服务的预约和公司介绍信息的了解。 员工可以查询客户需求进行接单以及管理家政服务信息和留言信息、收藏信息等。
企业数字化转型IT信息化战略规划建设方案.pptx
07-20
企业数字化转型IT信息化战略规划建设方案.pptx
python大作业实验报告.docx
07-20
Python
手写数字识别(机器学习)
07-20
手写数字识别(机器学习)
JavaScript进阶笔记：数据类型、数组、对象与DOM操作详解
8. **DOM (Document Object Model)**：这部分涉及到如何通过DOM操作网页内容，包括表单元素的处理，如`name`属性和标签的嵌套，以及`id`属性的作用。同时，还提到了利用jQuery库进行简化DOM操作，提供了更便捷的方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值