0基础学习前段历程3 JS基础知识 输出方式

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中插入的内容";