2022/1/1： JS DOM前小插曲

写在前头

在我决定走前端时，大概是21年暑假，那时参加了学校的ACM集训，在坚持了一个暑假期间，我也认识到自己不是“小镇做题家” 。当然也没那做题的脑子。之前都是一直偶尔兴趣来了学学前端。

大一折腾了很多其他的玩意(钱，嘻嘻嘻)，也赚到没几个硬币。现在大二开始好好准备春招。每天公众号打卡，没人看也无所谓。

春招倒计时

今天是2022年的第一天。

每日小结

有效学习时间

学习内容

DOM 的部分操作、将某马的HTML前面2个小节复习敲完了一遍（表单，列表，文本域等等）具体就不细说了

目前水平

HTML,CSS：看了某马的html，css网课，全敲完了一遍。菜鸟教程也看了一遍。

JavaScript：还在上着某马的课

2022.1.1

代码粗糙笔记 -- 知道自己每天学了啥就行，哈哈哈。

DOM：P194～210

01-getElementById获取元素

```JavaScript

<body>

// 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);

</script>

```

02-getElementsByTagName获取某些元素

```JavaScript

<body>

<ul>

<li>知否知否，应是等你好久11</li>

</ul>

</ol>

// 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.getElementsByTagName('ol'); // [ol]

// console.log(ol[0].getElementsByTagName('li'));

var ol = document.getElementById('ol');

console.log(ol.getElementsByTagName('li'));

</script>

</body>

```

03-H5新增获取元素方式(1)

```JavaScript

<body>

<ul>

</ul>

</div>

// 1. getElementsByClassName 根据类名获得某些元素集合

var boxs = document.getElementsByClassName('box');

console.log(boxs);

// 2. querySelector 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box #nav

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>

```

04-获取特殊元素

```JavaScript

<body>

// 1.获取body 元素

var bodyEle = document.body;

console.log(bodyEle);

console.dir(bodyEle);

// 2.获取html 元素

// var htmlEle = document.html;

var htmlEle = document.documentElement;

console.log(htmlEle);

</script>

</body>

```

#### 事件

05-事件三要素

```JavaScript

<body>

// 点击一个按钮，弹出对话框

// 1. 事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素

//(1) 事件源事件被触发的对象谁按钮

var btn = document.getElementById('btn');

//(2) 事件类型如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下

//(3) 事件处理程序通过一个函数赋值的方式完成

btn.onclick = function() {

alert('点秋香');

}

</script>

</body>

```

06-执行事件步骤

```JavaScript

<body>

// 执行事件步骤

// 点击div 控制台输出我被选中了

// 1. 获取事件源

var div = document.querySelector('div');

// 2.绑定事件注册事件

// div.onclick

// 3.添加事件处理程序

div.onclick = function() {

console.log('我被选中了');

}

</script>

</body>

```

07-操作元素之改变元素内容

```JavaScript

<head>

<style>

div,

p {

width: 300px;

height: 30px;

line-height: 30px;

color: #fff;

background-color: pink;

}

</style>

</head>

<body>

<button>显示当前系统时间</button>

// 当我们点击了按钮， div里面的文字会发生变化

// 1. 获取元素

var btn = document.querySelector('button');

var div = document.querySelector('div');

// 2.注册事件

btn.onclick = function() {

// div.innerText = '2019-6-6';

div.innerHTML = getDate();

}

function getDate() {

var date = new Date();

// 我们写一个 2019年 5月 1日星期三

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];

}

// 我们元素可以不用添加事件

var p = document.querySelector('p');

p.innerHTML = getDate();

</script>

</body>

```

08-innerText和innerHTML的区别

```JavaScript

<body>

<p>

我是文字

</p>

// innerText 和 innerHTML的区别

// 1. innerText 不识别html标签非标准去除空格和换行

var div = document.querySelector('div');

// div.innerText = '<strong>今天是：</strong> 2019';

// 2. innerHTML 识别html标签 W3C标准保留空格和换行的

div.innerHTML = '<strong>今天是：</strong> 2019';

// 这两个属性是可读写的可以获取元素里面的内容

var p = document.querySelector('p');

console.log(p.innerText);

console.log(p.innerHTML);

</script>

</body>

```

