2023-03-13_DOM基本介绍及使用-Day01
1. defer-延迟
会在所有的js代码执行完毕之后 再次执行
如果有多个延迟的defer 依然按照顺序来执行
script src="./js/01_defer.js" defer></script> // console.log(111);
<script>
console.log(222);
</script>
// 执行结果为: 222 111
2. async-异步
当遇到比较耗时的操作的时候, 那么我们会将耗时操作 放到一个异步js文件中 无论是延迟还是异步 只能操作再外部的js文件
js文件的书写位置
(1) 内联js
(2) 内部
(3) 外部
执行顺序从上到下执行
(4) 延迟
(5) 异步
<!-- <script src="./js/02_async-异步.js" async></script> -->
<script>
console.log(1111111);
</script>
<button onclick="alert(33333);">按钮</button>
3. 判断变量类型
(1)
typeOf
typeof可以识别出基本类型String，、Number、Boolean、Undefined、Symbol，但是不能识别null。不能识别引用数据类型，会把null、array、object统一归为object类型,但是可以识别出function。所以typeof可以用来识别一些基本类型
（2）instance of
instanceof不能识别出基本的数据类型 String，、Number、Boolean、Undefined、Null、Symbol, 但是可以检测出引用类型，如array、object、function
（3）constructor
（4）toString
总结：判断数据类型有4种
typeof 判断的是基本数据类型
instanceof 判断的是引用数据类型
constructor
tostring
console.log('abc'.constructor == String); // true
var a = 1;
console.log(a.constructor == Number); //true
console.log(true.constructor == Boolean); //ture
------------------------------
console.log(Object.prototype.toString.call('abc')); // [object String]
console.log(Object.prototype.toString.call(123)); // [object Number]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call({})); // [object Object]
function f1(){}
console.log(Object.prototype.toString.call(f1)); // [object Function]
4. 流程控制语句中breack和continue设置标记
ok:
for(var i = 0; i <= 9; i++){
for(var j = 0; j <= 9; j++){
if(i == 5 && j == 5){
break ok;
}
console.log(i,j);
}
}
ok:
for(var i = 0; i <= 9; i++){
for(var j = 0; j <= 9; j++){
if(i == 5 && j == 5){
continue ok;
}
console.log(i,j);
}
}
5. DOM是什么
文档对象模型，英文全称为Document Object Model，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
6. window.onload
window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码};
7. DOM事件三要素
事件源 （承受事件的对象）
事件类型onclick
事件处理回调函数 回调函数就是不需要调用就自己执行的函数
事件处理三大步
- 获取事件源DOM对象
- 添加对应事件监听 (onclick）
- 书写处理回调
- 案例练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>17_DOM-案例练习-购物车加加减减</title>
</head>
<body>
<button id="sub">-</button>
<span id="num">0</span>
<button id="plus">+</button>
<script>
var plus = document.getElementById('plus');
plus.onclick = function(){
// （1）获取span中的内容
var span = document.getElementById('num');
// innerHTML获取标签中的内容
var span_num = span.innerHTML;
// （2）给内容进行加一
span_num++;
// （3）加一之后在赋值给span
span.innerHTML = span_num;
}
// 减
var sub = document.getElementById('sub');
sub.onclick = function(){
var span = document.getElementById('num');
var span_num = span.innerHTML;
if(span_num > 0){
span_num--;
span.innerHTML = span_num;
}
}
</script>
</body>
</html>
8. 修改DOM属性
- 原生属性-普通属性(点语法和 [ ] 语法都可以)
a.href = 'https://www.baidu.com';
img.src = './img/2.jpg';
- 原生属性-特殊属性1
当属性名字和属性值一致的时候 我们一般使用的是true和false
inp.checked = false;
- 原生属性-特殊属性2
class属性因为是关键字 所以不可以直接当做属性来使用
那么mdn说了 可以使用className来修改class的属性值
- 原生属性-自定义属性
自定义的属性不可以通过点语法 或者 中括号语法来获取
自定义的属性可以通过getAttribute来获取
setAttribute来设置
a.getAttribute('aa')
a.setAttribute('aa','cc')
9. 获取Dom对象的6种方法
- document.getElementById 通过id属性获取dom对象
- document.getElementsByTagName 通过标签名字获取dom对象
- document.getElementsByClassName 通过class属性获取dom对象
- document.getElementsByName 通过name属性获取dom对象
- document.querySelector 通过选择器获取dom对象
- document.querySelectorAll 通过选择器获取dom对象
10. innerText和innerHTML的基本使用
- innerHTML获取的是标签中的html文本
- innerText获取的是标签中的纯文本
设置- innerHTML中的文本标签会生效
- innerText中的文本标签不会生效
-
innerText和textContent的区别
（1）innerText和textContent都是获取标签中纯文本
（2）textContent可以获取隐藏元素 innerText不可以获取隐藏元素
（3）innerText所有的浏览器都可以使用
textContent只有高级浏览器才可以使用
