JS交互
2. 操作标签
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.2 操作标签属性
属性:属性是在开始标签上 属性名="属性值"
-
获取：标签.属性名
-
设置：标签.属性名 = 值
-
特殊：class需要写成className设置
<script>
var oDiv = document.getElementById("wrap");
// 1.获取属性 标签.属性名 特殊：class需要用className获取
console.log(oDiv.id);//wrap
console.log(oDiv.className);//box
var oA = document.getElementsByTagName("a")[0];
console.log(oA.href);//https://www.baidu.com
// 2.设置属性 标签.属性名 = 值 特殊：class需要className设置
oDiv.id = "wrap1";
oDiv.className = "box1";
oA.href = "https://wwww.jd.com";
</script>
2.3 操作标签样式
==注意：操作的都是行间样式==
-
获取：标签.style.样式名
-
设置：标签.style.样式名 = 值
-
特殊：如果样式带连字符- 需要改写成驼峰名 例如background-color改为backgroundColor
<script>
// 以下操作的都是行间样式
var oDiv = document.getElementsByTagName("div")[0];
// 1.获取样式 标签.style.样式名 注意：如果是-链接的样式 需要改成小驼峰命名 例如background-color改为backgroundColor
console.log(oDiv.style.width);//200px
console.log(oDiv.style.height);//200px
console.log(oDiv.style.color);//
console.log(oDiv.style.backgroundColor);//red
var btn = document.getElementsByTagName("button")[0];
// 2.设置样式 标签.style.样式名 = 值 注意：如果是-链接的样式 需要改成小驼峰命名 例如background-color改为backgroundColor
btn.onmouseover = function () {
oDiv.style.width = "500px";
oDiv.style.backgroundColor = "teal";
}
</script>
-
cssText语法
// 1.获取元素
var oDiv = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button")[0];
// 2.添加点击事件
btn.onclick = function(){
// 添加宽高背景色
oDiv.style.width = "200px";
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "teal";
//cssText会重写style行间样式
// oDiv.style.cssText = "width:200px;height:200px;background-color:pink" ;
}
3.数据类型
数据类型:根据数据的特征，功能分为不同的数据类型 不同的数据类型有不同的操作
3.1 数据类型的分类
六大数据类型：五种基本数据类型和一个特殊类型
五种基本数据类型
number 数值类型 10 40 60
string 字符串类型 "123" "1000" '123'
boolean 布尔类型 true|false
undefined 未定义
null 空对象
一种特殊类型(复合类型 对象类型 引用类型)
object 对象类型 {'name':'李四',age:20}
array 数组 [10,20,30,40]
function 函数 function(){}
3.2 typeof
-
作用：检测数据类型
-
语法：typeof(检测的数据) typeof 检测的数据
<script>
// 检测number类型
var a = 10;
// 1.typeof(检测的数据) 返回检测结果
console.log( typeof(a) );//number
// 2.typeof 检测数据
console.log( typeof a );//number
var s1 = "ertyuiopdfghjkl";
console.log( typeof s1 );//string
console.log(typeof(123),1);//number 1
console.log(typeof("123"),"检测数据");//string "检测数据"
</script>
3.3 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));//56 var 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>
-
NaN not a number 不是一个数
// 3.NaN not a number 不是一个数 运算得不到正确的结果的时候 var n7 = 10 / "你好"; // / 除 *乘 console.log(n7, typeof (n7));//NaN 'number'
3.4 string字符串
string字符串:引号引起来的都是字符串 ("" '')，==所有从页面中获取的聂荣都是字符串类型==
-
字符串.length ：获取字符串的长度
-
字符串[下标] ：获取对应下标的字符 下标都是从0开始
-
字符串.charAt(下标) 获取对应下标的字符
-
字符串遇到+ 会拼接
<script> // 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.5 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.6 null与undefined
3.6.1 undefined
undefined未定义 去拿快递 但是没有你的快递包裹 var a = null; console.log(a,typeof(a));// null "object"
3.6.2 null
null 空对象 快递员给了你一份空包裹 var b = undefined; console.log(b,typeof(b));// undefined "undefined"
-
==null和undefined有什么区别==
undefined 未定义 声明变量但没有赋值，没有存储空间 null 空对象，有存储空间(值为空)
4.面试题
1-innerHTML和innerText的区别? 2-typeof检测不同数据类型的返回值分别是什么 3-null和undefined的区别 4-NaN是什么意思，什么时候出出现NaN 5-js的数据类型有哪些? 6-如何获取和设置标签样式 7-如何获取和设置标签属性 8-如何操作表单标签内容
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。