02 - JavaScript(获取元素的其他方式,字符串拼接,数据类型)

程序员文章站 2024-03-26 11:20:05

...

一个对象添加多个样式
获取元素的其他方式
得出获取元素的相关结论
字符串拼接
数据类型

###一个对象同时添加多个样式

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{ margin: 0; padding: 0;}
            #box{
                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script>
        	let oBox = document.getElementById("box");
            oBox.onmouseenter = function(){
                //当鼠标移入时,这个对象的背景颜色发生改变
                oBox.style.backgroundColor = "red";
                //当要添加多个样式时,可以采取下面的方法
                //需要注意单样式需要按照css的写法书写,不需驼峰命名
                oBox.style.cssText = "width: 200px; height: 200px; background-color: yellow;"
            }
        </script>
    </body>
</html>

获取元素的其他方式

特殊标签(直接document.tagName, 不会给它起给名字 )
- document.body
- document.head
- document.title
一般标签
- ele.getElementsByClassName() 通过class来获取(集合)
- ele.getElementsByTagName() 通过tagname(标签名)来获取(集合)
- ele.getElementsByName() 通过name来获取(集合)
- ele.querySelect() 匹配css选择器的第一个
- ele.querySelectAll() 匹配css选择器匹配的所有的集合
- ClassName类似于数组,而是类数组/伪数组

下面是展示的是通过class来获取

重点:获取的节点是不是集合,不取决于对象的个数,而是取决于方法

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{ margin: 0; padding: 0;}
        </style>
    </head>
    <body>
        <div class="box">01</div>
    	<div class="box">02</div>
    	<div class="box">03</div>
        <script>
        	let divS = document.getElementsByClassName("box");
            //class 属于关键字,所以方法里面是涉及到ClassName
            //因为拥有相同的class有多个,所以要加一个s
        	//通过class获取的,返回的不是一个具体的标签/元素对象,而是一堆元素的集合,哪怕只有一个,也是集合,就是一个人的队伍
            console.log(divS);//打印HTMLCollection(3) [div.box, div.box, div.box, onclick: ƒ]
        	 divS.onclick = function(){
                console.log("click");
                 //这个点击事件无效,因为这是一个集合,而我们的事件需要绑定在一个具体的对象上
            }
             //给第二个元素添加一个事件,通过中括号[]来选择,中括号里面写入序号,序号从0开始,第几个减1即可
             divS[1].onclick = function(){
				console.log("click");
			}
             
        </script>
    </body>
</html>

通过tagname(标签名)来获取(集合)

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{ margin: 0; padding: 0;}
        </style>
    </head>
    <body>
        <div>01</div>
    	<div>02</div>
    	<div>03</div>
        <script>
        	let divS = document.getElementsByTagName("div");
            console.log(divS);//HTMLCollection(3) [div, div, div]
        	divS.onclick = function(){
                console.log("click");
                 //这个点击事件无效,因为这是一个集合,而我们的事件需要绑定在一个具体的对象上
            }
             //给第一个元素添加一个点击事件
            divS[0].onclick = function(){
                console.log("tagname");
            }
             
        </script>
    </body>
</html>

通过name来获取(集合)

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{ margin: 0; padding: 0;}
        </style>
    </head>
    <body>
        <input type="text" name="psd">
        <input type="text" name="psd">
        <input type="text" name="user">
        <script>
        	let ipts = document.getElementsByName("psd");
			console.log(ipts);
             //只有表单元素才有name,才可以使用这个方法
            //就是只有一个name叫psd的元素,它还是一个集合,也就是一个人的队伍
        </script>
    </body>
</html>

匹配css选择器的第一个

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{ margin: 0; padding: 0;}
        </style>
    </head>
    <body>
        <div>
            <p>123</p>
        </div>
        <div>
            <p>456</p>
        </div>
        <div>
            <p>567</p>
        </div>
        <p>外面的p</p>
        <script>
        	let p = document.querySelector("div p");
            //只返回第一个满足条件的元素
            //是一个具体的标签元素
            p.onclick = function(){
                p.style.color = "red";
            }
        </script>
    </body>
</html>

