1.操作标签
2.1操作标签内容
操作标签内容分为两种
-
操作闭合标签内容
-
操作表单标签内容
2.1.1操作表单标签内容
-
获取：标签.value
-
设置 ：标签.value = 值
<script>
var oInput = document.getElementsByTagName("input")[0]
//1.获取表单元素的value值 标签.value
console.log(oInput);
console.log(oInput.value)
//2.设置表单元素的value值 标签.value = 值
// oInput.value = "456"
// 2.点击设置按钮 给表单元素设置value为456
// 给button添加点击事件 标签.onclick = fucntion(){ 要做的事}
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
oInput.value = "456"
}
</script>
2.1.2操作闭合标签内容
-
获取： 标签.innerText 标签.innerHTML
// 1.获取闭合标签的内容 标签.innerHTML 标签.innerText
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv);
console.log(oDiv.innerHTML);//今天周二了
console.log(oDiv.innerText);//今天周二了
-
设置：标签.innerText = 值 标签.innerHTML = 值
// 2.设置闭合标签的内容 标签.innerHTML = 值 标签.innerText = 值
//先将原先的内容拿出来(标签.innerHTML) 和 赵链接在一起
oDiv.innerHTML = oDiv.innerHTML + "赵"
oDiv.innerText = "123"
//3.给p标签设置内容 innerHTML和innerText的区别
var oP = document.getElementsByTagName("p")[0];
console.log(oP)
// oP.innerHTML = "<b>主人</b>"
oP.innerText = "<b>前进</b>"
-
==innerText和innerHTML的区别==
相同点:都可以获取标签内容 都可以设置标签内容，设置的时候 两者都会重写 不同点：innerText不识别标签 innerHTML识别标签
2.操作标签属性
属性:属性是在开始标签上 属性名="属性值"
-
获取：标签.属性名
-
设置：标签.属性名 = 值
-
特殊：class需要写成className设置数据类型的分类
3.数据类型的分类
六大数据类型：五种基本数据类型和一个特殊类型
五种基本数据类型
number 数值类型 10 40 60
string 字符串类型 "123" "1000" '123'
boolean 布尔类型 true|false
undefined 未定义
null 空对象
一种特殊类型(复合类型 对象类型 引用类型)
object 对象类型 {'name':'李四',age:20}
array 数组 [10,20,30,40]
function 函数 function(){}
4. typeof
-
作用：检测数据类型
-
语法：typeof(检测的数据) typeof 检测的数据
-
<script>
// 检测number类型
var a = 10;
// 1.typeof(检测的数据) 返回检测结果
console.log( typeof(a) );//number
// 2.typeof 检测数据
console.log( typeof a );//numbervar s1 = "ertyuiopdfghjkl";
console.log( typeof s1 );//stringconsole.log(typeof(123),1);//number 1
console.log(typeof("123"),"检测数据");//string "检测数据"
</script>
3.1 number数值
-
number数值类型 整数 小数 负数 8进制 16进制 NaN
-
<script>
// number数值类型:整数 小数 负数 8进制 16进制 NaN
// 1.整数
var a = 10;
console.log(a, typeof (a));//10 'number'
// 2.小数
var n1 = 3.1415926;
console.log(n1, typeof (n1));//3.1415926 'number'var n2 = .5;
console.log(n2, typeof (n2));//0.5 'number'var n3 = 5;
console.log(n3, typeof (n3));// 'number'// 3.NaN not a number 不是一个数 运算得不到正确的结果的时候
var n7 = 10 / "你好";
console.log(n7, typeof (n7));//NaN 'number'// 在js中 == 意思是左边的是否和右边的相等 如果相等返回true 否则返回false
console.log(1 == 2);//false
// 任意两个NaN都不相等
console.log(NaN == NaN);//false
/*------------------------------了解-----------------------------*/
// 浏览器是显示10进制的数
//4. 8进制:以0开头 范围在0-7之间
var n4 = 070;
console.log(n4, typeof (n4));//56var n5 = 0771;
console.log(n5, typeof (n5));//505// 5. 16进制 以0x开头 范围0-9 a-10 b-11 c-12 d-13 e-14 f-15
var n6 = 0xff;
console.log(n6, typeof (n6))
// 6.小数在运算的时候会精度缺失
//是因为计算机在计算的时候 是先将数转换为二进制进行计算，在转换过程中出现精度缺失
var n8 = 0.1 + 0.2
console.log(n8);//0.30000000000000004
console.log(n8 == 0.3);//false 不要把小数运算作为判断条件 是不会影响代码的执行的
</script>
3.2 string字符串
string字符串:引号引起来的都是字符串 ("" '')，==所有从页面中获取的聂荣都是字符串类型==
-
字符串.length ：获取字符串的长度
-
字符串[下标] ：获取对应下标的字符 下标都是从0开始
-
字符串.charAt(下标) 获取对应下标的字符
-
字符串遇到+ 会拼接
// 1.string类型 用引号引起来的都是string类型
var s1 = "123";
console.log(s1,typeof(s1));// "123" "string"
var s2 = "0711web";
console.log(s2,typeof(s2));// "0711web" "string"
var s3 = "中公教育软件学员2022年0711web";
// 2.字符串.length 获取字符串的长度
console.log( s1.length );//3
console.log( s2.length);//7
//3.字符串[下标] 获取对应下标的字符 下标都是从0开始
var res = s1[1];
console.log(res);//2
var res1 = s2[4];
console.log(res1)//w
console.log( s3[3]);//育
//4.字符串.charAt(下标) 获取对应下标的字符
var res2 = s3.charAt(0);
console.log(res2);//中
console.log(s3.charAt(7));//员
//5.字符串遇到+ 会拼接
console.log(1 + 1);//2
console.log(1 + '1');//"11" 是字符串的类型11
console.log(10 + 5 + '30');//"1530"
console.log( "30"+ 10 + 5);// "3010" + 5 = "30105"
console.log(10 + "30" + 5);// "10305"
</script>
3.3 boolean布尔类型
<script>
// boolean类型 true和false
var b1 = true;
console.log(b1,typeof(b1));// true "boolean"
var b2 = false;
console.log(b2,typeof(b2));// false "boolean"
</script>
3.4 null与undefined
undefined 未定义 声明变量但没有赋值，没有存储空间
null 空对象，有存储空间(值为空)