09-操作元素之修改元素属性

```JavaScript

<body>

// 修改元素属性 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 = '刘德华';

}

</script>

</body>

```

10-分时问候并显示不同图片案例

```JavaScript

<body>

// 根据系统不同时间来判断，所以需要用到日期内置对象

// 利用多分支语句来设置不同的图片

// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性

// 需要一个div元素，显示不同问候语，修改元素内容即可

// 1.获取元素

var img = document.querySelector('img');

var div = document.querySelector('div');

// 2. 得到当前的小时数

var date = new Date();

var h = date.getHours();

// 3. 判断小时数改变图片和文字信息

if (h < 12) {

img.src = 'images/s.gif';

div.innerHTML = '亲，上午好，好好写代码';

} else if (h < 18) {

img.src = 'images/x.gif';

div.innerHTML = '亲，下午好，好好写代码';

} else {

img.src = 'images/w.gif';

div.innerHTML = '亲，晚上好，好好写代码';

}

</script>

</body>

```

11-操作元素之表单属性设置

```JavaScript

<body>

// 1. 获取元素

var btn = document.querySelector('button');

var input = document.querySelector('input');

// 2. 注册事件处理程序

btn.onclick = function() {

// input.innerHTML = '点击了'; 这个是普通盒子比如 div 标签里面的内容

// 表单里面的值文字内容是通过 value 来修改的

input.value = '被点击了';

// 如果想要某个表单被禁用不能再点击 disabled 我们想要这个按钮 button禁用

// btn.disabled = true;

this.disabled = true;

// this 指向的是事件函数的调用者 btn

}

</script>

</body>

```

12-仿京东显示隐藏密码

```JavaScript

<head>

<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: 2px;

right: 2px;

width: 24px;

}

</style>

</head>

<body>

</label>

</div>

// 1. 获取元素

var eye = document.getElementById('eye');

var pwd = document.getElementById('pwd');

// 2. 注册事件处理程序

var flag = 0;

eye.onclick = function() {

// 点击一次之后， flag 一定要变化

if (flag == 0) {

pwd.type = 'text';

eye.src = 'images/open.png';

flag = 1; // 赋值操作

} else {

pwd.type = 'password';

eye.src = 'images/close.png';

flag = 0;

}

</script>

</body>

```

13-操作元素之修改样式属性

```JavaScript

head>

<title>Document</title>

<style>

div {

width: 200px;

height: 200px;

background-color: pink;

}

</style>

</head>

<body>

// 1. 获取元素

var div = document.querySelector('div');

// 2. 注册事件处理程序

div.onclick = function() {

// div.style里面的属性采取驼峰命名法

this.style.backgroundColor = 'purple';

this.style.width = '250px';

}

</script>

</body>

```

14-关闭淘宝二维码案例

```JavaScript

<head>

<title>Document</title>

<style>

.box {

position: relative;

width: 74px;

height: 88px;

border: 1px solid #ccc;

margin: 100px auto;

font-size: 12px;

text-align: center;

color: #f40;

/* display: block; */

}

.box img {

width: 60px;

margin-top: 5px;

}

.close-btn {

position: absolute;

top: -1px;

left: -16px;

width: 14px;

height: 14px;

border: 1px solid #ccc;

line-height: 14px;

font-family: Arial, Helvetica, sans-serif;

cursor: pointer;

}

</style>

</head>

<body>

淘宝二维码

</div>

// 1. 获取元素

var btn = document.querySelector('.close-btn');

var box = document.querySelector('.box');

// 2.注册事件程序处理

btn.onclick = function() {

box.style.display = 'none';

}

</script>

</body>

```

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,734评论 6赞 505
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,931评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,133评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,532评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,585评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,462评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,262评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,153评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,587评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,792评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,919评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,635评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,237评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,855评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,983评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,048评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,864评论 2赞 354

2022/1/1： JS DOM前小插曲

写在前头

春招倒计时

每日小结

有效学习时间

学习内容

目前水平

2022.1.1

推荐阅读更多精彩内容