匹配css选择器匹配的所有的集合

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{ margin: 0; padding: 0;}
        </style>
    </head>
    <body>
        <div>
            <p>123</p>
        </div>
        <div>
            <p>456</p>
        </div>
        <div>
            <p>567</p>
        </div>
        <p>外面的p</p>
        <script>
        	let p = document.querySelectorAll("div p");//集合
            p[1].onclick = function(){
                p[1].style.color = "red";
            }
        </script>
    </body>
</html>

小总结

方法	返回的结果
ID/ querySelector	返回具体的标签元素,不需要用序号取值
ClassName,TagName,Name	这些都是集合,需要序号取值

拼接

因为如果直接赋值,就会直接覆盖掉原来的,所以要使用拼接

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{ margin: 0; padding: 0;}
        </style>
    </head>
    <body>
        <div id="box">321321</div>
        <script>
        	let oBox = document.getElementById("box");
            oBox.onclick = function(){
                box.innerHTML =  "123"//会直接覆盖的,需要使用到拼接
                let str = box.innerHTML;//str代表的是'321321',仅仅是代表那个数据而已
                box.innerHTML = str + "123"; 
                console.log(box.innerHTML);
                //简写,省略变量的写法,如下
                /*
                box.innerHTML = box.innerHTML + "123";
                box.innerHTML += "123";
                //自己加上一个值,再赋值给自己
                //前面加后面 赋值给前面
                //遇到等号,先看右边,没有等号是,获取,有等号是赋值
                */
            }
        </script>
    </body>
</html>

数据类型

各种各样的数据都是用来解决不同的应用场景的需求

数据类型其实用来区分的数据

ES5

number 数值型
string 字符串/字符型
boolean 布尔值true/false,真: true,假: false事物都是有两面性,正反,真假
undfined undfined
null null
object 不属于上面的都属于它,收容所

ES6

新增的Symbol 符号

面试题:

javascript有多少种数据类型? 7种
es5有多少种数据类型? 6种
es6有多少种数据类型? 7种,es6是在es5的基础上拓展的
函数属于什么数据类型? object

typeof 运算符

typeof并不是直接用来检测数据类型,只能间接用来判断数据类型
js 并没有一个官方提供的方法用来检测数据类型
就是有些情况(null,function)不准确

//number
let num = 123;//代表123
//string
let str = "123";//代表字符串123
//只要带了引号,甭管里面写啥,都是字符串
//boolean 真: true 假: false
let bool = true;
//undfined
let a; //不知道a到底要保存什么值,代表undfined
//js解释器在js编译阶段,遇到一个变量,只声明没赋值,默认赋值为undfined
//null
let b = null;
console.log(typeof b);//null
//object
//函数
let fn = function(){
    //代表数据
}
console.log(typeof fn);//返回function
/*js function 第一等公民,非常重要的,会用函数就学会js
作者设置typeof遇到函数的时候,返回function*/
//数组,可以存储大量的数据
let arr = [1,"123",null,function(){}];
// 快速知道数组的有多少条数据
console.log(arr.length);//代表数据个数的总和，length 长度
//取第一条数据
console.log(arr[1]);
//json对象 ,键值对
//不存在顺序的说法，重名就覆盖了
let obj = {//JSON 对象，一一对应，键值对
    num : 1,
    str : "123",
    fn: function(){},
    a : true
};
console.log(obj);

null 和 undefined的区别

null 和 undefined	区别
let a;	未定义，未被初始化的默认值
let b = null;	空对象,空对象的指针

Symbol

let s1 = Symbol("123");//生成符号，生成在js里面独一无二的值
let s2 = Symbol("123");

###小提示:

id具有唯一性,js里面的id同样具有唯一性,可以直接使用,非常不建议不获取就直接用,别人看你的代码不知道你是哪里获取的,缺乏代码可读性
任意一个变量代表数据/值,在内存里面开辟空间,拿到值,通过变量的取到
直接使用变量的时候,其实是使用变量值
如果我们需要一个变量a,等会在使用这个变量,先声明再使用,默认值给undfined,但是最好给null

相关标签：获取元素的其他方式字符串拼接 JS数据类型

上一篇： C++基础知识（析构函数）

下一篇： js 创建函数的方式