JS中常用的输出方式
所有输出方式中只有consol会输出数据的原始格式,其余输出全为字符串
1、console 控制在浏览器控制台输出的
-
console.log() 控制台输出日志
console.log可以一次性输出多
-
console.dir() 控制台详细输出
console.dir只能输出一个对象或者一个值的详细信息
-
console.table() 把数据以表格的形式输出在控制台
-
console.time()/timeEnd() 计算某一个程序消耗的时间
-
console.warn() 输出警告信息
2、window提示框
-
alert() 提示框
alert弹出的内容都会默认转换为字符串(toString)
alert是在浏览器窗口中弹出一个提示框,提示框中输出指定的信息 需要等到alert弹出框,点击确定关闭后,后面的代码才会继续执行(alert会阻碍主线程的渲染) -
confirm() 确认取消提示框
相对于alert来说,给用户提供了确定和取消两种选择
-
prompt() 在confirm的基础上多加一个原因
prompt在confirm的基础上给用户提供书写操作的原因等信息
3、向页面指定容器中插入内容
-
document.write 向页面中输入内容
把内容写入到页面中:和alert一样,写入的内容最后都会转换为字符串,然后在写入
document.write('AA')=>'AA'
document.write(10);=>'10'
document.write({
name:
'珠峰'
});
//=>"[object Object]"
-
innerHTML / innerText 向页面指定容器中输入内容
基于innerHTML/innerText向指定容器中插入内容(插入的信息也会变为字符串再插入) 基于这两种方式会把之前容器中的内容给覆盖掉,想要追加,则采用+=的方式
innerHTML能够把标签文本进行识别和渲染
innerText会把所有内容都当做普通的文本
let
box = document.getElementById('box');
box.innerHTML = "珠峰"; //=>覆盖原始的所有内容
box.innerText = "培训";
box.innerHTML += "珠峰"; //=>在原始内容上继续增加
box.innerText += "培训";
box.innerHTML = "<strong>我是重点内容</strong>";
box.innerText = "<strong>我是重点内容</strong>";
-
value 向页面表单元素中输入内容
给页面中的文本框赋值
let userName = document.getElementById('userName');
userName.
value = "我是在JS中插入的内容";