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

作者: 前端不许笑 | 来源:发表于2022-01-01 23:40 被阅读0次

2022/1/1： JS DOM前小插曲
js DOM（1）
virtual dom
DOM小插曲
前端发展历史
面试中React与Vue的比对 / 面试/mvvm/virtua
图片旋转预览
JS第七天-03
图片上传预览精简版
virtual dom (虚拟dom)

写在前头

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

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

春招倒计时

今天是2022年的第一天。

每日小结

有效学习时间

6h

学习内容

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>

```

网友评论

本文标题：2022/1/1： JS DOM前小插曲

本文链接：https://www.haomeiwen.com/subject/ejoaqrtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

写在前头

春招倒计时

每日小结

有效学习时间

学习内容

目前水平

2022.1.1

相关文章