一、获取标签的方式
- es6 获取元素的方式： var let const function import class
1.独有标签的获取方式
- 可以直接document.tagName
document.body.onclick = function () {
console.log("456");
}
2.通过 Id 来获取元素
<script>
let test = document.getElementById("box1");
test.onclick = function (){
console.log("456");
}
</script>
3.通过 ClassName 来获取元素
let test = document.getElementsByClassName("box");
因为类名可以有很多，可以得在
Element后面加上s;
但是这样获取到的元素是一个元素集合。
就算只有一个class元素，获取到的也是一个集合
所以我们可以通过在变量名称前面加上[]来获取具体的标签节点 / 标签元素
集合的排序遵循第一个为0，第二个为1。以此类推
<script>
let test = document.getElementsByClassName("box");
test[1].onclick = function (){
console.log("123");
}
</script>
- 获取节点的时候，是不是集合。不取决于标签的个数，而取决于方法
4.通过 Tag 来获取元素
<script>
let test = document.getElementsByTagName("div");
test[3].onmouseenter = function (){
console.log("123");
}
</script>
- 通过tag获取的元素也是一个集合，要获取具体的对象 / 元素 可以使用
[]来选中具体的对象。
5.通过 Name 来获取元素
<input type="text" name="txt">
<input type="text" name="txt">
<input type="password" name="pas">
<script>
let test = document.getElementsByName("txt");
test[0].onmouseenter = function () {
console.log("123");
}
</script>
- 通过
name获取的也是一个集合，可以通过[]获取其中一个具体的元素。name属性必须合法，标签本身没有name属性的不能设置.
6.通过 选择器 来获取元素
通过querySelectorAll获取的是符合条件的全部
<div>
<p>123</p>
</div>
<div>
<p>456</p>
</div>
<div>
<p>789</p>
</div>
<p>这是外面的</p>
<script>
let caught = document.querySelectorAll("div p");
caught[1].onmouseenter = function (){
console.log("123");
}
</script>
- 通过选择器来获取元素的，获取到的也是一个集合。
也可以通过[]来获取到具体的元素
也可以通过选择结构选选择
<script>
let caught = document.querySelectorAll("#box p");
console.log(caught);
</script>
通过querySelector获取元素，获取的是符合条件的第一个，获取的元素是具体的对象，不是一个集合。
<script>
let caught = document.querySelector("div p");
caught.onclick = function () {
console.log("caught");
}
</script>
-
Id、querySelector获取的是具体的值，不是一个集合，不用加[]取值。 - 而
className、querySelectorAll，tagName、Name。获取的是集合，需要加[]取值
二、字符串拼接
<div id="box1" class="box2">456</div>
<script>
let test = document.getElementById("box1");
test.onclick = function () {
// = num = 456 第二次 test.innerText = 456123 = num
let num = test.innerText;
test.innerText = num + "123";
}
</script>
1.我们把
test.innerText这个值赋值给num这个变量，所以num就等于456；
再通过test.innerText= num + "123"； 等于456+123= 456123;
点击一次它就会去获取这个num变量
它就会去获取上一次计算的值再去加上123
<div id="box1" class="box2">456</div>
<script>
let test = document.getElementById("box1");
test.onclick = function () {
let num = "黄帅逼";
// test.innerText = test.innerText + num;
// 等价于上面的代码
test.innerText += num;
}
</script>
test.innerText += num
相当于test.innerText = test.innerText + num；
- 前面加后面，再赋值给前面
三、数据类型
1.在JS中一共有7种数据类型
ES5：
- String 字符串(基本数据类型)
- Number 数值(基本数据类型)
- Boolean 布尔值(基本数据类型) 值：true 和 false
- Null 空值(基本数据类型) 值：null
- Undefined 未定义(基本数据类型) 值：undefined
- Object 对象(引用数据类型)
ES6：
- symbol 字符型
2.如何查看数据类型?
和C语言一样, 使用typeof操作符可以用来检查数据类型。
使用格式：typeof 数据，例如 typeof 123; typeof num;
- typeof 运算符
并不是直接用来检测数据类型的，只能间接用来判断数据类型
js 并没有 一个 官方提供的方法用来检测数据类型！
1.一个声明但没赋值的值 ，它的系统默认值就是
undefined
let num;
2.
undefined类型的加typeof 返回的是数据类型
console.log(typeof a);
3.没加typeof 的返回的它的数据类型的值
console.log(a);
4.
typeof null的时候会返回null因为typeof并不是来检测数据类型的
typeof为一个函数的时候，它会返回一个function
为什么不返回object，因为 返回object你根本不知道它到底是什么数据类型。 而 函数 在js 中 是顶级对象！ 所以直接返回function
3. 数组 使用数组存储多个数据
<script>
let a = ["123", 123, function(){}, null, undefined];
console.log(a);
</script>
数组获取的元素是一个集合
可以通过[]来获取其中的元素
如果知道这个数值里面数据的个数呢
通过 ``arr.length` 就可以获取到
如何知道最后一条数据
通过length - 1来获取
JSON 对象 键值对
JSON对象没有所谓的顺序概念
<script>
let obj = {
num: 1,
str: "123",
fn: function () {},
a: true
}
console.log(obj.fn);
</script>
undefined 和 null 的区别 ：
- undefined 代表 未初始化值
- null 空对象指针
textareainput中的值 需要通过value来获取
<textarea id="content"></textarea>
<script>
let content = document.getElementById("content");
let str = content.value;
</script>
在es5中如果里面嵌套的想换行。需要给每个换行的添加字符串和在后面加上 + 号
info.innerHTML += "<li>" +
"<p>" +
"<a></a>" +
"</p>" +
"</li>";
不管是单引号''还是双引号 ""，都必须成对出现，单引号和双引号没有任何区别，这是ES5的规范
在ES6中，如果想在一个字符串里面去加一个变量的时候，我们通过添加反引号 `` 来实现。
info.innerHTML += `<li>
<p>
<a></a>
</p>
</li>`;
}
info.innerHTML += `<li style="color: ${color}"> ${str} </li>`;
